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

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

<style>

td{

background-color:orange

}

</style>

<table>

<thead>

<tr>

<th>Country</th>

</tr>

</thead>

<tbody>

<tr>

<td>New Zealand</td>

</tr>

<tr>

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

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")
      }
    })
  }
}

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.