使用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 @ 2022-11-19 10:21  carol2014  阅读(113)  评论(0)    收藏  举报