vue 批量生成多个二维码图片并下载成压缩文件

需求背景：根据table中的数据，下载对应的二维码，并需在二维码下方添加编号和地址。实现效果如下图↓

需先使用qrcodejs2插件生成二维码，后使用html2canvas插件对页面指定区域进行图片生成，并通过JSZip和FileSaver插件对生成的图片进行压缩并导出成压缩文件格式！

<template>    
   <div ref="html2canvasRef">
        <div id="qrCode"></div> 
        <div>{{msgInfo.num}}</div> 
        <div>{{msgInfo.address}}</div> 
    </div>
</template> 

<script>
import QRCode from "qrcodejs2"; //生成二维码
import html2canvas from "html2canvas"; //生成图片
import JSZip from "jszip"; //文件压缩
import FileSaver from "file-saver"; //导出文件
export default{
   data() {
    return {
      dataList: [ //需生成的数据,
           {
             id:1,
             num:'GZ000000003',
             address:'名称超级无敌长的地址无敌长的地址'
           },
           {
             id:2,
             num:'GZ000000004',
             address:'名称超级无敌长的地址无敌长的地址'
           }
      ]
      msgInfo:{} //保存当前编号和地址
    };
  },
 methods:{
     //二维码生成
    qrCodeInit(row) {
       this.msgInfo=row
       return new Promise((resolve) => {
            let result = new QRCode(document.getElementById("qrCode"), {
                text: row,
                width: 180,
                height: 180,
                colorDark: "#333333",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.L,
            });
            resolve(result)
        })
    },

   //删除上一张二维码 
    removeCode() {
      const codeHtml = document.getElementById("qrCode");
      while (codeHtml.firstChild) {
        codeHtml.removeChild(codeHtml.firstChild);
      }
    },

   // base64 转 二进制流(blob)
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {
        type: mime,
      });
    },

   //图片生成下载
    async batchDownload() {
      const imgList = []; //保存生成图片
      for (let i = 0; i < this.dataList.length; i++) {
        await this.qrcodeInit(this.dataList[i]);
        await html2canvas(this.$refs.html2canvasRef, {
          backgroundColor: null,
          useCORS: true,
          scale: 1,
        }).then((canvas) => {
          this.removeCode(); //图片生成完成时删除图片
          let url = canvas.toDataURL("image/png");
          imgList.push({ url, name: this.dataList[i].num});
         //判断当生成的图片和要生成的数据长度相等时调用压缩函数
          if (imgList.length === this.dataList.length) {
            this.imageCompress(imgList);
          }
        });
      }
    },

     // 压缩转码
    imageCompress(imgList) {
      let zip = new JSZip();
      let index = 0;
      for (let i = 0; i < imgList.length; i++) {
        index++;
        let blob = this.dataURLtoBlob(imgList[i].url); //转二进制
        zip.file(imgList[i].num+ ".png", blob, { blob: true }); //图片名称(这里以编号命名)
        if (index === imgList.length) { 
          zip.generateAsync({ type: "blob" }).then(
            (blob) => {
              FileSaver.saveAs(blob, "批量下载.zip"); //下载之后的文件名
            },
            (err) => {
             consle.log(err)
            }
          );
        }
      }
    },
 },
}
</script>

Result！

本人是个小白鼠，如果各位看官有更好的实现方法，希望在评论区和各位进行讨论！