使用JavaScript从SVG d3图表导出PDF

时间:2019-06-25 06:25:55

标签: javascript d3.js svg ecmascript-6 jspdf

我正在尝试使用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文件中的完整图表。

1 个答案:

答案 0 :(得分:0)

下面是我最近遇到的问题的解决方案。我有画布尺寸,以便可以获取完整的图表。

> f
function(x) {
       x + z 
    }
<environment: 0x0000000013f15870>
> environment_name("<environment: 0x0000000013f15870>")
[1] "e1"