vue 前端生成二维码 下载与批量下载压缩包

需求：

（一）点击下载二维码，下载到本地，并且二维码下面带有文字描述

（二） 点击批量下载，生成 .zip文件

 

 

实现思路：

　　这里只是个人思路，看过众多帖子中走出来得一条路，仅供参考

     1，使用Qrcode 生成二维码

     2，由于二维码下面需要带上文字描述，而生成二维码时无法生成编号，我这里使用 html2canvas  把div内容转换成图片

     3，批量下载使用 jszip  生成压缩包 使用 file-saver  进行保存

1，下载单个二维码

 <!--   二维码需要挂载的DOM 这里得DOM只负责生成二维码 界面上无需展示 ，若是详情页则需要展示生成得二维码 -->
    <div
      ref="qrBox"
      :key="index"
      v-for="(item, index) in checkedList"
      style="text-align: center; width: 300px"
    >
　　　　二维码挂在的DOM
      <canvas ref="codeItem"></canvas>
　　　　二维码下面的描述
      <div>{{ item.deviceNumber }}</div>
    </div>

  

　　　　　　

<script>

　　　　import QRCode from 'qrcode';

　　　　import JSZip from 'jszip';

　　　　import FileSaver from 'file-saver';

　　　　import html2canvas from 'html2canvas';

 

    // 单个下载图片事件
    downLoadQr(row) {
      this.checkedList = [row];
      this.$nextTick(() => {
        QRCode.toCanvas(
          this.$refs.codeItem[0],
          ' 二维码URL',
          {
            height: 180,
            width: 180,
            margin: 1,
          },
          error => {
            if (error) console.log(error);
            html2canvas(this.$refs.qrBox[0]).then(canvas => {
              let dataURL = canvas.toDataURL('image/png');
              console.log(dataURL);
              if (dataURL !== '') {
                var a = document.createElement('a');
                a.download = row.deviceNumber;
                a.href = dataURL;
                a.click();
              }
            });
          }
        );
      });
    },

</script>

 

 

 

 

3，批量下载二维码 .zip格式 

  // 批量下载图片  list为需要生成得所有数据
    downloadImage: function (list) {
      this.$nextTick(() => {
        const base64Array = [];
        list.forEach((item, index) => {
          let doc = this.$refs.codeItem[index];
          // let
          QRCode.toCanvas(
            doc,
            '二维码URL',
            {
              height: 180,
              width: 180,
              margin: 1,
            },
            error => {
              if (error) console.log(error);
              html2canvas(this.$refs.qrBox[0]).then(canvas => {
                base64Array.push({
                  name: `图片名.png`,
                  data: canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, ''),
                });
                if (base64Array.length === list.length) {
                  this.downloadZip(base64Array);
                }
              });
            }
          );
        });
      });
    },
  
    downloadZip(arr) {
      // 定义压缩包名
      const zipName = `定义压缩包名`;
      const zip = new JSZip();
      arr.forEach(item => {
        zip.file(item.name, item.data, { base64: true });
      });
      zip.generateAsync({ type: 'blob' }).then(content => {
        FileSaver.saveAs(content, `${zipName}.zip`);
      });
    },

 

 

参考地址：

https://blog.csdn.net/u013344993/article/details/121130136