vue中使用qrcode生成二维码并实现打印功能

问题产生背景：
客户要求根据表格中选中的数据产生对应的二维码并可以利用打印机打印出来

必要条件：vue、需要安装qrcode和vue-print-nb依赖（具体安装可自行百度）

实现思路：

当用户勾选表格行时触发事件，每次数据选中或者取消选中产生对应的二维码或者对应的二维码消失

核心代码

存放二维码取域

<!-- 页面不展示时，必须要在外层套一层div，并且设置样式style="width: 0;height: 0;overflow: hidden" 不然打印功能识别不到 -->
      <div style="width: 0;height: 0;overflow: hidden">
        <div class="qrcode-content" id="printContent">
          <div v-for="(item,index) in this.selectedRows":key="item.id" >
            <!--使用v-print时 设置style="page-break-after:always" 每个div占用一页-->
            <div id="all-info" style="page-break-after:always">
              <div ref='qrcode' class='qrcode'></div>
                <div class="qrcode-info">
                  <i >这里可以用来显示item中的信息</i>
                </div>
              </div>
          </div>
        </div>
      </div>
 <!-- 没有要求打印时可不加 -->
      <div class="msp-detail-operator">
        <a-button v-print="'#printContent'" type="primary" @click="printOut">打印</a-button>
      </div>

**ps：如果用户要求可以看到二维码那么就可以去掉最外层的div，因为这个需求中要求一张纸仅打印一个二维码，如果没有该需求的话可以去掉id为"all-info"的div。打印按钮中只需要利用v-input绑定需要打印出div的id即可
**

生成二维码

      // 生成二维码方法
      qrcode (param,index) {
         var qrcode = new QRCode(this.$refs.qrcode[index], {
            width: 232,  // 设置宽度
            height: 232, // 设置高度
            text: param  //二维码扫描出来后的内容
          })
      },
      //表格行改变时
      onSelectChange(selectedRowKeys, selectedRows) {
        //前面几页已经勾选的数据id集合
        let idArray = [];
        this.selectedRows.forEach((item)=>{
          idArray.push(item.id)
        })

        //判断是否已经点击分页，如果点击过了分页则之后选择的数据以push方法的形式添加
        if (!this.flag){
          this.selectedRows=selectedRows;
        }else{
          selectedRows.forEach((item)=>{
            //判断当前的selectedRows中的数据是否已经存在（同一页中需要判断）
            if (!idArray.includes(item.id)){
              this.selectedRows.push(item)
            }
          })
        }
        //数据选中之后又取消，selectedRows不会更新，需要按照selectedRowKeys中的主键进行过滤判断是否还存在
        let temp = [];
        this.selectedRows.forEach((item)=>{
          if (selectedRowKeys.includes(item.id)){
           temp.push(item)
          }
        })
        this.selectedRows = temp

        //生成二维码
        this.$nextTick(()=>{
          this.selectedRows.forEach((item,index)=>{
            this.$refs.qrcode[index].innerHTML="";
            this.qrcode(item.pbdef4,index)
          })
        })

        this.selectedRowKeys = selectedRowKeys;

      },

ps：这里的UI框架使用的是Ant-Design，onSelectChange绑定的是table的onChange事件；如果是使用的Element UI请自行查找对应的API，但是生成二维码那一块是通用的

如果是只做展示不做打印的话那么至此就可以结束了

如果有要求打印出来的话，那么下面还需要补充一些。
可以看到上方核心代码取域中的打印按钮还添加了一个点击事件，这是为什么呢？
因为qrcode在生成二维码时，不仅只单单生成了一个二维码，它还生成了一个canvas，这样在进行打印的时候会发现生成的二维码并不是我们想要的结果。

那么就需要在打印的时候将canvas移除掉

printOut(){
        this.selectedRows.forEach((item,index)=>{
          //打印时会显示两个二维码，去掉第一个
            var childs = document.getElementsByClassName('qrcode')[index].childNodes;
            console.log(childs)
            if (childs.length == 2){
              document.getElementsByClassName('qrcode')[index].removeChild(childs[0]);
            }
        })
      },

至此，生成二维码并打印已经完毕