生成二维码压缩文件

生成二维码压缩文件

https://pan.baidu.com/s/1_m3ZYTtDhXFUDCXaX2u1Uw
依赖地址（提取码:Lazy）

1. 引入文件

<script src="./js/jszip.min" type="text/javascript" charset="utf-8"></script>
<script src="./js/filesaver.min" type="text/javascript" charset="utf-8"></script>
<script src="./js/jquery-3.6.0.min" type="text/javascript" charset="utf-8"></script>
<script src="./js/qrcode.min" type="text/javascript" charset="utf-8"></script>

2. 创建一个全局画布

 var canvas = document.createElement('canvas'); //创建一个全局画布
  canvas.width = 300; //设置画布的宽和高
  canvas.height = 400;
  var ctx = canvas.getContext('2d'); //画笔

3. 生成打包

    async saveSome(list) { //生成多个并打包下载到本地
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          await this.draw(item); //等待绘图
          await this.addToZip(canvas, zip, item.stuName + ".png"); //等待加入zip文件
        }
        this.createZip() //创建ZIP文件
      },

4. 创建，绘图，下载

 draw(item) { //绘制二维码及名字标识
        return new Promise((resolve, reject) => {
          var div = document.createElement('div');
          var qrcode = new QRCode(div, { //绘制二维码
            text: item.qrcode, //二维码名字，可以看出来区别
            width: 250,
            height: 250,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
          });
          let mc = div.querySelector('canvas');
          ctx.beginPath(); //开始绘制
          ctx.fillStyle = '#FFFFFF';
          ctx.fillRect(0, 0, 300, 400) //填充底色
          ctx.drawImage(mc, 25, 25) //绘制二维码
          ctx.font = "bold 45px 微软雅黑";
          ctx.textAlign = "center";
          ctx.textBaseline = "middle";
          ctx.fillStyle = '#000000';
          ctx.fillText(item.stuName, 150, 350) //绘制文字在底部
          ctx.closePath(); //结束绘制
          resolve();
        })
      },
      async createZip() { //下载zip文件到本地
        zip.generateAsync({
          type: 'blob'
        }).then(function(content) {
          saveAs(content, `XXX_${new Date().getTime()}.zip`);
        });
      },
      addToZip(canvas, zip, name) {
        return new Promise((resolve, reject) => {
          canvas.toBlob(function(blob) {
            zip.file(name, blob); // 将每次不同的canvas数据添加到zip文件中
            resolve();
          });
        })
      },

5. 调用函数

getQRCode(data).then(res => {
          this.saveSome(res.data).then(res => {
            setTimeout(function(){
              location.reload()
            },2000)
          })
        })