使用 JavaScript 从 SVG d3 图表导出 PDF

Question

我正在尝试使用 jsPDF 和 JavaScript 将 SVG d3 图表导出为 pdf 文件。

我正在使用 jsPDF 导出 pdf 文件。我可以导出文件，但它只有较少的内容。

$("#exportPDF").click(() => {
      let svg = new XMLSerializer().serializeToString(document.getElementById("Employement_Source"));
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      let doc = new jsPDF({orientation: 'l', unit: 'px'});
      let img = document.createElement("img");
      img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svg));
      img.onload = () => {
        ctx.drawImage(img, 0, 0);
        console.log(canvas.toDataURL("image/png"));
        doc.setFontSize(11);
        doc.text(5, 10, 'D3 Chart');
        doc.addImage(canvas.toDataURL("image/png"), 'PNG', 10, 10, 200, 100);
        doc.save('download.pdf');
      };
    });

期待导出的 pdf 文件中的完整图表。

Answer 1

以下是我最近遇到的问题的解决方案。我有 canvas 个维度，以便我可以获得完整的图表。

$("#exportPDF").click(() => {
      let svg = new XMLSerializer().serializeToString(document.getElementById("Employement_Source"));
      let canvas = document.createElement("canvas");
      let svgSize = $(svg)[0];
      // let svgSize = $(svg)[0].getBoundingClientRect();
      canvas.width = svgSize.width.baseVal.value;
      canvas.height = svgSize.height.baseVal.value;

      let ctx = canvas.getContext("2d");
      let doc = new jsPDF({
        orientation: 'l',
        unit: 'px'
      });
      let img = document.createElement("img");
      img.onload = () => {
        ctx.drawImage(img, 0, 0);
        // console.log(canvas.toDataURL("image/png"));
        doc.setFontSize(11);
        doc.text(5, 10, 'D3 Chart');
        doc.addImage(canvas.toDataURL("image/png"), 'PNG', 10, 10);
        doc.save('download.pdf');
      };
      img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svg));
    });

使用 JavaScript 从 SVG d3 图表导出 PDF

Export PDF from SVG d3 chart using JavaScript

javascript

svg

d3.js

jspdf

ecmascript-6