使用d3从SVG JavaScript图导出PDF

Question

我试图将SVG d3图表导出到pdf文件，使用jsPDF和JavaScript。

我正在使用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

下面是我最近面临的问题的解决方案。我有画布尺寸，这样我就能得到完整的图表。

$("#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));
    });