一、安装插件
1、npm install vue-print-nb --save
二、引入Vue项目
在main.js中添加-- 全局挂载 import Print from 'vue-print-nb' Vue.use(Print)三、前端代码
一、操作项中的打印按钮<!-- 打印内容 --> <itemPrint :itemData="showPrinterParams.itemData" :showPrinterDialogClick="showPrinterParams.showPrinterDialogClick"></itemPrint> 三、参数定义 showPrinterParams: { itemData: {}, showPrinterDialogClick: '' }, 四、 打开打印页面 showPrinterDialog(row) { this.showPrinterParams.itemData = row this.showPrinterParams.showPrinterDialogClick = Math.random() + '' } 五、引入打印组件 import itemPrint from '@/views/lawcase/task_manager/task_transfer/item_transfer_print' components: { itemPrint },
<span title="打印"> <svg-icon icon-class="printer" class="svgicon" @click="showPrinterDialog(scope.row)" /> </span>
二、打印组件
四、打印页面代码
<template> <el-dialog width="60%" :visible.sync="visible" > <div id="print-tag" > <!--标题 --> <h2 class="title"> 流转通知单</h2> <div class="timeShow"> 通知时间:<span class="space"> 年 月 日 </span> </div> <div class="printCls"> <div class="tableCls"> <div> <div><span>原案件名称/编号</span> <span> {{ printData.original }} </span></div> <div><span>原移交单位</span> <span> {{printData.orgName}} </span></div> <div><span>流转去向</span> <span class="right-none"> {{printData.targetOrg}}</span></div> </div> <div> <div><span>现案件名称/编号</span> <span>{{printData.caseInfo}}</span></div> <div><span>流转方式</span> <span style="text-decoration:underline">随案移交 </span></div> <div><span>流转时间</span> <span class="right-none">{{printData.changeTime}}</span></div> </div> <div> <div><span ><span class="itemTop">物品名称:{{printData.itemName}}</span></span> <span> <span class="itemTop">合计数量:{{printData.itemNum}}</span></span></div> <div><span>特征备注</span><span class="right-none"></span></div> <div><span class="right-none"></span> <span class="right-none"></span></div> </div> <div> <div><span>移交人</span> <span></span></div> <div><span>移交时间</span> <span></span></div> <div><span>联系电话</span> <span class="right-none"></span></div> </div> <div> <div><span>接收人</span> <span></span></div> <div><span>接收时间</span> <span></span></div> <div><span>联系电话</span> <span class="right-none"></span></div> </div> <div> <div><span class="vertical"><span class="itemTop">保管单位:</span></span> <span>负责人:</span></div> <div><span class="vertical">首次入库时间</span><span class="vertical"></span> </div> <div><span class="vertical">联系电话</span><span class="right-none"></span></div> </div> <div> <div><span class="vertical"></span> <span class="bottom-none">经手人:</span></div> <div><span class="vertical"></span><span class="vertical"></span> </div> <div><span class="vertical"></span><span class="right-bottom-none"></span></div> </div> </div> </div> <div class="printBottom">此通知单一式三份</div> </div> <div slot="footer"> <el-button @click="handleCancel"> 关闭 </el-button> <el-button type="primary" @click="handlePrint" v-print="printContent"> 打印 </el-button> </div> </el-dialog> </template> <script> export default { props: { itemData: { type: Object, default: {} }, showPrinterDialogClick: { type: String, default: '' }, }, watch: { // 点击父组件储位时,显示选择储位 showPrinterDialogClick(val) { this.visible = true }, itemData(val) { this.printData = val let name = val.originalName; if(name !=null){ // 原案件名称/编号 this.printData.original =val.originalName+"/"+val.originalCode // 原单位 this.printData.orgName = this.getDeptName(val.originalOrg) // 流转去向 this.printData.targetOrg =this.getDeptName(val.orgUuid) // 案件名称/编号 this.printData.caseInfo = val.caseName+"/"+val.caseCode this.printData.changeTime = this.$publicjs.fullDate(val.changeTime) }else{ this.printData.original =val.caseName+"/"+val.caseCode // 原单位 this.printData.orgName = this.getDeptName(val.orgUuid) } } }, data() { return { visible:false, showTreeDialog: false, printData: {}, printContent: { id: 'print-tag', // preview: true, // 预览工具是否启用 // previewTitle: '储能服务费结算单', // 预览页面的标题 popTitle: '通知单', // 打印页面的页眉 extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css", extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>', previewBeforeOpenCallback() {}, previewOpenCallback() {}, beforeOpenCallback(vue) { vue.printLoading= true; }, openCallback(vue) { vue.printLoading=false }, closeCallback() {}, clickMounted(vue) {} }, } }, methods: { handlePrint(){ }, // 关闭 handleCancel(){ this.visible = false; }, // 根据组织编号得到组织名称 getDeptName(id) { return this.$publicjs.getDeptName(id); }, } } </script> <style lang="less" scoped> .title{ text-align:center; margin-bottom:5px; } .timeShow{ margin-left:10px; } // 年月日的空格 .space{ word-spacing:40px; } .itemTop{ margin-left:-20px; } .printCls{ border:1px solid #999; } .tableCls{ & > div{ display:flex; & > div{ flex: 1; display: flex; & > span { flex:1; padding:25px; border: 1px solid #999; border-top:none; border-left: none; } .right-none{ border-right: none; } .right-bottom-none{ border-right: none; border-bottom: none; } .bottom-none{ border-bottom: none; } .style-none{ border-right: none; border-left: none; } .vertical{ border-top:none; border-bottom: none; } } } } .printBottom{ text-align:center; margin-top:10px; } </style>
六、结果展示
标签:none,vue,val,bottom,border,nb,print,printData From: https://www.cnblogs.com/flyShare/p/18085561