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.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

1 2	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

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

<style>  
  table {  
    font-family: arial, sans-serif;  
    border-collapse: collapse;  
    width: 50%;
    margin: 0px auto;
  }
  #htmlContent{
    text-align: center;
  }  
  td, th, button {  
    border: 1px solid #dddddd;  
    text-align: left;  
    padding: 8px;  
  }  
  button {  
    border: 1px solid black;   
  } 
  tr:nth-child(even) {  
    background-color: #dddddd;  
  }  
</style>  
<div id="htmlContent">
  <h2 style="color: #0094ff">Hello</h2>  
  <h3>About this Code:</h3>  
  <p>Demo of how to convert and Download HTML page to PDF file with CSS, using JavaScript and jQuery.</p>  
  <table>  
    <tbody>  
      <tr>  
        <th>Person</th>  
        <th>Contact</th>  
        <th>Country</th>  
      </tr>  
      <tr>  
        <td>John</td>  
        <td>+2345678910</td>  
        <td>Germany</td>  
      </tr>  
      <tr>  
        <td>Jacob</td>  
        <td>+1234567890</td>  
        <td>Mexico</td>  
      </tr>  
      <tr>  
        <td>Eleven</td>  
        <td>+91234567802</td>  
        <td>Austria</td>  
      </tr>  
    </tbody>  
  </table>    
</div>
<div id="editor"></div>
<center>
  <p>
    <button id="generatePDF">generate PDF</button>
  </p>
</center>

<style>

table {

font-family: arial, sans-serif;

border-collapse: collapse;

width: 50%;

margin: 0px auto;

}

#htmlContent{

text-align: center;

}

td, th, button {

border: 1px solid #dddddd;

text-align: left;

padding: 8px;

}

button {

border: 1px solid black;

}

tr:nth-child(even) {

background-color: #dddddd;

}

</style>

<h2 style="color: #0094ff">Hello</h2>

<h3>About this Code:</h3>

<p>Demo of how to convert and Download HTML page to PDF file with CSS, using JavaScript and jQuery.</p>

<table>

<tbody>

<tr>

<th>Person</th>

<th>Contact</th>

<th>Country</th>

</tr>

<tr>

<td>Germany</td>

</tr>

<tr>

<td>Jacob</td>

<td>Mexico</td>

</tr>

<tr>

<td>Eleven</td>

<td>Austria</td>

</tr>

</tbody>

</table>

</div>

<p>

<button id="generatePDF">generate PDF</button>

</p>

</center>

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.

var doc = new jsPDF();

1	var doc = new jsPDF();

JavaScript Code to Generate PDF From HTML

<script type="text/javascript">
var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};


$('#generatePDF').click(function () {
    doc.fromHTML($('#htmlContent').html(), 15, 15, {
        'width': 700,
        'elementHandlers': specialElementHandlers
    });
    doc.save('sample_file.pdf');
});
</script>

var doc = new jsPDF();

var specialElementHandlers = {

'#editor': function (element, renderer) {

return true;

}

};

$('#generatePDF').click(function () {

doc.fromHTML($('#htmlContent').html(), 15, 15, {

'width': 700,

'elementHandlers': specialElementHandlers

});

doc.save('sample_file.pdf');

});

</script>

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”

What is ngrok, How to install and Use ngrok on Windows? says:

June 23, 2021 at 5:10 pm

[…] Download HTML Page as PDF Using JavaScript […]

Trigger Submit Button By Pressing Enter Key in JavaScript And JQuery says:

June 25, 2021 at 1:01 am

[…] Download HTML Page as PDF Using JavaScript June 20, 2021 […]

Download HTML Page as PDF Using JavaScript – Trongate PHP Framework Information says:

August 19, 2021 at 4:13 pm

[…] Source link […]

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

September 3, 2021 at 12:41 am

[…] Also Read: Download HTML Page as PDF Using JavaScript […]

Matthew says:

February 2, 2022 at 2:53 am

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

deepak says:

April 1, 2022 at 3:04 pm

sir i have issue , when download the pdf data is not displaying.

Download HTML Page as PDF Using JavaScript

Steps to Download HTML Page as PDF Using JavaScript

Include jQuery and jsPDF Library

Create an HTML Content Div With CSS

Instantiate jsPDF Class

JavaScript Code to Generate PDF From HTML

Code Highlights:

Live Demo To Generate PDF From HTML Using JavaScript

Also Check:

By Bikash

Related Post

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

Leave a Reply Cancel reply

You Missed

5 Most Effective Ways To Optimize PHP Code

Debugging in PHP: A Comprehensive Guide with Examples

3 popular ways to make HTTP requests in JavaScript

PHP: Logout From All Devices on Password Change