Convert HTML to PDF Using JavaScript

Parvez Alam
3 min readFeb 6, 2023

This tutorial help to convert HTML to PDF using javascript. You can use this snippet in jsp, asp.net or any other server-side programming language that supports HTML and javascript.

There are many JS libraries to convert HTML code into PDF files. It is basically used to generate report from the page to HTML View.

PDF File

PDF file format is very useful to download bulk data in the web application. It helps the user to download dynamic content in file format for offline use.

jsPDF is one of the best libraries to convert HTML to PDF using JavaScript.

How To Convert HTML To PDF Using JavaScript

Let’s create an HTML Page and convert this HTML to PDF. We’ll add the following code to your HTML page.

Setp1: Include jspdf into the head section of the file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script> or <script src="js/jsPDF/dist/jspdf.umd.js"></script>

You don’t need to download the jsPDF library separately, all the required files are included in our source code package.

Let’s initiate the jsPDF class and use the jsPDF object in JavaScript.

window.jsPDF = window.jspdf.jsPDF; var doc = new jsPDF();

Create an HTML table that’ll have all content that needs to export in a pdf file.

<html> <h1>How To Convert HTML To PDF Using JavaScript - js-tutorials.com</h1> <form class="form" id="content"> <table> <tbody> <tr> <th>Id</th> <th>Name</th> <th>Salary</th> </tr> <tr> <td>1</td> <td>David</td> <td>1234</td> </tr> <tr> <td>2</td> <td>Tewin</td> <td>2344</td> </tr> <tr> <td>3</td> <td>Renu</td> <td>4321</td> </tr> <tr> <td>4</td> <td>Messi</td> <td>45632</td> </tr> </tbody> </table> </form> </html>

Now, I’ll write some javascript code to export content in pdf.

window.jsPDF = window.jspdf.jsPDF; var doc = new jsPDF(); // Source HTMLElement or a string containing HTML. var elementHTML = document.querySelector("#content"); doc.html(elementHTML, { callback: function(doc) { // Save the PDF doc.save('sample-document.pdf'); }, x: 15, y: 15, width: 170, //target width in the PDF document windowWidth: 650 //window width in CSS pixels });

Useful jsPDF Configurations

The jsPDF library provides various methods and options to configure PDF creation. Some of the useful methods of jsPDF class are as follows:

PDF orientation

The orientation attribute is used to set page orientation.

var doc = new jsPDF({ orientation: 'landscape' });

Change Font in PDF

The setFont() method is used to set text font size.

doc.setFont("courier", "normal");

Pagination

The autoPaging option helps to break PDF documents into multiple pages automatically.

autoPaging: 'text'

How To Image in PDF

The addImage() method is used to add images to PDF using the jsPDF object.

doc.addImage("path/to/profile.jpg", "JPEG", 15, 40, 180, 180);

Generate HTML to PDF on click of a Button

The file will use to generate a pdf from html table using jspdf. We are using html2canvas library is required to convert HTML content (with images) to PDF documents.

<!DOCTYPE html> <html lang="en"> <head> <h1>How To Convert HTML To PDF Using JavaScript - js-tutorials.com</h1> <!-- html2canvas library --> <script src="js/html2canvas.min.js"></script> <!-- jsPDF library --> <script src="js/jsPDF/dist/jspdf.umd.js"></script> <script> window.jsPDF = window.jspdf.jsPDF; var doc = new jsPDF(); function generate_pdf() { // Source HTMLElement or a string containing HTML. var elementHTML = document.querySelector("#content"); doc.html(elementHTML, { callback: function(doc) { // Save the PDF doc.save('sample-document.pdf'); }, x: 15, y: 15, width: 170, //target width in the PDF document windowWidth: 650 //window width in CSS pixels }); } </script> </head> <body> <form class="form" id="content"> <table> <tbody> <tr> <th>Id</th> <th>Name</th> <th>Salary</th> </tr> <tr> <td>1</td> <td>David</td> <td>1234</td> </tr> <tr> <td>2</td> <td>Tewin</td> <td>2344</td> </tr> <tr> <td>3</td> <td>Renu</td> <td>4321</td> </tr> <tr> <td>4</td> <td>Messi</td> <td>45632</td> </tr> </tbody> </table><br> <input type="button" id="generate_pdf" value="Generate PDF"> </form> </body> </html>

Originally published at https://www.js-tutorials.com on February 6, 2023.

--

--

Parvez Alam

Hey, I am Parvez Alam. A software developer since 2009. I love learning and sharing knowledge. https://www.phpflow.com/