Generating PDF from HTML using Javascript
In 2014 I answered a question on Stack Overflow about the generation of PDF documents from HTML pages (https://stackoverflow.com/questions/18191893). Since then the question has gained more than 600,000 views and to this day I still receive a few upvotes every month — Enough motivation for me to revisit the topic and create a small tutorial!
There is no free lunch!
As a word of warning: When generating PDFs from HTML, there are always trade-offs involved, one way or another!
You basically have two options:
- You can lose all textual core functionalities of a PDF, such as copying text and searching the document. This is because the resulting PDF basically just contains a screenshot.
- You can lose all custom stylings of your HTML. On the upside you are generating a text based PDF, that is searchable and from which text can be copied.
Option 1: Image-based PDFs
This option can be the right weapon of choice if your users do not require textual information from the PDF. If your users will not copy any text from the document or do not have to search for certain sections by keywords, then this is the way to go.
It especially makes sense when the source HTML is already quite image heavy, e.g. your page includes a QR code or any other generated images.
How to setup your project:
- Install html2pdf (https://github.com/eKoopmans/html2pdf.js) in your project and include it in your HTML page.
- Add this script to enable saving a PDF version of your page on a button click:
document.getElementById('print_to_pdf').onclick = function () {
var element = document.getElementsByTagName('body')[0]
html2pdf().from(element).toPdf().save('my_document.pdf')
}That’s already the whole magic — in the image below you can see an example transformation. As demonstrated, the CSS styles are still present in the PDF. As the main difference between the browser and the PDF is usually the page width, longer sentences are wrapped in different places. Widescreen webpages printed on a A4/Paper PDF will as such take up more vertical space than before.
Option 2: Text-based PDFs
This option is especially relevant if your users require textual information from PDF documents that they can copy from it as well as search for it. You will lose all your custom stylings on the way but for many use cases information trumps style in any way.
How to setup your project:
- Install jsPDF (https://github.com/MrRio/jsPDF) in your project and include it in your HTML page.
- Add this script to enable saving a PDF version of your page on a button click:
document.getElementById('print_to_pdf').onclick = function () {
var doc = new jsPDF()
var source = document.body
doc.fromHTML(source, 15, 15, { width: 180 })
doc.save('my_document.pdf')
}The image below portrays the transformation from HTML to PDF using the above code. The contrast between the two sides is quite stark, as all CSS styles are lost in the process.
What’s great for the users is that the PDF is purely text based. Not only can they freely copy texts from the documents, the file size is also way smaller than an image based document. For both shown examples the sizes are 84KBs vs. 4KBs but the image based approach also contains more information, namely a QR code.
Be aware that the fromHTML function is marked as deprecated in jsPDF, so it is likely to disappear in the future. Still, it serves me very well to this day.
Before choosing one of the two given PDF generation methods, follow the user story to figure out what the purpose of the generated PDF is.
As code speaks for itself, I have created an example repository to showcase both methods explained above: https://github.com/florianroesler/pdf_print_example
I hope you enjoyed this small tutorial — for any questions or feedback, please leave a comment. Have a good one!
