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="item in dataList" :key="item.id" class="itemDiv">
            <div>
                <div id="qrcode" class="qrcode" ref="codeItem">1111111</div>
            </div>
        </div>

2.2、方法调用

错误调用：
    mounted() {
        console.log(11111111)
        this.dataList.forEach((element, index) => {
            this.creatQrCode();//生成二维码的方法，方法逻辑都大同小异不展示了，就
            					//是把方法体内的循环提到mounted内，去循环调用函数。
        })
    },
    
	尽可能的是在调用一次函数，循环写在函数方法体内，不要循环调用函数，个人分析有可 
	能页面没有挂载完成，已经开始循环了，虽然函数内已经写了this.$nextTick,也会有
    问题，并且 实际生成页面的效果也是少生成了，一个二维码 

  正确示范：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 //容错率，L/M/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')[index].childNodes;
            document.getElementsByClassName('qrcode')[index].removeChild(childs[0]);
          });                          
        },500)
      },