批量下载二维码（前端操作）

先下载插件

npm install qrcodejs2-fix

npm install tml2canvas

npm install qrcodejs2-fix

npm install jszip

npm install file-saver

<template>
  <el-button
    type="primary"
    plain
    @click="handleConfirm"
    :disabled="data.length == 0"
    >批量下载二维码
  </el-button>
  <!-- 必须存在的dom 生成的二维码通过这种方式隐藏 -->
  <div
    id="qrid"
    :style="{ 'margin-top': '-99999999999999999px', position: 'fixed' }"
  ></div>
</template>

<script setup lang="ts">
import QRcode from "qrcodejs2-fix";
import html2canvas from "html2canvas";
import JSZip from "jszip";
import FileSaver from "file-saver";
import { ElLoading } from "element-plus";
const props: any = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },

  width: {
    type: Number,
    default: 1000,
  },

  height: {
    type: Number,
    default: 1000,
  },
});

const handleConfirm = async () => {
  const fullscreenLoading = ElLoading.service({
    lock: true,
    text: "正在处理中，请耐心等待……",
    background: "rgba(0, 0, 0, 0.7)",
  });
  let QRcodeArr: any = [];
  let qridElement: any = document.querySelector("#qrid");
  qridElement.innerHTML = "";
  for (const itemIterator of props.data) {
    let newDivElement: any = document.createElement("div");
    newDivElement.style.padding = "140px";
    newDivElement.innerHTML = `<h1 style='font-size: 42px; text-align: center;margin-bottom:20px'>${itemIterator.name}</h1>`;
    new QRcode(newDivElement, {
      text: itemIterator.url, //二维码内容
      width: props.width,
      height: props.height,
      render: "table",
      colorDark: "#333333", //二维码颜色
      colorLight: "#ffffff", //二维码背景色
      correctLevel: QRcode.CorrectLevel.H,
    });
    qridElement.appendChild(newDivElement);
    // 创建画布放二维码，方便下载
    let canvas: any = document.createElement("canvas"),
      scale = 1;
    canvas.width = props.width + 280;
    canvas.height = props.height + 280;
    canvas.getContext("2d").scale(scale, scale);
    let opts = {
      canvas: canvas,
      logging: false,
      width: props.width + 280,
      height: props.height + 280,
      useCORS: true,
      allowTaint: true, //允许跨域图片
      scale: 1, // 处理模糊问题
      dpi: 300, // 处理模糊问题
      background: "#ffffff",
    };
    // 生成二维码图片
    await html2canvas(newDivElement, opts)
      .then((canvas) => {
        const qrContentImage = canvas.toDataURL("image/png", 1.0); // 生成的图片
        QRcodeArr.push({
          ...itemIterator,
          imgurl: qrContentImage,
        });
      })
      .catch(function (reason) {
        console.log(reason);
      });
    //下载文件
  }
  qridElement.innerHTML = "";
  //创建压缩对象
  var zip = new JSZip();

  for (const QRcodeIterator of QRcodeArr) {
    zip.file(
      `${QRcodeIterator.name}.png`,
      QRcodeIterator.imgurl.replace(/^data:image\/(png|jpg);base64,/, ""),
      { base64: true }
    ); //第一个参数是图片名字和后缀
  }

  //下载压缩包
  zip.generateAsync({ type: "blob" }).then(function (content: any) {
    fullscreenLoading.close();
    FileSaver(content, "付费娱乐批量二维码.zip");
  });
};
</script>