Introduction.
While developing web applications we may need to create PDF files containing some text, graphs, or many more things. But do you know how it converts the content to PDF? In this post, we will learn the same thing. There are two options to create PDF files in web applications. The first one is a server-side script and the other one is a client-side script. But In this post, we will make the pdf file by using client-side script using JSPDF autotable. will create one HTML table and convert it into PDF using JPSF autotable library.
What is JsPDF?
JPSDF is an open-source client-side library for creating PDF files using Javascript. There are various Javascript libraries for creating PDF files but this is one of the most popular libraries for creating PDF files using Javascript. It has many options and plugins to create a fully featured PDF.
What is JsPDF Autotable?
This autotable plugin adds the ability to generate PDF tables either by parsing HTML tables or by using Javascript data directly. By using this library we can convert HTML tables to PDF or we can make tables in PDF directly. It supports customizing the appearance by defining table column structure and styles.
Below are the steps to convert an HTML table to a PDF in Javascript.
Step 1: Include jsPDF Library.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>
Step 2: Create HTML Table.
<table class="table table-bordered" id="table">
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>Mob. No.</th>
<th>Email Id</th>
</tr>
<tr>
<td>1</td>
<td>Alexa</td>
<td>8098098901</td>
<td>alexa@yahoo.com</td>
</tr>
<tr>
<td>2</td>
<td>Alexa</td>
<td>8098098901</td>
<td>alexa@yahoo.com</td>
</tr>
<tr>
<td>3</td>
<td>Alexa</td>
<td>8098098901</td>
<td>alexa@yahoo.com</td>
</tr>
<tr>
<td>4</td>
<td>Alexa</td>
<td>8098098901</td>
<td>alexa@yahoo.com</td>
</tr>
<tr>
<td>5</td>
<td>Alexa</td>
<td>8098098901</td>
<td>alexa@yahoo.com</td>
</tr>
</table>
Step 3: Create JSPdf Object.
var pdf = new jsPDF();
Step 4 : Add HTML Table Reference.
pdf.autoTable({ html: '#table' })
Now we will integrate all of the above steps into one place.
Step 5: Complete Code.
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" >
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>
</head>
<body>
<table class="table table-bordered" id="table">
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>Mob. No.</th>
<th>Email Id</th>
</tr>
<tr>
<td>1</td>
<td>Alexa</td>
<td>8098098901</td>
<td>alexa@yahoo.com</td>
</tr>
<tr>
<td>2</td>
<td>Alexa</td>
<td>8098098901</td>
<td>alexa@yahoo.com</td>
</tr>
<tr>
<td>3</td>
<td>Alexa</td>
<td>8098098901</td>
<td>alexa@yahoo.com</td>
</tr>
<tr>
<td>4</td>
<td>Alexa</td>
<td>8098098901</td>
<td>alexa@yahoo.com</td>
</tr>
<tr>
<td>5</td>
<td>Alexa</td>
<td>8098098901</td>
<td>alexa@yahoo.com</td>
</tr>
</table>
<button type="button" onclick="exportPdf()" class="btn btn-primary">Export To PDF</button>
</body>
<script>
function exportPdf(){
var pdf = new jsPDF();
pdf.text(20,20,"Employee Details");
pdf.autoTable({html:'#table',
startY: 25,
theme:'grid',
columnStyles:{
0:{cellWidth:20},
1:{cellWidth:60},
2:{cellWidth:40},
3:{cellWidth:60}
},
bodyStyles: {lineColor: [1, 1, 1]},
styles:{minCellHeight:10}
});
window.open(URL.createObjectURL(pdf.output("blob")))
}
</script>
</html>
Some Autotable Options:
| Option | Description |
| startY | We can set table starting Y position by using this option. |
| columnStyles | {&columnDataKey: StyleDef}, We can set different width for each column. |
| bodyStyles | We can change the default table style by using this option. |
| theme | We can change the table theme by using this option. Available Option : ‘striped’|’grid’|’plain’|’css’ = ‘striped’ |
| font | We can change the table theme by using this option. Example : ‘helvetica’|’times’|’courier’ = ‘helvetica’ |
You can find more options on below link.