之前写过好多关于打印的功能，通过window+print组合键来实现打印。
今天遇到一个需求，就是使用vue插件来实现打印功能。
最终效果图如下：
下面介绍解决步骤：
解决步骤1：安装vue-print-nb插件——npm install vue-print-nb --save
"vue-print-nb": "^1.7.5",
通过npm install vue-print-nb --save可以安装vue2版本的打印插件，如果是vue3则需要通过npm install vue3-print-nb --save来安装。
安装完成后，在package.json文件中查看到"vue-print-nb": "^1.7.5",
解决步骤2：全局引入或者局部引入——我这边是局部引入
vue2的引入方式：
// 1. 全局挂载
import Print from 'vue-print-nb'
Vue.use(Print)
// or
// 2. 自定义指令
import print from 'vue-print-nb'
directives: {
print
}
vue3的引入方式：
// 1. 全局挂载
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')
// or
// 2. 自定义指令
import print from 'vue3-print-nb'
directives: {
print
}
解决步骤3：页面给打印按钮添加打印功能
我这边的打印弹窗是一个组件，点击打印按钮，显示弹窗。
引入组件：
import repairCardPrint from './modules/repairCardPrint';
组件注册：
components: { repairCardPrint },
页面使用组件：
<repairCardPrint ref="repairCardPrintRef"></repairCardPrint>
handlePrint(row) {
this.$refs.repairCardPrintRef.handleShow({ ...row });
},
解决步骤4：弹窗打印
<template>
<a-modal
:width="800"
title="打印返检通知单"
:visible="visible"
@cancel="handleCancel"
:footer="null"
>
<a-spin :spinning="spinning">
<div id="print-tag" class="printCls">
<div class="printTit">
<img src="@/assets/img/jiepei.png" alt="" />
<div style="text-align: center">
<h1>江西捷配电子科技有限公司</h1>
<h3>返检通知单</h3>
</div>
</div>
<div style="text-align: right; padding-right: 10px">
日期：
<span>2021-09-09</span>
</div>
<div class="tableCls">
<div>
<div><span>返检品型号</span><span>112341234123</span></div>
<div><span>返检品类型</span><span>112341234123</span></div>
<div><span>退货品□</span><span>库存品☑</span></div>
</div>
<div>
<div><span>返检品数量</span><span>112341234123</span></div>
<div><span>返检原因</span><span>112341234123</span></div>
<div><span>客户投诉□</span><span>客户退货☑</span></div>
</div>
<div class="textareaWrap">
<div>客户投诉内容/退货原因描述：</div>
<div class="textareaCls"></div>
</div>
<div>
<div><span>品保确认</span><span>112341234123</span></div>
<div><span>计划确认</span><span>112341234123</span></div>
<div><span>工艺确认</span><span>1234123</span></div>
</div>
<div class="textareaWrap">
<div>正式返工方法/流程（FQC填写最终返工合格数量）</div>
<div class="textareaCls">22221</div>
</div>
<div>
<div><span>发料人</span><span>112341234123</span></div>
<div><span>收料人</span><span>112341234123</span></div>
<div><span>FQC主管</span><span>1234123</span></div>
</div>
<div>
<div><span>入库人</span><span>112341234123</span></div>
<div><span>包装人</span><span>112341234123</span></div>
<div><span>FQA主管</span><span>1234123</span></div>
</div>
<div class="printBottom">
<div>表单编号：11234-1234-134-1324 版本：1324</div>
<div>
<div>注：</div>
<div>
<div>
1.此返工单由品质主管开出，经品质/生产经理审核，交由FQC主管签名后自行提仓；
</div>
<div>2.此单一式三份，白色FQC、红色品质部、黄色仓库</div>
</div>
</div>
</div>
</div>
</div>
</a-spin>
<a-space slot="footer">
<a-button type="primary" ghost @click="handleCancel">关闭</a-button>
<a-button type="primary" @click="handleOk" v-print="printContent"
>打印</a-button
>
</a-space>
</a-modal>
</template>
<script>
import print from 'vue-print-nb';
const columns = [
{
title: '序号',
customRender: (text, record, index) => `${index + 1}`,
width: 70,
},
{
title: '工序名称',
dataIndex: 'name',
},
];
export default {
name: 'repairCardPrint',
directives: { print },
data() {
return {
spinning: false,
visible: false,
id: undefined,
pickingForm: {},
columns,
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: {
handleOk() {
//
},
handleShow(info) {
this.visible = true;
this.pickingForm = { ...info };
if (info.id) {
this.id = info.id;
}
},
handleCancel() {
this.visible = false;
this.spinning = false;
},
},
};
</script>
<style lang="less" scoped>
.printCls {
border: 1px solid #999;
& > div.printTit {
display: flex;
padding: 10px;
justify-content: center;
align-items: flex-start;
img {
width: 40px;
object-fit: contain;
margin-right: 10px;
}
h1 {
font-size: 22px;
}
h1,
h3 {
margin-bottom: 0;
}
}
.tableCls {
border-top: 1px solid #999;
& > div {
display: flex;
align-items: center;
&.textareaWrap {
padding: 6px;
flex-direction: column;
align-items: flex-start;
}
& > div.textareaCls {
min-height: 120px;
flex: 1;
}
& > div {
flex: 1;
display: flex;
align-items: center;
& > span {
flex: 1;
padding: 6px;
border: 1px solid #999;
// border-right: none;
border-left: none;
}
}
&.printBottom {
display: flex;
flex-direction: column;
align-items: flex-start;
& > div {
display: flex;
align-items: flex-start;
}
}
}
}
}
</style>
完成！！！多多积累，多多收获！！！
