使用JavaScript从SVG d3图表导出PDF

我正在尝试使用jsPDF和JavaScript将SVGD3图表导出为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文件中有完整的图表。

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

$exportPDF.click=>{ 让svg=new XMLSerializer.serializeToStringdocument.GetElementByIdeEmployment_Source； 让canvas=document.createElementcanvas； 设svgSize=$svg[0]； //让svgSize=$svg[0].getBoundingClientRect； canvas.width=svgSize.width.baseVal.value； canvas.height=svgSize.height.baseVal.value； 设ctx=canvas.getContext2d； let doc=new jsPDF{ 方向：“l”， 单位：px }; 设img=document.createElementimg； img.onload==>{ ctx.drawImageimg，0,0； //console.logcanvas.toDataURLimage/png； 文件setFontSize11； 文件文本5、10，“D3图表”； doc.addImagecanvas.toDataURLimage/png，'png'，10,10； doc.save'download.pdf'； }; img.setAttributesrc，数据：image/svg+xml；base64，+btoasvg； };

---

构造函数调用看起来很可疑！根据命令，调用将使用包含选项的对象，而不是单个选项的列表。@altocumulus我已对代码进行了必要的更改。请复习并让我知道你的想法。我无法设置合适的大小，以容纳不同尺寸的所有不同图表。非常感谢你的帮助。谢谢。我已经得到了预期的结果，并通过相应地替换问题更新了解决方案。谢谢