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 exporting an HTML page to a PDF on the user’s click event using JavaScript functionality. 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 pages as PDF using JavaScript.

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

A 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 a 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 getting data from the div.

Note: You do not have to download the complete jsPDF package from the official website. In the 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 the user can click and download the HTML page as a PDF.

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

Instantiate jsPDF Class

The following line of jsPDF code instantiates and uses the jsPDF object in JavaScript.

JavaScript Code to Generate PDF From HTML

Code Highlights:

  • First, we Instantiate jsPDF Class.
  • After that, by using the #editor id attribute of the HTML div we take the HTML page data.
  • Now we use the button id attribute #generatePDF for the click event.
  • By using the doc object with fromHTML() function we set width, margins left(15) and margin top(15) .
  • At last save() with the doc, the 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 an HTML page as a PDF using JavaScript and jQuery by using jsPDF library. If you got any issues at the time of implementation please do comment below.

Do check more stuff by jsPDF here

Also Check:

Happy Coding..!

Was this article helpful?

By Bikash

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.

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. Required fields are marked *