Welcome folks today in this blog post we will be exporting html table and div
to pdf document using jspdf library in angular 14 using typescript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command
ng new sampleproject
cd sampleproject
Now we need to install the jspdf
library using the below command
npm i jspdf
After this you need to copy paste the below html
code inside the app.component.html
file as shown below
app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<style> td{ background-color:orange } </style> <div id="content" #content> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>23</td> <td>New Zealand</td> </tr> <tr> <td>Smith</td> <td>24</td> <td>Australia</td> </tr> </tbody> </table> </div> <button (click)="makePdf()">Generate PDF</button> |
As you can see that guys in the above html code we have declared a simple table inside this we have two rows and three columns and then we are also attaching the id or reference to the table so that we can track it inside the typescript file. And then we have the button to export this html5
table to pdf document. We have binded a onclick listener to the button which is makePdf()
we need to write this function in the below file of app.component.ts
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { Component, ElementRef, ViewChild } from '@angular/core'; import jsPDF from 'jspdf'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { @ViewChild('content', { static: false }) el!: ElementRef; title = 'angularpdfgenerator'; makePdf() { let pdf = new jsPDF() pdf.html(this.el.nativeElement, { callback: (pdf) => { pdf.save("sample.pdf") } }) } } |
As you can see we are importing the jsPDF
library at the very top and then we are declaring a new pdf document and then we are calling te html()
method and in this method we are passing the reference of the table
which is the id
that we have given in the app.component.html
file. It will copy paste all the html which is there to this method and lastly we are exporting this html5 table data to the pdf document.