首先安装依赖
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});
},
