vue+qrcode批量生成二维码

       最近客户提了个需求，要求打印的每条账单上都要有二维码，本来应该由前端的同志来实现的，但是我们前端的同事跟我说：“二维码放在循环体中的生成不了，你直接生成一张图片，我放上去遍历”，我这一听，还就不信邪了，这么合理的需求怎么可能实现不出来呢。

       通过一顿咔咔咔操作，总算把二维码给生成上去了，虽然也算是一波三折了，还是值得记录下成果滴。

 接下来我们进入正文：

1、qrcode引入

1.1、安装qrcodejs2

npm install --save qrcodejs2

1.2、在需要使用的页面 import

import QRCode from 'qrcodejs2'

2、调用生成二维码

2.1、批量循环生成二维码，二维码位置div

 
<div v-for="(v,i) in dataList" :key="i">
     <div class="qrcode-pic" ref="codeItem" ></div>
 </div>

2.2、方法调用

 methods: {
   getData(){
      this.dataList = [];//设置需要的数据
      this.bindQRCode(); //组装完数据后调用生成二维码的方法
   }
}

批量循环生成二维码的方法，需等页面加载完成在进行二维码的生成，放在this.$nextTick（）方法中

      bindQRCode: function () {
        this.$nextTick(() => { 
          this.dataList.forEach((item,index)=>{
            this.$refs.codeItem[index].innerHTML="";
              var qrcode = new QRCode(this.$refs.codeItem[index], {
                text: 'https://www.baidu.com/', //二维码内容
                width: 60,
                height: 60,
                render: 'table',
                colorDark: "#333333", //二维码颜色
                colorLight: "#ffffff", //二维码背景色
                correctLevel : QRCode.CorrectLevel.H
              })
          });                          
        },500)
      }, 

2.3、批量生成完成效果

如果不需要打印，那恭喜你，二维码已经批量生成完成!!!

3、打印

3.1、打印结果

从下图中可以看到：在进行打印时，发现出现了多个重叠的二维码:

通过排查发现，qrcode在绘制二维码时，是先在画布上进行绘制，并且由display：none属性控制不展示，但是在打印时，会出现两个一样的二维码

3.2、解决方案：

在生成二维码以后删除掉，标签元素，调整完的代码如下

      bindQRCode: function () {
        this.$nextTick(() => { 
          this.dataList.forEach((item,index)=>{
            this.$refs.codeItem[index].innerHTML="";
              var qrcode = new QRCode(this.$refs.codeItem[index], {
                text: 'https://www.baidu.com/', //二维码内容
                width: 60,
                height: 60,
                render: 'table',
                colorDark: "#333333", //二维码颜色
                colorLight: "#ffffff", //二维码背景色
                correctLevel : QRCode.CorrectLevel.H
              })
            var childs = document.getElementsByClassName('qrcode-pic')[index].childNodes;
            document.getElementsByClassName('qrcode-pic')[index].removeChild(childs[0]);
          });                          
        },500)
      }, 

通过此方式，解决了打印二维码时出现重复的问题，有更好的想法或者更合适的方案，欢迎留言！！！