1、我们在工作中，在中后台系统应用中，经常会遇到打印的问题。

2、产品需求将列表详情数据能够打印生产单据，包括列表详情的所有数据。

3、通常我们可以通过接口拿到一定格式的JSON数据。

打印组件，总的思想就是把JSON数据通过Vue渲染成HTML，然后把指定id的标签打印出来。

封装组件时遇到的问题：

1、elementUI表格如果直接使用，浏览器打印时有的CSS会渲染不出来，自己重新写了表格的CSS和HTML。

2、按钮使用v-print打印指令时，print的id要是动态的，不然会有打印缓存(我是这样的理解的，可能不准确)。

第一张为需要被打印的组件，第二、第三为浏览器打印的效果图

一、全局注册组件,在main.js中全局注册组件

二、组件代码

三、在组件中使用

一、全局注册组件,在main.js中全局注册组件

将组件注册为全局组件，方便使用，减少引用次数

// 全局打印组件挂载
import PrintForm from '@/components/PrintForm'Vue.component('PrintForm', PrintForm);

二、组件代码

UI组件封装，统一封装UI，统一固定格式的数据格式来进行渲染。

<template><!-- 查看详细信息话框 --><el-dialog title="打印" :visible.sync="isVisiblePrint" width="70%" append-to-body :close-on-click-modal="false"><div class="contentPrint"><div :id="printId" style="width: 780px;margin: 0 auto;padding: 5px;"><h4 style="text-align: center;">{{companyPrint}}</h4><el-descriptions class="margin-top" :title="titlePrint" :column="3" :size="size"><el-descriptions-item v-for="(item,index) in titleArrayPrint" :key="index" :label="item.label">{{ item.content }}</el-descriptions-item></el-descriptions><table class="tableStyle " v-if="detailListDataPrint[0].length > 1"><tr class="borderStyle"><td class="borderStyle" v-for="(item,index) in detailListDataPrint[0]" :key="index">{{ item }}</td></tr><tr class="borderStyle" v-for="(item,index) in detailListDataPrint[1]" :key="index"><td class="borderStyle" v-for="(keys,index) in item" :key="index">{{keys}}</td></tr></table><table class="tableStyle " style="margin-top: 25px;" v-if="examineArrayPrint.length > 0"><tr class="borderStyle"><td class="borderStyle">序号</td><td class="borderStyle">审批节点</td><td class="borderStyle">审批处理</td><td class="borderStyle">审批意见</td><td class="borderStyle">审批人</td><td class="borderStyle">审批时间</td></tr><tr class="borderStyle" v-for="(item,index) in examineArrayPrint" :key="index"><td class="borderStyle">{{ index+1  }}</td><td class="borderStyle">{{ item.taskNodeName?item.taskNodeName:'' }}</td><td class="borderStyle">{{ item.controlValue ?item.controlValue :'' }}</td><td class="borderStyle">{{ item.remark?item.remark:''  }}</td><td class="borderStyle">{{ item.createName ?item.createName:'' }}</td><td class="borderStyle">{{ item.createTime?item.createTime:''  }}</td></tr></table></div></div><div slot="footer" class="dialog-footer"><el-button v-print="print" type="primary">打印</el-button><el-button @click="isVisiblePrint = false">关闭</el-button></div></el-dialog>
</template>
<script>
import {getTableHistory} from '@/api/activiti/activitiHistory'
export default {name: "PrintForm",data() {return {print: {id: '',popTitle: '', // 打印配置页上方标题extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）previewTitle: '', // 打印预览的标题（开启预览模式后出现）,previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）   previewBeforeOpenCallback() { }, //预览窗口打开之前的callback（开启预览模式调用）previewOpenCallback() { }, // 预览窗口打开之后的callback（开启预览模式调用）beforeOpenCallback() { }, // 开启打印前的回调事件openCallback() { }, // 调用打印之后的回调事件closeCallback() { }, //关闭打印的回调事件（无法确定点击的是确认还是取消）url: '',standard: '',extraCss: '',},size: '',isVisiblePrint:false,companyPrint:'',//公司titlePrint:'',//功能类型，请购、入库等titleArrayPrint:[], //单子上部基本数据isVisiblePrint:false,detailListDataPrint: [[],[]],examineArrayPrint:[],//审批数组printId:''}},methods: {changeVisible(item){console.log(item,'item打印组件',this);this.printId = new Date().getTime() + 'print'this.print.id = this.printIdthis.isVisiblePrint = !this.isVisiblePrintthis.titlePrint = item.titlePrintthis.companyPrint = item.companyPrintthis.titleArrayPrint = item.titleArrayPrint.filter((i)=>{if(i.content !== ''){return i}})this.detailListDataPrint[0] = item.headerArrayPrintthis.detailListDataPrint[1] = item.bodyArrayPrintif (item.processInstancePrint) {this.queryParams = getTableHistory({ "instanceId": item.processInstancePrint }).then(response => {this.examineArrayPrint = response.datathis.examineArrayPrint = this.examineArrayPrint.map(w => {if (w.taskNodeName == '发起人') {w.createName = item.printDataObject[0].createuser_dictText}return w})})} }},mounted() {},destroyed(){this.printId = ''}
}
</script>
<style>
h4 {padding: 0 ;margin:10px 0;}
.margin-top .el-descriptions__title {text-align: center;width: 100%;
}
.contentPrint {overflow: auto;height: 460px;
}
.tableStyle {border-collapse: collapse;width: 100%;text-align: center;color: #606266;table-layout: fixed;border: 1px solid #dfe6ec;page-break-after:auto
}.borderStyle {border: 1px solid #dfe6ec;text-align: center;color: #606266;word-break: break-all;page-break-inside:avoid;page-break-after:auto;
}
.printTable {border: 1px solid #dfe6ec;
}
</style>

三、在组件中使用

将数据统一封装成固定的格式，统一注入到组件中，顶部的数据格式为数组，UI为elementUI中的描述列表。

//在template中引入
<PrintForm ref="printFormProcurement" > </PrintForm>//打印按钮printDataList为data中拿到的JSON的动态选择到的数据
<el-col :span="1.5"><el-buttontype="warning"plainicon="el-icon-print"size="mini":disabled="ids.length !== 1"@click="printVisibleDataPatent(printDataList)">打印</el-button>
</el-col>//打印按钮触发函数
// 打印传参函数 row为传入的参数，包括打印所有的JSON数据printVisibleDataPatent(row){const  printFormProcurement = this.$refs.printFormProcurementlet  companyPrint =row[0].deptId_dictText?row[0].deptId_dictText:''let processInstancePrint = row[0].processId?row[0].processId:''let bodyArrayPrint = []if (row[0].detailList) {if (Array.isArray(row[0].detailList)) {bodyArrayPrint = row[0].detailList.map((item, index) => {let arr = []arr.push(index + 1)arr.push(item.goodsname || (item.goodsname === 'undefined'?'':item.goodsname))arr.push(item.goodscode || (item.goodscode === 'undefined'?'':item.goodscode))arr.push(item.goodsspecification || (item.goodsspecification === 'undefined'?'':item.goodsspecification))arr.push(item.goodsnum || (item.goodsnum === 'undefined'?'':item.goodsnum))arr.push(item.itemUnit || (item.itemUnit === 'undefined'?'':item.itemUnit))arr.push(item.perprice || (item.perprice === 'undefined'?'':item.perprice))if(item.goodsnum && item.perprice){arr.push((item.goodsnum * item.perprice).toFixed(2))}else{arr.push(0)}// arr.push(item.price || (item.price === 'undefined'?'':item.price))// arr.push(item.totalPrice || (item.totalPrice === 'undefined'?'':item.totalPrice))// if(this.storages.length){//   console.log(this.storages);// }// arr.push(item.totalPrice || (item.totalPrice === 'undefined'?'':item.totalPrice))return arr})}}let titleArrayPrint = [{label:'请购单号',content:row[0].code?row[0].code:''},{label:'主题',content:row[0].theme_?row[0].theme_:''},{label:'单据日期',content:row[0].bizdate?row[0].bizdate:''},{label:'采购类型',content:row[0].type?selectDictLabel(this.dict.type.procurement_type,row[0].type) :''},{label:'请购人',content:row[0].procurementUser?row[0].procurementUser:''},{label:'币种',content:row[0].currency?selectDictLabel(this.dict.type.currency,row[0].currency):''},{label:'费用类型',content:row[0].costtype?selectDictLabel(this.dict.type.cost_type,row[0].costtype):''},{label:'总费用',content:row[0].totalcost?row[0].totalcost:''},{label:'中心',content:row[0].companyId_dictText?row[0].companyId_dictText:''},{label:'场站',content:row[0].deptId_dictText?row[0].deptId_dictText:''},{label:'付款条件',content:row[0].paymentterm?row[0].paymentterm:''},{label:'最迟送货日期',content:row[0].deadlinedeliverytime? this.parseTime(row[0].deadlinedeliverytime, '{y}-{m}-{d}') :''},{label:'送货地址',content:row[0].deliveryaddress?row[0].deliveryaddress:''},{label:'用途',content:row[0].usage_?row[0].usage_:''},{label:'备注',content:row[0].remark?row[0].remark:''},]let dataTransfer = {titlePrint:'请购单',printDataObject:row,companyPrint,titleArrayPrint,headerArrayPrint:['序号','物料名称','物料编号','规格型号','请购数量','单位','含税单价(元)','总价'],bodyArrayPrint,processInstancePrint,}printFormProcurement.changeVisible(dataTransfer)},

Vue中封装打印组件包括基本信息、表格用途出库单、入库单、请购单等单据相关推荐

vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
vue中实现打印功能的方法与注意事项
vue中实现打印功能的方法与注意事项一.使用方法: 1. 在HTML中 2. 在VUE项目中二.问题总结 1. 设置打印方向 2. 设置打印高度 1. 单张打印 2. 循环打印 3. 获取打印操作 ...
【Web通信】WebSocket详解：WebSocket是什么？如何使用WebSocket？在Vue中封装WebSocket(心跳监测)。nginx配置websocket。
一.WebSocket相关定义 1. WebSocket定义 WebSocket 是一种基于TCP的全双工通信协议,它提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法.数据可以作为" ...
基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
Vue学习笔记：Vue中封装自定义步骤条实现上下一步
Vue中封装自定义步骤条实现上下一步效果图: 如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了: 这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条 ...
微信js扫一扫，扫条形码去掉code_128。在vue中封装全局对象的方法，封装微信js-sdk权限验证的方法
微信公众号在调用扫一扫功能时,一维码(条形码)在直接返回结果时会在结果前带上EAN_8, EAN_13, CODE_25, CODE_39, CODE_128, UPC_A, UPC_E wx.sca ...
vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48 来源:亿速云阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
【华为云技术分享】一行代码就能写一个日志打印组件，你信吗？为你揭晓LiteOS中日志打印组件的核心
1. 做实验引发的思考在学习LiteOS日志打印组件使用的时候,我记录了一篇博客:atiny_log | LiteOS 物联网操作系统中的日志打印组件使用分享,关于实验的具体内容,请阅读这篇博客. ...

Vue中封装打印组件包括基本信息、表格用途出库单、入库单、请购单等单据

一、全局注册组件,在main.js中全局注册组件

二、组件代码

三、在组件中使用

Vue中封装打印组件包括基本信息、表格用途出库单、入库单、请购单等单据相关推荐

最新文章

热门文章