How to Save HTML Page as PDF Using JavaScript | How to download html div content in pdf file using javascript.
In this post, we will be learning how to save html page as PDF file using javascript, where basically we are downloading a html div content from a html page as PDF using javascript.
Save HTML Page or Div content data as PDF using javascript.
To save an HTML page as PDF, use the JavaScript libraries “jspdf” with “html2canvas”. jspdf is a JavaScript-based open-source library for creating PDF documents. It offers several possibilities for creating PDF files with specific characteristics. It includes a variety of plugins to support various methods of PDF creation, while html2canvas is a JavaScript library that generates a view from the data on the page.
So guys, lets it started.
Step 1: Create a HTML page named "index.html" with some content in it as follows:
in this index.html file I paste the html table with eg. bill data.
<div id="myBillingArea">
<table style="width:100%;" cellpadding="5">
<thead>
<tr>
<th align="start" style="border-bottom: 1px solid #ccc;" width="5%">ID</th>
<th align="start" style="border-bottom: 1px solid #ccc;">Product Name</th>
<th align="start" style="border-bottom: 1px solid #ccc;" width="10%">Price</th>
<th align="start" style="border-bottom: 1px solid #ccc;" width="10%">Quantity</th>
<th align="start" style="border-bottom: 1px solid #ccc;" width="15%">Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border-bottom: 1px solid #ccc;">1</td>
<td style="border-bottom: 1px solid #ccc;">Lenovo idea gaming</td>
<td style="border-bottom: 1px solid #ccc;">53,000</td>
<td style="border-bottom: 1px solid #ccc;">1</td>
<td style="border-bottom: 1px solid #ccc;">53,000 </td>
</tr>
<tr>
<td style="border-bottom: 1px solid #ccc;">2</td>
<td style="border-bottom: 1px solid #ccc;">Mi Note 8 Pro</td>
<td style="border-bottom: 1px solid #ccc;">16,000</td>
<td style="border-bottom: 1px solid #ccc;">1</td>
<td style="border-bottom: 1px solid #ccc;">16,000 </td>
</tr>
<tr>
<td colspan="4" align="end" style="font-weight: bold;">Grand Total: </td>
<td colspan="1" style="font-weight: bold;">69,000</td>
</tr>
</tbody>
</table>
</div>
Step 2: Add the below button in your index.html file
<button type="button" onclick="downloadPDF()">Download PDF</button>
Step 3: Link the CDN Links of "jspdf" & "html2cancas" library as given below
Paste these cdn links inside <head> </head> (oepn & close head tag) Tags OR paste these 2 links just before the </body> (end of body tag) Tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
Step 4: Add the below script to download HTML Page as PDF:
window.jsPDF = window.jspdf.jsPDF;
var docPDF = new jsPDF();
function downloadPDF(invoiceNo){
var elementHTML = document.querySelector("#myBillingArea");
docPDF.html(elementHTML, {
callback: function(docPDF) {
docPDF.save(invoiceNo+'.pdf');
},
x: 15,
y: 15,
width: 170,
windowWidth: 650
});
}
That's it guys. you are all set to go.