QRCode 实现绘制二维码

需求：vue+element项目中实现点击按钮下载两张二维码。

实现：

一 安装：

npm i qrcodejs2

二 引入：

import QRCode from 'qrcodejs2'

<el-button @click="downQrCode()" style='border-radius: 4px' size="mini">点击下载</el-button>
    <!-- 隐藏两张二维码-->
    <div v-show="false">
      <div class="q_r_img"></div>
      <div class="q_r_img"></div>
    </div>

// mounted 中调用生成二维码的方法（因为此时页面中的dom结构已经生成）
mounted(){
 this.getQrCode();
} 
methods:{
        // 生成两张二维码
        getQrCode(){
          var qrCodes = document.getElementsByClassName("q_r_img");
          for (let i = 0; i < qrCodes.length; i++) {
            qrCodes[i].innerHTML = this.id+'-'+Number(i+1);
            var innerHTML = qrCodes[i].innerHTML;// 二维码的内容 3-1 3-2
            let code = new QRCode(qrCodes[i], {
              width: 300,
              height:300,
              colorDark : '#000000',
              colorLight : '#ffffff',
              correctLevel : QRCode.CorrectLevel.L
            });
            code.makeCode(innerHTML);
          }
        },
        // 下载二维码
        downQrCode(){
          var oQrcode = document.getElementsByTagName("img");
          let url=''
          for(let i=0;i<oQrcode.length;i++){
             url = oQrcode[i].src;
            var a = document.createElement('a');
            var event = new MouseEvent('click');
            a.download=this.H_name+'-'+Number(i+1);
            a.href = url;
            a.dispatchEvent(event)
          }
 
        },
}