How to easily create a PDF file from SVG using jsPDF?

Question

Firstly, I apologize for my poor English, this is not my native language.

So, I'm currently trying to create a pdf file, but I have some SVG images. I found information about this problem, but I just need to use JavaScript to not tell jQuery.

I found jsPDF here: https://github.com/MrRio/jsPDF

There is a plugin jspdf.plugin.sillysvgrenderer.js (in the same folder) and where we can find an example of the PDF created in the test folder.

But when I try to create a PDF myself, it does not work, and I do not understand why.

Do you know how to do this?

Many thanks.

Answer 1

, SVG , , PATH: (

github https://github.com/MrRio/jsPDF/issues/384

, ( ):

function demoSvgDocument() {
    var doc = new jsPDF();
    var test = $.get('013_sillysvgrenderer.svg', function(svgText){
        var svgAsText = new XMLSerializer().serializeToString(svgText.documentElement);
        doc.addSVG(svgAsText, 20, 20, doc.internal.pageSize.width - 20*2)

        // Save the PDF
        doc.save('TestSVG.pdf');
    });
}       

, , . , , -

Answer 2

canvg, SVG Canvas. base64 .toDataURL().

fooobar.com/questions/550462/...

http://jsfiddle.net/Purushoth/hvs91vpq/

Canvg Repo: https://github.com/gabelerner/canvg

Answer 3

svg2pdf.js, fork of jsPDF. : SVG PDF.

, jsPDF , , SVG canvg canvas jsPDF.

, , .

Answer 4

canvas, jsPDF SVG PDF canvg. canvas jsPDF / canvg, :

var jsPdfDoc = new jsPDF({
    // ... options ...
});

// ... whatever ...

// hack to make the jspdf canvas work with canvg
jsPdfDoc.canvas.childNodes = {}; 
jsPdfDoc.context2d.canvas = jsPdfDoc.canvas;
jsPdfDoc.context2d.font = undefined;

// use the canvg render the SVG onto the 
// PDF via the jsPDF canvas plugin.
canvg(jsPdfDoc.canvas, svgSource, {
    ignoreMouse: true,
    ignoreAnimation: true,
    ignoreDimensions: true,
    ignoreClear: true
});

, SVG- jsPDF, canvg SVG-. , width height <svg/> SVG canvg, (, , ).