Download HTML Page as PDF Using JavaScript

3 min readJun 20, 2021

Live Demo: https://phpcoder.tech/download-html-page-as-pdf-using-javascript/#Live_Demo_To_Generate_PDF_From_HTML_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 an 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 pages 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.

<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>

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

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

Instantiate jsPDF Class

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

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>

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

This is the complete explanation of how to download an HTML page as PDF using JavaScript and jQuery by using the 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..!

Originally published on: https://phpcoder.tech/download-html-page-as-pdf-using-javascript/