vue实现连接打印机功能

1.安装依赖

npm i vue-print-nb

2.挂载依赖

Vue.use(Print) 

3.包装元素

<!-- 需要给外层包裹元素ref，在点击打印阶段需要使用ref获取打印元素，需要指定id用于捆绑触发打印的按钮 -->
<div ref="printTest" id="printTest">
	需要打印的数据
</div>

4.创建打印按钮

<!-- v-print指令可以直接绑定到对应的打印区域-->
<el-button v-print="'#printTest'" type="primary" size="mini">打印</el-button>

//v-print除了绑定对应打印区域的id外，还可以绑定一个配置对象。
printObj: {
  id: "printTest", //绑定打印区域的id
  popTitle: "抄单打印", //内容标签，可以设计页眉
  //调用打印工具前的回调函数
  beforeOpenCallback(vue) {
    vue.printLoading = true;
    console.log("打开之前");
  },
  //调用打印工具成功回调函数
  openCallback(vue) {
    vue.printLoading = false;
    console.log("执行了打印");
  },
  //关闭打印机的回调
  closeCallback(vue) {
    console.log("关闭了打印工具");
  },
},

官网参考

5.批量打印分页

在我们需要进行选中多条数据进行打印时，肯定需要将每条数据进行分页处理，一条数据可以打印出多页，但是第二天数据应该在新的一页进行打印而不是紧挨着上一条在同一页进行打印。使用<p style="page-break-after:always;"></p>置于打印数据底部就行！