4

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

1 に答える 1

4

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
});
于 2015-04-22T12:30:26.090 に答える