vue2 vue-print-nb
一、安装插件
1、npm install vue-print-nb --save
二、引入Vue项目
在main.js中添加-- 全局挂载
import Print from 'vue-print-nb'
Vue.use(Print)
三、前端代码
一、操作项中的打印按钮
<span title="打印"> <svg-icon icon-class="printer" class="svgicon" @click="showPrinterDialog(scope.row)" /> </span>
二、打印组件
<!-- 打印内容 -->
<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
},
四、打印页面代码
<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>
六、结果展示
