Skip to content
Home » Download HTML Page as PDF Using JavaScript

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 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 https://mrrio.github.io/jsPDF/.

Also Check:

Happy Coding..!

Was this article helpful?
YesNo

6 thoughts on “Download HTML Page as PDF Using JavaScript”

  1. Pingback: What is ngrok, How to install and Use ngrok on Windows?

  2. Pingback: Trigger Submit Button By Pressing Enter Key in JavaScript And JQuery

  3. Pingback: Download HTML Page as PDF Using JavaScript – Trongate PHP Framework Information

  4. Pingback: Convert URL to PDF And Print Using JavaScript - PHPCODER.TECH

  5. 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 *