Bootstrap

qrcodejs2+超链接标签批量下载二维码

downloadSelectQrcode() {
      const _this = this;
      if (_this.selectionList.length === 0) {
        _this.$message.warning("请选择至少一条数据");
        return;
      }
      _this
        .$confirm("是否确认下载已选建筑的建筑码?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
        .then(() => {
          _this.selectionList.forEach(row => {
            _this.mutiGenerateQRCodeAndDownload(row);
          });
          this.$refs.crud.toggleSelection();
        });
    },
async mutiGenerateQRCodeAndDownload(row) {
      // 二维码链接
      let url="xxx";
     
      // 文件名称为  编号+昵称
      const qrCodeFileName = `${row.code}${
        row.anotherName ? "-" + row.anotherName : ""
      }`;
      // 创建一个临时DOM元素来承载二维码
      const qrCodeDiv = document.createElement("div");
      qrCodeDiv.style.background=`url(${QRCodeBgIamge})`
      qrCodeDiv.style.position = "relative";
      qrCodeDiv.style.width = "300px";
      qrCodeDiv.style.height = "475px";
      qrCodeDiv.style.display = "flex";
      qrCodeDiv.style.alignItems = "center";
      qrCodeDiv.style.justifyContent = "center";
      qrCodeDiv.style.backgroundSize = "100% 100%";

      const childDiv =document.createElement("div");
      childDiv.style.position = "absolute";
      childDiv.style.top = "190px";
      childDiv.style.left = "70px";
      qrCodeDiv.appendChild(childDiv);
      document.body.appendChild(qrCodeDiv);
      // 使用qrcodejs2生成二维码
      new QRCode(childDiv, {
        text: url,
        width: 160,
        height: 180,
      });
      // 获取canvas对象
      const canvas = await html2canvas(qrCodeDiv);
      if (canvas) {
        // 将canvas转换为DataURL
        const dataURL = canvas.toDataURL("image/png");
        // 创建一个a标签用于下载
        const link = document.createElement("a");
        link.href = dataURL;
        link.download = `${qrCodeFileName}.png`; // 设置下载文件的名称
        link.click(); // 触发下载
        // 清理临时DOM元素
        document.body.removeChild(qrCodeDiv);
      } else {
        console.error("无法找到二维码的canvas元素");
      }
    },

特别需要注意的是,如果不止想把canvas(ps:qrcodejs2挂到一个div标签时会直接在div标签里建一个canvas把二维码画出来)里二维码下载下来,还要加上父亲div的一些图片样式,即使我们不需要它展示出来,但是不能直接设置display="none"或者visibility: hidden,前者会让下载下来的图片直接无法显示(因为html2canvas获取不到元素),后者会让图片一片白,在最后从body里把这个暂时的dom节点remove掉就好了
如果你直确实只要二维码,那可以设置display="none"或者visibility: hidden,因为可以直接操作canvas对象

temDiv.querySelector("canvas");
直接访问canbas对象,这样就可以绕开html2canvas了
;