How to Convert Html to PDF using JavaScript?

How to Convert Html to PDF using JavaScript?

In this tutorial, we will learn how to convert HTML to PDF using javascript. We will use a third-party library to generate a PDF file from the HTML content.

As you know, when we send or receive the files using the mail or any social share platform then we mostly used PDF file format. PDF file format is very useful, you can download the file in PDF format and then you can use it when you are offline (without the internet).

So mostly all web applications have this functionality to download bulk data in PDF format. You can create the dynamic PDF file using server-side scripting languages like PHP, Python, etc. Check this tutorial on how to convert an HTML to PDF file using PHP?

So now, if you are looking for a client-side solution then javascript is the best approach to accomplish this functionality to convert HTML to PDF. Let’s have an examples code to generate PDF files.

We will use the jsPDF library to export the HTML content into a PDF file. There are many different types of PDF creation libraries but jsPDF is the best one, I also have used it in my one of projects.

Convert HTML to PDF Using jsPDF JavaScript Library

jsPDF library is the best solution to generate the PDF, you can use it in your web applications to generate the event tickets, reports, certificates, etc. It is an open-source library and everyone can use it.

To start working with the jsPDF file, first, you need a jquery library and jsPDF library files and you can have it from the following CDN links.

https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js

Generate PDF from Text Using jsPDF

First of all, you need to add the above two CDN links of libraries into the footer of the file. After adding the files, you need to initiate the class of jsPDF and then you can use it to generate the PDF files.

Initiate the class:

The above code line is a syntax of initiating the jsPDF class. It has “orientation“, “unit“, and “format” parameters to declare the values while initiating.

orientation – The default value of orientation is “portrait“. We can set it to “landscape” if we want a different page orientation.

unit – It will tell jsPDF is that we are going to use this unit. Use one of the following: “pt” (points), “mm” (default), “cm“, “in“.

format – It is used to set the page format. The default page format is “a4” but you can change it as you want other formats are: “a3“, “a5“, “letter“, “legal“.

Now you can write a couple of lines of code to generate the PDF file from simple text. We will use the text() function to write a text into a PDF file then the save() function to download the file. See the following example.

if we want to add a new page then we can use the addPage() function. Add this function where you want to start your new page text. See the example below.

So the above will generate two PDF pages for you because we had added addPage() function in this example.

And one thing more, as you can see we use the text() function, so in this function first two values are X and Y positions of text according to the unit defined in the document constructor.

Convert HTML Content to PDF Using jsPDF

As you see the basic uses of the jsPDF library and generating a PDF file from text. Now we will see, how we can convert HTML content to a PDF file.

We will get the HTML content using the jquery selector and then pass this in fromHTML() function of jsPDF. You can set the width of display content and any event handlers if you have.

See the following example of converting HTML content into PDF file format.

The above code will convert your HTML content into PDF format. You just have to call htmltopdf() function at on click of button.

jsPDF Library’s Useful Configurations

The jsPDF library has lots of methods to configure the PDF document. You can set the font size, font family, font type, color, paper orientation, formats, etc.

We use it with the text and HTML content but we can also use it with images, graphics, etc. There are more configurations available on the documentation page, you can check here.

Change Font Family:

Use the setFont() function to set the font family of PDF text.

Change Font Type:

Use the setFontType() function to set the font type of PDF text. It will be “normal“, “italic“, “bold“, “bolditalic“.

Change Font Size:

Use setFontSize() function to set the font size of text in PDF file.

Change Text Color:

Use setTextColor() function to set the text color of text in PDF file. You have to use the RGB color code.

Working with Images:

We have the addImage() function to work with images. It takes four parameters, the first is the image source and second is the type of image and the rest two are the X, Y positions of the images.

Working with Graphics:

Using the jsPDF library, you can also work on graphics. You can draw a shape and fill a color inside using the setFillColor() and setDrawColor() function. There are more graphics functions like ellipse(), circle(), rect(), etc.

To draw and fill color

Let’s see the one example of all graphics.

Draw Ellipse:
Draw Circle:
Draw Reactangle:
Draw Triangle:

Conclusion

So, in this tutorial, you learned about how to generate PDF files from text and how to convert an HTML to a PDF file using the jsPDF javascript library.

Using this jsPDF library we see how we can configure the PDF document by setting up values. Values are like setting the font, font size, text color, page orientation, page format, etc.

And you also learned about how it can work with images and graphics to draw a shape and fill a color inside. You can draw ellipses, squares, rectangles, circles, etc.

Hope you liked it! Please share with your friends. If you have any queries please ask me in the comment section, I’ll respond to you as soon as possible.

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Leave a Reply

Your email address will not be published.