利用qrcodejs2生成二维码并且利用html2canvas下载二维码

import QRCode from "qrcodejs2";
import html2canvas from "html2canvas"

首先项目中安装依赖   qrcodejs2 和html2canvas 并引入   我没有写安装依赖

页面

<div class="item_code" id="qrcode" xss=removed>

 js部分

        setTimeout(() => {
            let shareUrl = res.data;  //这里是要生成的内容
            document.getElementById("qrcode").innerHTML = "";  //这里是清空上一次生成的二维码
            let qrcode = new QRCode("qrcode", {
              text: shareUrl,
              width: 300, //图像宽度
              height: 300, //图像高度
            });
            qrcode.clear(); //清除二维码
            qrcode.makeCode(shareUrl); //生成另一个新的二维码
          }, 500);

 

下载

 downloadFile(content, fileName) {
        下面设置页面从0开始生成 不然是半截图
        window.pageYoffset = 0;
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
        html2canvas(document.getElementById('qrcode'),{
           backgroundColor: null,
        },{ scale: 1 }).then(canvas => {
          let dataURL = canvas.toDataURL("image/png");
          if (dataURL !== "") {
            var aLink = document.createElement('a')
            let timestamp=new Date().getTime();
            let n = Math.round(Math.random()*9999999);
            aLink.download = timestamp+'_'+n;
            aLink.href = dataURL;
            aLink.click()
          }
        });
        return;
    },