How to converted SVG Files into PDF in JSPDF using javascript

Question

I struggled to converted SVG Files into PDF using JSPDF. Here i Worked in following code.

 var doc = new jsPDF();
    var test = $.get('amChart.svg', function(svgText){
    //  console.log(svgText);
        var svgAsText = new XMLSerializer().serializeToString(svgText.documentElement);
        console.log(svgAsText);
        doc.addSVG(svgAsText, 20, 20, doc.internal.pageSize.width - 20*2)
//console.log(doc);
        // Save the PDF
  doc.output('datauri');
    });

I get this script from this SO Answer.Its results only blank PDF.When i console.log(doc) before output it will shown results.But it will not results in PDF...

And I also i working in SVGELEMENTOPDF function from this GITHUB URL and I worked in this code also.

// I recommend to keep the svg visible as a preview
var svg = $('#container > svg').get(0);
// you should set the format dynamically, write [width, height] instead of 'a4'
var pdf = new jsPDF('p', 'pt', 'a4');
svgElementToPdf(svg, pdf, {
    scale: 72/96, // this is the ratio of px to pt units
    removeInvalid: true // this removes elements that could not be translated to pdf from the source svg
});
pdf.output('datauri'); // use output() to get the jsPDF buffer

But I can`t achieved it..And kindly advise me... How to solve this problem in JSPDF

If you have access to the command like you could use a tool like wkhtmltopdf - http://wkhtmltopdf.org/ There is a lot of documentation out there to get you going. Keep in mind in order for it to render correctly you will need font packages installed on your OS. — kingmilo, Feb 19 '15 at 08:45
Since generating PDF mostly serverside job, may be its better scrap complete webpage and convert full page into PDF using phantomjs — Murali Mopuru, Mar 10 '15 at 13:29

score 1 · Answer 1 · answered Mar 17 '15 at 21:30

What worked for me was to:

Use svgCrowbar to serialize the SVG
```
var uri = svgCrowbar(eGraph);
```

Write the serialized SVG to a PNG dataURI using canvas

// Create image object which will enable the graph to be saved (via canvas)
var image = new Image();
image.onload = function () {
    // Create canvas 
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext('2d');
    context.drawImage(image, 0, 0);

    // Save DataURI for later use
    window.sitescriptdata.dataURI[id] = canvas.toDataURL('image/png');
    window.sitescriptdata.numDataURIsLoaded++;        

    ...

};
image.src = uri;

Use jsPDF.addImage() to embed that PNG into the PDF

Using this method I was able to embed multiple dynamically generated SVGs into a single PDF. I'm not 100% happy with the outcome as the images on the PDF look distorted, but it might be that I need to do more tweaking of the jsPDF settings to get everything to look crisp.

You`re right @Ddddan..but SVG tags will give proper quality for pdf when i create Image , I give results with low quality PDF.so only i need SVG values into PDF using jsPDF — VIVEK-MDU, Mar 18 '15 at 04:06

How to converted SVG Files into PDF in JSPDF using javascript

1 Answers1

Linked