生成二维码并以图片格式下载-qrcodejs2

1、安装qrcodejs2

 npm install  qrcodejs2 --save

2、在需要的页面引入

import QRCode from "qrcodejs2";

3、页面中使用

<div id="qrcode" ref="qrcode" ></div>

4、methods中使用

1）只是生成显示

createQrcode(){
  // //把url生成二维码
      let qrcode = new QRCode("qrcode", {
        width: 200,
        height: 200,
        // text: url,
      });
      qrcode.clear(); //清除二维码
      qrcode.makeCode(url); //生成新二维码  
}

调用方法后会在div中显示

2）不用显示，直接生成下载

<div id="qrcode" ref="qrcode" hidden></div>

  <el-button type="text" @click="downloadImage(url, '二维码'">

    下载二维码图片

  </el-button>

downloadImage(url, name) {
      // //把url生成二维码
      let qrcode = new QRCode("qrcode", {
        width: 200,
        height: 200,
        // text: url,
      });
      qrcode.clear(); //清除二维码
      qrcode.makeCode(url); //生成新二维码

      let myCanvas = document
        .getElementById("qrcode")
        .getElementsByTagName("canvas");
      let a = document.createElement("a");
      a.href = myCanvas[0].toDataURL("image/png");
      a.download = name;
      a.click();
    },