使用JSZIP打包下载多个echarts图片

JSZIP的github地址:https://github.com/Stuk/jszip

多个echarts图一键下载

复制代码
charts_all.map(([index, myChart]) => {
        const imgContent = myChart.getDataURL({
            type: "png", // 导出的格式,可选 png, jpeg
            pixelRatio: 2, // 导出的图片分辨率比例,默认为 1。
        });
        const a = document.createElement("a");
        a.style.display = "none";
        a.href = imgContent;
        a.download = titles_all[index];
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    });
复制代码

利用JSZIP打包echarts图

复制代码
<script type="text/javascript" src="js/FileSaver.js"></script>
<script type="text/javascript" src="js/jszip.js"></script>

var zip = new JSZip();
charts_all.map(([index, myChart]) => {
    const imgContent = myChart.getDataURL({
        type: "jpg", // 导出的格式,可选 png, jpeg
        pixelRatio: 2, // 导出的图片分辨率比例,默认为 1。
    });
    zip.file(index + '.jpg', imgContent.substring(22), {
        base64: true
    });
})
zip.generateAsync({
    type: "blob"
}).then(function(content) {
    saveAs(content, zipFileName);
});
复制代码

 

posted @   carol2014  阅读(92)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示