javascript - AngularJS 将 SVG 导出为 PDF

Question

我正在尝试将<svg>位于 DOM 中的元素导出到在客户端生成的 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');    
   }    

Answer 1

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
});