简述：

是在Vue中可以实现打印功能的第三方的插件，项目中指定某些区域进行打印时常用该插件，使用起来简单方便

1. 安装

// vue2安装方式
npm install vue-print-nb --save

// vue3安装方式
npm install vue3-print-nb --save

成功效果： 如下图，已经成功安装会出现added xx packages

2. 注册

// vue2注册方式

import Print from 'vue-print-nb'
// Global instruction 
Vue.use(Print);

//or

// Local instruction
import print from 'vue-print-nb'

directives: {
    print   
}
 

// vue3注册方式

// Global instruction 
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

// Local instruction
import print from 'vue3-print-nb'

directives: {
    print   
}

3. 使用

3.1 id方式：

在需要打印的单据内容最外面的div设置唯一的id，在打印弹框里的打印按钮设置自定义属性v-print，该属性值为打印单据div的唯一id

示例：

 <div id="printArea"> 需要打印内容</div>

 <el-button type="primary" v-print="'#printArea'">打 印</el-button>

3.2 对象配置方式：

在js中定义一个对象，对象中可配置打印区域相关属性，在需要打印的内容最外面的div设置唯一的id，id值为js对象中的id值，在打印弹框里的打印按钮设置自定义属性v-print，该属性值为打印区域的对象

<div id="printInfo">打印的内容</div>
<el-button size="small" type="primary" v-print="printInfoObj">打印</el-button>     
 
 // 打印区域配置对象
printInfoObj:{
		id:"printInfo",
		popTitle:"租赁合同",
		preview:false,  // 是否开启预览
		beforeOpenCallback:()=>{
		 console.log('开始打印之前的callback')
		}
},

插件npm地址：https://www.npmjs.com/package/vue-print-nb

4. 其他需求

• 打印时隐藏某些区域：

在页面中显示所有内容，但是在打印的时候指定区域需要隐藏，不打印

 <div id="printArea"> 
  	<div>打印显示区域</div>
    <div class='hiddenDiv'>打印隐藏区域</div>
 </div>

 <el-button type="primary" v-print="'#printArea'">打 印</el-button>
 <style lang="less">
 	@media print{
 		.hiddenDiv{
 			display:none;
 		}
 	}
 </style>

效果图：

• 打印多个表：

在页面中显示多个表单，但是打印时要将多个表单分开

 <div id="printArea"> 
  	<div style='page-break-after:always'>第一个表内容</div>
    <div style='page-break-after:always'>第二个表内容</div>
 </div>

 <el-button type="primary" v-print="'#printArea'">打 印</el-button>

效果图：