Question

我想使用jspdf打印由d3.js创建的svg图表

我得到了svg节点并将其序列化。然后通过定义其src创建图像。然后，我将图像绘制在canvas元素上，并将画布转换为用于通过pdfjs添加图像的数据url。

在创建svg的组件上

public svgToDataURL(){
    const svg = this.svg,
      img = new Image(),
      serializer = new XMLSerializer(),
      svgStr = serializer.serializeToString(svg.node());

    img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);
    console.log(img.src)

    const canvas = document.createElement("canvas");

    canvas.width = this.width;
    canvas.height = this.height;
    canvas.getContext("2d").drawImage(img,0,0,this.width,this.height);
    return canvas.toDataURL("image/png");
  };

在我打印svg的组件上

  @ViewChildren(RadarChart) radarCharts: QueryList<RadarChart>;

  renderRadarsPDF() {
    const doc = new jsPDF();
    const uris = this.radarCharts.forEach((r, index) => {
      const url = r.svgToDataURL();
      doc.addImage(url, "PNG", 10, (index * 420) + 10, 400, 420);
    });
    doc.save('Test.pdf');
  }

它不会引发错误，但是会打印空白。另外，当我尝试在浏览器中显示数据网址时，该网址为空

无法通过jspdf打印d3js svg

0 个答案: