vue中使用qrcode动态生成二维码并下载，并解决多次生成二维码的问题

vue页面

npm

npm install qrcodejs2

import

在所需页面导入
import QRCode from ‘qrcodejs2’

use

生成二维码

qrcode (url) {  
      // 一定要加上document.getElementById("qrcode").innerHTML = "";，否则每点击一次按钮就会多一个二维码
      document.getElementById("qrcode").innerHTML = "";
      let qrcode = new QRCode('qrcode', {                          
        width: 100, // 二维码宽度，单位像素                         
        height: 100, // 二维码高度，单位像素                          
        text: url // 生成二维码的链接               
      });   
    },

在mounted函数中执行，加上

 this.$nextTick(() => {
     that.qrcode(url)
})

点击下载二维码

	// 点击下载app二维码
    downloadAppCodeImg (name) {
      var canvasData = this.$refs.qrcode.getElementsByTagName('canvas')
      var a = document.createElement("a");
      var event = new MouseEvent("click"); // 创建一个单击事件
      a.href = canvasData[0].toDataURL("image/png");;
      a.download = "drcQrcode";
      a.dispatchEvent(event); // 触发a的单击事件
    },