官方网址：
JSZip
首先安装依赖
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'
})
})
}
}遍历后得到的数据结构是这样
创建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});
},本资源由随笔博客发布。发布者：五维国度，转载请注明出处：http://blog.suibi.site/archives/4415
本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
微信扫一扫 