Skip to content

Coding Shiksha

Menu
  • Home
  • Youtube Channel
  • Online Store
  • Online Tools
  • Donate Us
  • Sitemap
  • Privacy Policy
Menu

Angular 13 jsPDF Project to Export HTML Div,Table With CSS to PDF Document Using TypeScript

Posted on October 29, 2022

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

 

 

TypeScript
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

 

 

TypeScript
1
import jsPDF from 'jspdf';

 

 

Now we will be converting the parent div element and exporting to pdf document as shown below

 

 

TypeScript
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

 

 

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

 

 

 

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

©2023 Coding Shiksha | Design: Newspaperly WordPress Theme