npm install html2canvas
import html2canvas from "html2canvas"

// 导出多张图表为一张图片
// dmo元素里的内容转换为canvas,并将canvas下载为图片
const download = () => {
  // 转换成canvas
  html2canvas(document.getElementById("echarts")).then(function (canvas) {
    // 将 Canvas 转换为 Base64 字符串
    let img = canvas.toDataURL("image/png");
    // 
    let img1 = img.replace("image/png", "image/octet-stream");
    // 创建a标签,实现下载
    var creatIMg = document.createElement("a");
    creatIMg.download = "图表.png"; // 设置下载的文件名,
    creatIMg.href = img1 ; // 下载url
    document.body.appendChild(creatIMg);
    creatIMg.click();
    creatIMg.remove(); // 下载之后把创建的元素删除
  });
};

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐