QRCode 实现绘制二维码

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

实现：

一 安装：

npm i qrcodejs2

二 引入：

import QRCode from 'qrcodejs2'

点击下载
    
    

      

      

    

// 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