Welcome folks today in this blog post we will be exporting html div table with css
to pdf document 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 commands as shown below
ng new pdfapp
cd pdfapp
Now you need to install the dependencies for our angular project. For this project we will only need the jspdf
library as shown below
npm i jspdf
As you can see we are installing the jspdf
library using the npm
command as shown above.
Making the HTML5 Table in Angular Template File
Now we will be modifying the code inside the app.comonent.html
file you need to copy paste the below code
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 30 31 32 33 34 |
<div id="content" #content> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>25</td> <td>New Zealand</td> </tr> <tr> <td>Steve</td> <td>26</td> <td>Australia</td> </tr> <tr> <td>Finn</td> <td>29</td> <td>United Kingdom</td> </tr> <tr> <td>Hamish</td> <td>32</td> <td>United States</td> </tr> </tbody> </table> <button (click)="generatePDF()">Generate PDF</button> </div> |
As you can see we are rendering the simple html5
table and we are attaching the id
content and also we have the button to generate the pdf document and we are binding the onclick
event using the attribute. We are executing the function called generatePDF()
method. Now we need to define this function inside the app.component.ts
file of your angular project.
Now if you open the angular
app by executing the below command as shown below
ng serve
As you can see we are starting out the angular app at the port number 4200. Now if you open the app in the browser you will see the below table as shown below
Writing TypeScript Code
Now we will be defining the typescript code to generate the pdf document and we will be writing the below function as shown below
Targeting DOM Element
First of all we will be targeting the parent div DOM Element inside the typescript using the ViewChild and ElementRef Library as shown below
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Component, ElementRef, ViewChild } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { @ViewChild('content',{static:false}) el!: ElementRef title = 'pdfapp'; } |
As you can see we are importing the ElementRef and ViewChild libraries from the component base library. And then we are targeting the parent div element using it’s id which is called as content as you can see above.
And now we will be writing the function to export the html table
to pdf document. We have binded the function called generatePDF()
in app.component.html file
First of all we have to import the jspdf
library in the angular project as shown below
1 |
import jsPDF from 'jspdf'; |
Now we will be converting the parent
div element and exporting to pdf document as shown below
1 2 3 4 5 6 7 8 9 |
generatePDF(){ let pdf = new jsPDF() pdf.html(this.el.nativeElement,{ callback:(pdf) => { pdf.save("output.pdf") } }) } |
As you can see above in the function we are creating a new reference of jsPDF()
constructor. And then we are calling the html()
method and inside the method we are passing the parent div
element reference and in the callback function we got the pdf document and then we are using the save()
method to download the pdf document as an attachment with a custom filename.
Now if you open the app in the browser and click the button the pdf file will be generated as shown below
As you can see the html5
table has been successfully exported to pdf document. All the columns and rows alongside with the button also. Now we will be adding some css to the table for this you need to copy paste the below css
code inside the app.component.css
file as shown below
app.component.css
1 2 3 4 5 6 7 |
td{ background-color: aqua; } tr{ background-color: brown; } |
Now you will seeing the html table exported to pdf document with css styles as shown below