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 绕过 Canvas 或 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
});