接触到一个项目需要同时下载多张ECharts图片
我是用的ECharts的导出图片为base64并将数组进行一个下载并压缩
首先安装两个依赖

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

因为是模拟所以在data中我模拟了两条数据，base64太长了，我删减了一下 见谅

      img_list: [
        {
          name: '图片一',
          baseImg: '/9j/4AAQSkZJRgABAQEASABIAAD/'
        },
        {
          name: '图片二',
          baseImg: 'iVBORw0KGgoAAAANSUh'
        }
      ]

接下来也就是整体的业务代码

    downloadZip() {
      let { img_list } = this
      let blogTitle = '啥也不是' // 下载的文件夹名称
      let zip = new JSZip()
      let imgs = zip.folder(blogTitle)
      let baseList = []
      for (let i = 0; i < img_list.length; i++) {
        let name = img_list[i].name // 每张图片的名称
        let image = new Image()
        // 解决跨域 Canvas 污染问题
        image.setAttribute('crossOrigin', 'anonymous')
        image.onload = function() {
          let canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          let context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          let url = canvas.toDataURL() // 得到图片的base64编码数据 let url =
          canvas.toDataURL('image/png')
          baseList.push({ name: name, img: url.substring(22) })
          if (baseList.length === img_list.length) {
            if (baseList.length > 0) {
              for (let k = 0; k < baseList.length; k++) {
                imgs.file(baseList[k].name + '.png', baseList[k].img, {
                  base64: true
                })
              }
              zip.generateAsync({ type: 'blob' }).then(function(content) {
                FileSaver.saveAs(content, blogTitle + '.zip')
              })
            }
          }
        }
        image.src = img_list[i].baseImg = `data:image/png;base64,${img_list[i].baseImg}`
      }
    }