PDF file format is very useful to download bulk data within the web application. It helps the user to download dynamic content in file format for offline use. With export to PDF functionality, the HTML content is converted to PDF document and downloaded as a PDF file. Within the dynamic web application, a server-side script is used to convert HTML to PDF and generate PDF file using PHP.
If you would like a client-side solution to get PDF document, JavaScript is that the easiest method to convert HTML to PDF. There are various JavaScript library is out there for generating PDF from HTML. JSPDF is one of the best libraries to convert HTML to PDF using JavaScript. During this tutorial, we’ll show you ways to get PDF document and convert HTML to PDF using jquery and JSPDF library.
- Include jquery and JSPDF Library
- Include the jquery and JSPDF library files to use the JSPDF class.
Note that: You don’t have to download the JSPDF library separately; all the required files are included in our source code package.
Instantiate JSPDF Class
Use the following line of code to instantiate and use the JSPDF object in JavaScript.
[pastacode lang=”javascript” manual=”Var%20doc%20%3D%20new%20jspdf()%3B” message=”” highlight=”” provider=”manual”/]Generate PDF using JavaScript
The following example shows how to use the JSPDF library to get PDF file using JavaScript.
- Specify the content in text() method of JSPDF object.
- Use the addpage() method to feature new page to PDF.
- Use the save() method to get and download PDF file.
Convert HTML Content to PDF using JavaScript
The following example shows the way to use the JSPDF library to convert HTML to PDF and generate PDF file from HTML content using JavaScript.
- Retrieve the HTML content from the specific element by ID or class.
- Convert HTML content of the specific a part of the online page and generate PDF.
- Save and download the HTML content as a PDF file.
HTML Code:
[pastacode lang=”markup” manual=”%3Cdiv%20id%3D%22content%22%3E%0A%20%20%20%20%3C!–%20HTML%20content%20goes%20here%20–%3E%0A%3C%2Fdiv%3E%0A%0A%3Cdiv%20id%3D%22element%22%3E%3C%2Fdiv%3E%0A” message=”” highlight=”” provider=”manual”/]JavaScript Code:
[pastacode lang=”javascript” manual=”Var%20doc%20%3D%20new%20jspdf()%3B%0AVar%20elementhtml%20%3D%20%24(‘%23contnet’).html()%3B%0AVar%20specialelementhandlers%20%3D%20%7B%0A%20%20%20%20’%23elementh’%3A%20function%20(element%2C%20renderer)%20%7B%0A%20%20%20%20%20%20%20%20Return%20true%3B%0A%20%20%20%20%7D%0A%7D%3B%0ADoc.fromhtml(elementhtml%2C%2015%2C%2015%2C%20%7B%0A%20%20%20%20’Width’%3A%20170%2C%0A%20%20%20%20’Elementhandlers’%3A%20specialelementhandlers%0A%7D)%3B%0A%0A%2F%2F%20Save%20the%20PDF%0ADoc.save(‘sample-document.pdf’)%3B%0A” message=”” highlight=”” provider=”manual”/]Useful Configurations
The JSPDF library provides various methods and options to configure the PDF creation. A number of the useful methods of JSPDF class are given below that are commonly used to export HTML to PDF using jQuery.
Change Paper Orientation:
Use the orientation choice to set the paper orientation of the PDF.
[pastacode lang=”javascript” manual=”Var%20doc%20%3D%20new%20jspdf(%7B%0A%20%20%20%20Orientation%3A%20’landscape’%0A%7D)%3B%0A%0ADoc.text(20%2C%2020%2C%20’Hello%20world!’)%3B%0ADoc.text(20%2C%2030%2C%20’This%20is%20client-side%20Javascript%20to%20generate%20a%20PDF.’)%3B%0A%0A%2F%2F%20Add%20new%20page%0ADoc.addpage()%3B%0ADoc.text(20%2C%2020%2C%20’Visit%20wikitechy.com)%3B%0A%0A%2F%2F%20Save%20the%20PDF%0ADoc.save(‘document.pdf’)%3B%0A” message=”” highlight=”” provider=”manual”/]Change Text Font:
Use setfont() and setfonttype() methods to line text font and font-style within the PDF.
[pastacode lang=”javascript” manual=”Var%20doc%20%3D%20new%20jspdf()%3B%0A%09%0ADoc.text(20%2C%2020%2C%20’This%20is%20the%20default%20font.’)%3B%0A%0ADoc.setfont(%22courier%22)%3B%0ADoc.setfonttype(%22normal%22)%3B%0ADoc.text(20%2C%2030%2C%20’This%20is%20courier%20normal.’)%3B%0A%0ADoc.setfont(%22times%22)%3B%0ADoc.setfonttype(%22italic%22)%3B%0ADoc.text(20%2C%2040%2C%20’This%20is%20times%20italic.’)%3B%0A%0ADoc.setfont(%22helvetica%22)%3B%0ADoc.setfonttype(%22bold%22)%3B%0ADoc.text(20%2C%2050%2C%20’This%20is%20helvetica%20bold.’)%3B%0A%0ADoc.setfont(%22courier%22)%3B%0ADoc.setfonttype(%22bolditalic%22)%3B%0ADoc.text(20%2C%2060%2C%20’This%20is%20courier%20bolditalic.’)%3B%0A%0A%2F%2F%20Save%20the%20PDF%0ADoc.save(‘document.pdf’)%3B%0A” message=”” highlight=”” provider=”manual”/]Change Font Size:
Use setfontsize() method to line font size of the text within the PDF.
[pastacode lang=”javascript” manual=”Var%20doc%20%3D%20new%20jspdf()%3B%0A%09%0ADoc.setfontsize(24)%3B%0ADoc.text(20%2C%2020%2C%20’This%20is%20a%20title’)%3B%0A%0ADoc.setfontsize(16)%3B%0ADoc.text(20%2C%2030%2C%20’This%20is%20some%20normal%20sized%20text%20underneath.’)%3B%0A%0A%2F%2F%20Save%20the%20PDF%0ADoc.save(‘document.pdf’)%3B%0A” message=”” highlight=”” provider=”manual”/]Change Text Color:
Use settextcolor() method to line the color of the text within the PDF.
[pastacode lang=”javascript” manual=”Var%20doc%20%3D%20new%20jspdf()%3B%0A%09%0ADoc.settextcolor(100)%3B%0ADoc.text(20%2C%2020%2C%20’This%20is%20gray.’)%3B%0A%0ADoc.settextcolor(150)%3B%0ADoc.text(20%2C%2030%2C%20’This%20is%20light%20gray.’)%3B%0A%0ADoc.settextcolor(255%2C0%2C0)%3B%0ADoc.text(20%2C%2040%2C%20’This%20is%20red.’)%3B%0A%0ADoc.settextcolor(0%2C255%2C0)%3B%0ADoc.text(20%2C%2050%2C%20’This%20is%20green.’)%3B%0A%0ADoc.settextcolor(0%2C0%2C255)%3B%0ADoc.text(20%2C%2060%2C%20’This%20is%20blue.’)%3B%0A%0A%2F%2F%20Save%20the%20PDF%0ADoc.save(‘document.pdf’)%3B%0A” message=”” highlight=”” provider=”manual”/]Conclusion
Our example code helps you to convert HTML to PDF and generate PDF file using JavaScript. You’ll easily add the Export to PDF functionality on the online page without counting on the server-side script. The PDF creation functionality is enhanced with JSPDF configuration options as per your needs. Download our source code package to get all the required files including the JSPDF JavaScript library.