前端实现带二维码的工厂物料标签，发票生成以及打印（vue框架），以及监听浏览器打印事件的钩子函数

首先用一个变量来存放后台传过来的票据的数据，我们就用allPrintData来存放，然后在模板中，创建一个新的dom节点

<div id='printArea'></div>

二维码的生成
安装二维码生成插件

npm install QRCode --save

在组件中使用import QRCode from 'qrcode'

使用方法

qrcode(val) {
    
      let qrcode = new QRCode("qrcode", {
   //qrcode参数为插入二维码的dom节点的ID
        width: 75,
        height: 75,
        text: val, // 二维码地址
        colorDark: "#000",
        colorLight: "#fff"
      });
    },

具体思路
用字符串拼出一个html网页，将数据进行循环，一次插入网页中，最后用window.print()的方法打印这个网页，在每个插入的票据的div中添加样式page-break-after:always，强制插入分页符，就可以实现批量打印了。

doPrint(data) {
   
      let html = "";
      data.forEach((item, index) => {
   
        html +=
          '<div class="box" style="page-break-after:always;display: flex; padding-top:5px;padding-left:10px" ><div class="left">';
        html +=
          '<div><label class="control-label" id="supplierName" style="font-style:normal;">供应商名称:</label>';
        html +=
          ' <em id="supplierName" style="font-style:normal;word-break:break-all "&g