I have a report with charts and tables.
I am using the html2canvas with jsPDF to export this report to PDF file.

But the process is taking a long time, more than 11000ms.
I've tried to change the format, the quality, but nothing worked.

See below the code I used:

html2canvas($('#first-page'), {
    onrendered: function(canvas) {
        firstPage = canvas.toDataURL('image/jpeg', 0.5);
    },
    background: '#ffffff'
});

I'm doing something wrong or really is a problem?
How I can improve the performance?

I have a report with charts and tables.
I am using the html2canvas with jsPDF to export this report to PDF file.

But the process is taking a long time, more than 11000ms.
I've tried to change the format, the quality, but nothing worked.

See below the code I used:

html2canvas($('#first-page'), {
    onrendered: function(canvas) {
        firstPage = canvas.toDataURL('image/jpeg', 0.5);
    },
    background: '#ffffff'
});

I'm doing something wrong or really is a problem?
How I can improve the performance?

• javascript
• pdf
• canvas

• Have you verified that is it actually this step that takes so much time? I’d imagine that rendering your content onto the canvas is gonna take a good amount of time as well ... – C3roe Commented Jul 5, 2017 at 14:13
• How big is the image? – Blindman67 Commented Jul 5, 2017 at 14:20
• @CBroe I did not think about this step, of rendering the html inside the canvas. How can I measure this time? – Michel Makei Gefuni Commented Jul 5, 2017 at 14:33
• 1 stackoverflow./questions/313893/… – C3roe Commented Jul 5, 2017 at 14:35
• 1 Maybe the problem be the plugin html2canvas, in the step render the content onto the canvas – Michel Makei Gefuni Commented Jul 5, 2017 at 14:41

1 Answer 1

You don't need to use toDataUrl.http://jsfiddle/davidmather/sxp0meer/3/

html2canvas($('#first-page'), {
onrendered: function(canvas) {            
    var doc = new jsPDF('p', 'mm');
    doc.addImage(canvas, 'PNG', 10, 10);
    doc.save('sample-file.pdf');
}
});