javascript - jsPdf using html2canvas.js for export pdf from html is not working for large data

Question

Hi I am using jsPdf for making pdf of html content, it is going fine for short content and creating pdf , but when I am trying to use it on large content with html2canvas.js (for rendering css), it is not creating pdf. Any suggestions or sample code for this would be helpful.Thank you.

Answer 1

It is possible to create pdf for large files. There are primarily two ways to do this :

1. html -> canvas -> image -> pdf (I assume you are trying this approach)

2. html -> pdf (does not work if html contains svg)

I would suggest you to go for (2) unless you have a good reason to go for (1) (like if you are have svg content)-- it is quite expensive operation for the browser and there is possibility of the browser crashing too.

1. html -> canvas -> image -> pdf

This is very neatly described here - https://github.com/MrRio/jsPDF/issues/339#issuecomment-53327389

My experience when using this method - crashes when the pdf generated contains more than 2-3 pages. (tested on latest chrome and firefox)

2. html -> pdf

var pdf = new jsPDF('l', 'pt', 'a4');
 var options = {
    pagesplit: true
};

pdf.addHTML($('body'), 0, 0, options, function(){
    pdf.save("test.pdf");
});

This is way faster compared to above approach. Generates pdf containing 5-6 pages in 1-2 seconds!

Hope this helps!