1、安装vue-print-nb依赖
（1）vue2安装方式
npm install vue-print-nb --save
（2）vue3安装方式
npm install vue3-print-nb --save
2、在main.js中全局注册
（1）vue2注册方式
import Print from 'vue-print-nb'
Vue.use(Print)
（2）vue3注册方式
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')
3、基础使用案例
（1）设置打印区域id和打印按钮自定义属性
① id方式——在需要打印的单据内容最外面的div设置唯一的id，在打印弹框里的打印按钮设置自定义属性v-print，该属性值为打印单据div的唯一id
print1.png
② 对象配置方式——在js中定义一个对象，对象中可配置打印区域相关属性，在需要打印的单据内容最外面的div设置唯一的id，id值为js对象中的id值，在打印弹框里的打印按钮设置自定义属性v-print，该属性值为打印区域的对象
print3.png
（2）打印预览和设置
点击打印按钮，就会弹出打印预览和设置的弹框，在设置区域可以选择打印机、可以选择打印布局（横向、纵向）、打印纸张尺寸、边距和页眉页脚等
print2.png
4、其他需求
（1）打印隐藏内容
在打印弹框中需求显示查看的内容，但是在打印的时候需要隐藏，不打印显示
print4.png
（2）打印单据有2个以上，打印时需要自动分页打印
在一个打印弹框中显示所有的打印单据，但在打印时需要自动分页打印
有多个单据时，可以循环展示，在单据内容的最外层的div设置样式page-break-after:always，即可在打印时自动分页
print5.png
print6.png
print7.png
5、打印功能完整代码(安装好包，导入包后，可直接复制粘贴使用)
<template>
<div class="index-box">
<el-button type="primary" @click="print">打印</el-button>
<el-dialog
title=""
:visible.sync="dialogVisible"
width="30%">
<div id="printView">
<div style="page-break-after:always">
<h2 style="font-size: 22px;font-weight: bold;text-align: center;margin: 0;line-height: 122px;">采购单1</h2>
<div style="padding-bottom: 7px;">
<div style="display: inline-block;text-align: left;font-size: 18px;width: 33%;">
姓名：张三
</div>
<div style="display: inline-block;text-align: center;font-size: 18px;width: 33%;">
部门：软件研发部
</div>
<div style="display: inline-block;text-align: right;font-size: 18px;width: 33%;">
职务：前端开发工程师
</div>
</div>
<div style="padding-top: 10px;">
<table
border="1px solid #ccc"
cellspacing="0"
cellpadding="0"
style="width: 100%;"
>
<thead>
<tr>
<th style="padding: 4px;font-weight: normal;font-size: 18px;">
名称
</th>
<th style="padding: 4px;font-weight: normal;font-size: 18px;">
数量
</th>
<th style="padding: 4px;font-weight: normal;font-size: 18px;">
金额
</th>
<th style="padding: 4px;font-weight: normal;font-size: 18px;">
备注
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 4px;font-weight: normal;font-size: 18px;">
显示屏
</td>
<td style="padding: 4px;font-weight: normal;font-size: 18px;">
1台
</td>
<td style="padding: 4px;font-weight: normal;font-size: 18px;">
700
</td>
<td style="padding: 4px;font-weight: normal;font-size: 18px;">
下周一前需要使用
</td>
</tr>
</tbody>
</table>
</div>
<div style="padding-top: 40px;">
<div
style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
>
<span
style="display: inline-block;vertical-align: top;width: 100px;"
>
申请人：
</span>
<span
style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
></span>
</div>
<div
style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
>
<span
style="display: inline-block;vertical-align: top;width: 100px;"
>
审批人：
</span>
<span
style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
></span>
</div>
<div
style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
>
<span
style="display: inline-block;vertical-align: top;width: 100px;"
>
采购员：
</span>
<span
style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
></span>
</div>
</div>
<div class="hidden">打印区域不需要打印的内容</div>
</div>
<div style="page-break-after:always">
<h2 style="font-size: 22px;font-weight: bold;text-align: center;margin: 0;line-height: 122px;">采购单2</h2>
<div style="padding-bottom: 7px;">
<div style="display: inline-block;text-align: left;font-size: 18px;width: 33%;">
姓名：张三
</div>
<div style="display: inline-block;text-align: center;font-size: 18px;width: 33%;">
部门：软件研发部
</div>
<div style="display: inline-block;text-align: right;font-size: 18px;width: 33%;">
职务：前端开发工程师
</div>
</div>
<div style="padding-top: 10px;">
<table
border="1px solid #ccc"
cellspacing="0"
cellpadding="0"
style="width: 100%;"
>
<thead>
<tr>
<th style="padding: 4px;font-weight: normal;font-size: 18px;">
名称
</th>
<th style="padding: 4px;font-weight: normal;font-size: 18px;">
数量
</th>
<th style="padding: 4px;font-weight: normal;font-size: 18px;">
金额
</th>
<th style="padding: 4px;font-weight: normal;font-size: 18px;">
备注
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 4px;font-weight: normal;font-size: 18px;">
显示屏
</td>
<td style="padding: 4px;font-weight: normal;font-size: 18px;">
1台
</td>
<td style="padding: 4px;font-weight: normal;font-size: 18px;">
700
</td>
<td style="padding: 4px;font-weight: normal;font-size: 18px;">
下周一前需要使用
</td>
</tr>
</tbody>
</table>
</div>
<div style="padding-top: 40px;">
<div
style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
>
<span
style="display: inline-block;vertical-align: top;width: 100px;"
>
申请人：
</span>
<span
style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
></span>
</div>
<div
style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
>
<span
style="display: inline-block;vertical-align: top;width: 100px;"
>
审批人：
</span>
<span
style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
></span>
</div>
<div
style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
>
<span
style="display: inline-block;vertical-align: top;width: 100px;"
>
采购员：
</span>
<span
style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
></span>
</div>
</div>
<div class="hidden">打印区域不需要打印的内容</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<!-- <el-button v-print="'#printView'" type="primary">打 印</el-button> -->
<el-button v-print="printViewInfo" type="primary">打 印</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
dialogVisible: false,
msg: "打印",
printViewInfo: {
id: "printView", //打印区域的唯一的id属性
popTitle: '配置页眉标题', // 页眉文字 （不设置时显示undifined）（页眉页脚可以在打印页面的更多设置的选项中取消勾选）
extraHead: '打印，印刷', // 最左上方的头部文字，附加在head标签上的额外标签，使用逗号分割
preview: false, // 是否启动预览模式，默认是false （开启预览模式ture会占满整个屏幕，不建议开启，除非业务需要）
previewTitle: '预览的标题', // 打印预览的标题(预览模式preview为true时才显示)
previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印(预览模式preview为true时才显示)
zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
previewBeforeOpenCallback (that) { console.log('正在加载预览窗口！'); console.log(that.msg, this) }, // 预览窗口打开之前的callback (预览模式preview为true时才执行) （that可以取到data里的变量值）
previewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback (预览模式preview为true时才执行)
beforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callback
openCallback () { console.log('执行打印了！') }, // 调用打印时的callback
closeCallback () { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
clickMounted () { console.log('点击v-print绑定的按钮了！') },
// url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
// asyncUrl (reslove) {
// setTimeout(() => {
// reslove('http://localhost:8080/')
// }, 2000)
// },
standard: '',
extarCss: ''
}
}
},
computed:{},
created () {},
mounted () {},
methods: {
print() {
this.dialogVisible = true
}
}
}
</script>
<style lang="less">
@media print {
.hidden{
display: none;
}
}
</style>
注意！！！
1、element-ui 组件在打印时会样式崩塌，所以在打印区域div中最好不要使用element-ui 组件，直接使用原生组件样式；
2、打印区域样式最好使用内联样式，或者先加载样式再加载组件，否则样式会崩塌。
