CODEWITHSUNDEEP
javascriptpdfsvgpdfmake
user3613863
user3613863

Reputation: 41

AngularJS export SVG to PDF

I'm trying to export a <svg> element sitting in DOM to a PDF file, generated on client side. I tried with different libraries, and pdfmake is so close to what I want. Any working example with this library or any other library would be helpful.

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

Upvotes: 4

Views: 4406

Answers (1)

Maertz
Maertz

Reputation: 4952

pdfMake does not support vector graphics. In this case you need to take the bypass through canvas with fabricJS or canvg, once you've imagery you can place it in 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
});

Upvotes: 4

Related Questions