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

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

<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>

<table>

<thead>

<tr>

<th>Country</th>

</tr>

</thead>

<tbody>

<tr>

<td>New Zealand</td>

</tr>

<tr>

<td>Steve</td>

<td>Australia</td>

</tr>

<tr>

<td>United Kingdom</td>

</tr>

<tr>

<td>Hamish</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

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';
}

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

import jsPDF from 'jspdf';

1	import jsPDF from 'jspdf';

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

generatePDF(){
    let pdf = new jsPDF()

    pdf.html(this.el.nativeElement,{
      callback:(pdf) => {
        pdf.save("output.pdf")
      }
    })
  }

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

td{
    background-color: aqua;
}

tr{
    background-color: brown;
}

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

Get Started

Making the HTML5 Table in Angular Template File

Writing TypeScript Code

Targeting DOM Element

Leave a Reply Cancel reply