We earn commission when you buy through affiliate links.
This does not influence our reviews or recommendations.Learn more.
Creating PDF documents from HTML is a useful feature in several applications.
By generating documents on the client side, you reduce the amount of work the server has to do.
This means you will use fewer resources and save up on the reduced computing power required.
Generating documents on the client side means your applications will not require a backend.
Generating PDFs using HTML is also easier as it is easier to specify the layout of your document.
How to Convert HTML to PDF
There are multiple options for converting your HTML Document to PDF.
In this section, I will demonstrate them all.
Before we begin, lets set up a basic project.
Create an HTML file with the following content:
This file displays some simple markup.
This markup is going to be converted to PDF later.
We also link a JavaScript script.
This script will generate the HTML.
The user can then choose the option to print the document as a PDF.
This generatePDF function can then be called from anywhere in your code.
For example, it can be attached as an event handler to the call to a print button.
In this case, we are simply calling it.
This then opens up the print dialog box in the net web client like so.
This will generate the PDF you want.
By using the jsPDF Library
The first method, though simple, is a little tedious.
It also might not be immediately obvious to your users that you want them to print the PDF version.
An easier method is to use the jsPDF library.
This library lets you convert your HTML document to PDF and download it immediately.
So, we begin by adding the function boilerplate.
Next, we can begin writing the code for the function.
The code in the generatePDF function does the following:
It instantiates the jsPDF class.
This creates a new PDF document.
Next, we create an options object.
In this object, we set the pagesplit property to true.
This allows the PDF document to be split into multiple pages.
Lastly, we add the HTML.
This is done by targeting the element whose markup we want to add to the PDF.
In this case, we specified the body tag.
We also pass in our options object.
We also passed in a callback function, which will be executed once the PDF document has been generated.
This callback calls the save method to download the document, and we supply the documents name.
By html2pdf
The last method we will cover in this article is the html2pdf method.
This is similar to the jsPDF method.
This method is simpler than the previous one but offers fewer options for configuration.
This script tag should load the jsPDF bundle.
Next, lets modify the script.js file to download the PDF.
Again, we start with the boilerplate code.
Next, we call the save method on the returned object.
We pass in the file name to the save method.
Running this code should prompt you to download the PDF file.
Doing this has numerous advantages, including allowing you to build fully frontend applications.
This means the text cannot be highlighted.
This can be an advantage or disadvantage.
