echarts的PNG,Jpge,Pdf 下载

394 阅读1分钟

下载PNG

// 图表转换成canvas
  html2canvas(document.getElementById("myChart")).then(function (canvas) {
    var img = canvas
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream");
    // 创建a标签,实现下载
    var creatIMg = document.createElement("a");
    creatIMg.download = "图表.png"; // 设置下载的文件名,
    creatIMg.href = img; // 下载url
    document.body.appendChild(creatIMg);
    creatIMg.click();
    creatIMg.remove(); // 下载之后把创建的元素删除
  });
  

下载 Jpge

import html2canvas from "html2canvas";
html2canvas(document.getElementById("myChart")).then(function (canvas) {
    var img = canvas
      .toDataURL("image/jpeg")
      .replace("image/jpeg", "image/octet-stream");

    // 创建a标签,实现下载
    var creatIMg = document.createElement("a");
    creatIMg.download = "图表.jpeg"; // 设置下载的文件名,
    creatIMg.href = img; // 下载url
    document.body.appendChild(creatIMg);
    creatIMg.click();
    creatIMg.remove(); // 下载之后把创建的元素删除
  });
  

下载pdf

 html2canvas(document.getElementById("myChart")).then(function (canvas) {
    let contentWidth = canvas.width;
    let contentHeight = canvas.height;
    let pageHeight = (contentWidth / 592.28) * 841.89;
    let leftHeight = contentHeight;
    let position = 0;
    let imgWidth = 595.28;
    let imgHeight = (592.28 / contentWidth) * contentHeight;
    let pageData = canvas.toDataURL("image/jpeg", 1.0);
    let PDF = new jsPDF("", "pt", "a4");
    if (leftHeight < pageHeight) {
      PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
    } else {
      while (leftHeight > 0) {
        PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
        leftHeight -= pageHeight;
        position -= 841.89;
        if (leftHeight > 0) {
          PDF.addPage();
        }
      }
    }
    PDF.save("图表" + ".pdf");
  });