AngularJS 导出 SVG 到 PDF

Question

AngularJS 导出 SVG 到 PDF

4

我正在尝试将DOM中的<svg>元素导出为PDF文件，并在客户端生成。我尝试使用不同的库，而pdfmake非常接近我想要的结果。带有此库或任何其他库的工作示例将非常有帮助。

    downloadPdf = function() {
        //var docDefinition = { content: 'This is an sample PDF'};
        var html = d3.select("svg")
          .attr("version", 1.1)
          .attr("xmlns", "http://www.w3.org/2000/svg")
          .node().parentNode.innerHTML;
        console.log(btoa(html));
        var imgsrc = 'data:image/svg+xml;base64,'+btoa(html);
        var docDefinition = {content: [{image: imgsrc}]}
        pdfMake.createPdf(docDefinition).open('Sample.pdf');    
   }

- user3613863

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Maertz · Accepted Answer

pdfMake不支持矢量图形。在这种情况下，您需要通过使用fabricJS或canvg来绕过画布，一旦您获得图像，就可以将其放置在pdfMake中。

// Create fabric instance
var canvas = new fabric.StaticCanvas( undefined, {
    width: 500,
    height: 500,
} );

// Load SVG document; add to canvas;
fabric.parseSVGDocument(<svg element>,function(objects, options) {
    var g = fabric.util.groupSVGElements( objects, options );
    var data = "";

    // ADD ELEMENTS
    canvas.add( g );

    // EXPORT TO DATA URL
    data = canvas.toDataURL({
        format: "jpeg"
    });

    console.log(data);

// REVIVER
},function(svg,group) {
    // possiblitiy to filter the svg elements or adapt the fabric object
});