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?
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.
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.
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:
setFont() function to set the font family of PDF text.
Change Font Type:
setFontType() function to set the font type of PDF text. It will be “normal“, “italic“, “bold“, “bolditalic“.
Change Font Size:
setFontSize() function to set the font size of text in PDF file.
Change Text Color:
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
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.
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.