将多个echarts图片打包zip并下载

首先安装依赖

npm i jszip
npm i file-saver

在使用的页面引入依赖包

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

注意标题后面必须加png或jpg 否则图片无法显示

  var arr = []
        for (let key in this.charts) {
          if (this.charts[key] != null) {
            arr.push({  
              //图表文字标题
              title: this.charts[key].getOption().title[0].text + ".png",
              // 图表base64字符串
              base64: this.charts[key].getDataURL({
                // 背景颜色可以自定义
                backgroundColor: '#fff'
              })
            })
          }
        }

image.png

创建jszip实例,content是打包后的压缩文件

     let zip = new JSZip()
     let fileName = "charts-file"
        arr.forEach(item => {
           //打包数据
          zip.file(item.title, this.dataUrlFile(item.base64,item.title))
     })
        zip.generateAsync({type: "blob"}).then(content => {
         FileSaver.saveAs(content, fileName); // 利用file-saver保存文件  自定义文件名
     })

最后将base64转码，

     /**
       * base64转码
       * url base64编码
       * fileName 文件名
       * */
      dataUrlFile(url, fileName) {
        var arr = url.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 File([u8arr], fileName, {type: mime});
      },