jsPDF Tutorial Part 3: Exactly Capture HTML page to PDF

How to capture snapshot of HTML page and generate PDF file when user click the link. This tutorial will show you how to use jsPDF and html2canvas step by step and generate PDF that look exactly like your HTML page

Follow us on

[premctalkies]

It worked well. I was looking for this solution for more than 5 days and found it. Awesome!! Thank you.

[matthieudesjardins]

This is really great. The documentation for jsPDF out there is pretty slim. Everyone seams to answer every questions with the same exemples they copied somewhere.

In any case, this is exactly what I needed. Thanks!

[allawitte]

Obviously the function was changed so far and code from the video doesn't work anymore. I did it using promise, and it works:
{
var img =
var doc = new jsPDF();
doc.addImage(img, 'JPEG', 20, 20);
doc.save('test.pdf');
});

[pathmasriambegoda]

Wow this is great. Is there any way we can increase the quality of the pdf? Because the text in the generated pdf seemed to be blurred.

[TheALTUVE]

With jsPDF can i write over an external pdf? i mean, put some text over a pdf that i have created with an pdf's maker.

[omarmcC]

this is a great tutorial about this theme.. the only thing is that I have implemented as you taught but there is a little problem with the type of image format since we specify png to a addImage as JPEG, is there another way to set the image type for it to work properly in chrome, I mean firefox runs it so far so good but chrome does not generate images... thanks a lot in advance

[anew_coco]

Hi,
I tried to create pdf and It works on my ubuntu machine. I am able to view generated pdf file on document viewer .
but On windows machine, Adobe reader throws an error when same pdf is opened.
As you are also opening the pdf files on adobe reader and that worked perfectly fine.
could you please help me, what would be the possible issues.

Thanks

[the_thinker]

can you pls tell me how to insert header and footer in every page ...i have used autotable plugin to draw multiple tables and they are adding new pages according to the need of the dynamic have not used doc.addPage ()

[romnickalfonso]

how about if you want to copy 2 div in different page in pdf ? in 1st pages i want div1 and second page is div2? thanks

[kathiravant]

If I have more than 1 pages say 3 page.Is that all pages will be converted to pdf

[sambasiva]

web page images not displayed in pdf, remaining content displaying well.... please help me how image also dispalying in pdf

[andresgardiol]

Hi, html2canvas has problems with the css property "clip-path" do you know a way to create a pdf from an html element that has that css property? Thanks

[PrashantKumar-gcel]

Sir, the image in my webpage is not getting exported. Also the table in the webpage is getting cropped out. I am using Chrome browser.
Am I doing something wrong?
Please reply

[nerochaniago]

can save pdf file to my spesific directory ? like directory C: or D:

[AaronEstebanSEO]

html2canvas.js has been deprecated. The steps outlined in this video will no longer work. I took a look in the console & saw the following error:
"1ms html2canvas: onrendered option is deprecated, html2canvas returns a Promise with the canvas as the value"

[sambasiva]

hey man in this are not displaying in pdf what i can do....tell me please

[ソルスンヨン]

Someone said it's not working like the video.

I did like this, and it's works.

{
var img =
var doc = new jsPDF();
doc.addImage(img, 'JPEG', 20, 20);
doc.save('test.pdf');
});

[irshadmulani]

Hi, Is there any way we can increase the quality of the pdf?

[pratapnayaka]

can u tell me how to print the page number in the converted

[MtBlaze]

that doesn't work on smaller screen it just takes a screen shot of half screen and print's as pdf did you check on mobile device