首先安裝依賴

npm i jszip
npm i file-saver

在使用的頁面引入依賴包

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

注意標(biāo)題后面必須加png或jpg 否則圖片無法顯示

  var arr = []
        for (let key in this.charts) {
          if (this.charts[key] != null) {
            arr.push({  
              //圖表文字標(biāo)題
              title: this.charts[key].getOption().title[0].text + ".png",
              // 圖表base64字符串
              base64: this.charts[key].getDataURL({
                // 背景顏色可以自定義
                backgroundColor: '#fff'
              })
            })
          }
        }

image.png

創(chuàng)建jszip實(shí)例,content是打包后的壓縮文件

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

最后將base64轉(zhuǎn)碼，

     /**
       * base64轉(zhuǎn)碼
       * 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});
      },