Download HTML Page as PDF Using JavaScript

To store dynamic content from the web page or HTML page for future use PDF format is very helpful. This also can help download a big amount of data from the web application by export HTML page to PDF on the user’s click event using JavaScript functionality. To Download HTML Page as PDF Using JavaScript, JavaScript has a huge amount of libraries available to generate PDF from HTML. But here we use jsPDF which is the best JavaScript library to convert and download HTML page as PDF using JavaScript.

Here, In this tutorial, we will show you how to generate PDF from HTML page using JavaScript and jQuery and also save HTML page as PDF using JavaScript with live demo.

Video demonstration of the complete source code to download HTML page as PDF using JS is here,

Steps to Download HTML Page as PDF Using JavaScript

  • Include jQuery and jsPDF library by using their CDN link.
  • Create an HTML content div.
  • Instantiate jsPDF class.
  • Create button click function to generate and download PDF from HTML.
  • Live Demo

Include jQuery and jsPDF Library

Here we include jQuery and jsPDF library for using jsPDF class and jQuery for button click and get data from the div.

Note: You do not have to download complete jsPDF package from official website. In CDN link all the required functions are available.

Create an HTML Content Div With CSS

Here we create an HTML table with some design by CSS and also create a button where user can click and download HTML page as PDF.

Also Read: Export MySQL Data to Excel in PHP Using Ajax

Instantiate jsPDF Class

The following line of jsPDF code instantiate and use the jsPDF object in JavaScript.

JavaScript Code to Generate PDF From HTML

Code Highlights:

  • First, we Instantiate jsPDF Class.
  • After that, by using #editor id attribute of HTML div we take the HTML page data.
  • Now we use the button id attribute #generatePDF for click event.
  • By using doc object with fromHTML() function we set width, margins left(15) and margin top(15) .
  • At last save() with doc object is used to download the PDF from the HTML.

Live Demo To Generate PDF From HTML Using JavaScript

See the Pen Generate PDF From HTML JavaScript by Bikash Panda (@phpcodertech) on CodePen.

This is the complete explanation of how to download HTML page as PDF using JavaScript and jQuery by using jsPDF libaray. If you got any issue at the time of implementation please do comment below.

Do check more stuff by jsPDF here

Also Check:

Happy Coding..!

Was this article helpful?
My name is Bikash Kr. Panda. I own and operate PHPCODER.TECH. I am a web Programmer by profession and working on more than 50 projects to date. Currently I am working on the web-based project and all the CMS and frameworks which are based on PHP.
Posts created 188

6 thoughts on “Download HTML Page as PDF Using JavaScript

  1. I have been playing with this and unable to get an image to appear in the pdf from the webpage.
    Image loads on the webpage but nothing appears on the pdf.
    Any help appreciated

Leave a Reply

Your email address will not be published.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top