vue批量导出图片为压缩包

1.安装依赖

npm install jszip
npm install file-saver --save

2.引入

import JSZip from 'jszip';
import FileSaver from 'file-saver';

导出的图片格式只能是base64位（此方法也可以导出文件）

 //二维码导出
    packageImages() {
      let imgBase64 = [] //图片数组 需要base64位图片格式
      let imgsName = [] //图片名称 导出时的图片命名
      let imageSuffix = '.jpg'// 图片后缀
      for (let i = 0; i < this.exportList.length; i++) {
        if (this.exportList[i].qrcode64 != '') {
          imgBase64.push(this.exportList[i].qrcode64)
          let list = {
            imgname: this.exportList[i].name,
            under: this.exportList[i].under
          }
          imgsName.push(list)
        }
      }
      let zip = new JSZip();
      for (let i = 0; i < imgBase64.length; i++) {
        // 向根目录添加一个文件夹
        let img = zip.folder(imgsName[i].under)
        console.log()
        img.file(imgsName[i].imgname + imageSuffix, imgBase64[i].replace(/^data:image\/(png|jpg|jpeg);base64,/, ""), { base64: true })
      }

      zip.generateAsync({ type: "blob" }).then((content) => {
        FileSaver.saveAs(content, `${this.skillName}活动码.zip`)
      })
    },