How To Export PDF In Angular

Data = [  
    { Id: 101, Name: 'Nitin', Salary: 1234 },  
    { Id: 102, Name: 'Sonu', Salary: 1234 },  
    { Id: 103, Name: 'Mohit', Salary: 1234 },  
    { Id: 104, Name: 'Rahul', Salary: 1234 },  
    { Id: 105, Name: 'Kunal', Salary: 1234 }  
  ]; 

<h1>This is an Angular App!</h1>    
<div>    
    <table>    
        <tr>    
            <th>Id</th>    
            <th>Name</th>    
            <th>Salary</th>    
        </tr>    
        <tr *ngFor="let item of Data">    
            <th>{{item.Id}}</th>    
            <th>{{item.Name}}</th>    
            <th>{{item.Salary}}</th>    
        </tr>    
    </table>    
</div>

<div class="container">  
    <table class="table table-dark">  
        <tr>  
            <th>Id</th>  
            <th>Name</th>  
            <th>Salary</th>  
        </tr>  
        <tr *ngFor="let item of Data">  
            <th>{{item.Id}}</th>  
            <th>{{item.Name}}</th>  
            <th>{{item.Salary}}</th>  
        </tr>  
    </table>

Step 7

Add a button to download this table as a pdf.

<input type="button" value="Download PDF" class="btn btn-success" (click)="SavePDF()"> 

Also, add a click event handler for this button in your app.component.ts like,

public SavePDF():void{  
  
}

Step 8

Now Add jspdf and @types/jspdf in your application using the following command,

“npm install jspdf --save”

and

“npm install @types/jspdf --save-dev”

Step 9

Give a ref name and id to that HTML element you need to export as PDF and get the ref of that HTML element in your component using @ViewChild, like,

<div class="container" id="content" #content>  
  
 @ViewChild('content') content:ElementRef; 

Step 10

Now at this last step, you have to write the following code in your button click handler function, where we create a jspdf variable as doc and configured it with some required permeates like Doc width, margin, and content,

import * as jsPDF from 'jspdf';  
public SavePDF(): void {  
    let content=this.content.nativeElement;  
    let doc = new jsPDF();  
    let _elementHandlers =  
    {  
      '#editor':function(element,renderer){  
        return true;  
      }  
    };  
    doc.fromHTML(content.innerHTML,15,15,{  
  
      'width':190,  
      'elementHandlers':_elementHandlers  
    });  
  
    doc.save('test.pdf');  
  } 

Now serve your application “ng serve --o” and your output must be like this,

Click on the Download PDF button and get the file.

Full Code

App.component.html

<div class="container">  
    <h1>This is an Angular App!</h1>  
    <input type="button" value="Download PDF" class="btn btn-success" (click)="SavePDF()">  
    <br/><br/>  
    <div class="container" id="content" #content>  
        <table class="table table-dark">  
            <tr>  
                <th>Id</th>  
                <th>Name</th>  
                <th>Salary</th>  
            </tr>  
            <tr *ngFor="let item of Data">  
                <th>{{item.Id}}</th>  
                <th>{{item.Name}}</th>  
                <th>{{item.Salary}}</th>  
            </tr>  
        </table>  
    </div>  
</div>

App.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';  
import * as jsPDF from 'jspdf';  
  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
  
export class AppComponent {  
  title = 'app';  
  Data = [  
    { Id: 101, Name: 'Nitin', Salary: 1234 },  
    { Id: 102, Name: 'Sonu', Salary: 1234 },  
    { Id: 103, Name: 'Mohit', Salary: 1234 },  
    { Id: 104, Name: 'Rahul', Salary: 1234 },  
    { Id: 105, Name: 'Kunal', Salary: 1234 }  
  ];  
  
  @ViewChild('content') content: ElementRef;  
  public SavePDF(): void {  
    let content=this.content.nativeElement;  
    let doc = new jsPDF();  
    let _elementHandlers =  
    {  
      '#editor':function(element,renderer){  
        return true;  
      }  
    };  
    doc.fromHTML(content.innerHTML,15,15,{  
  
      'width':190,  
      'elementHandlers':_elementHandlers  
    });  
  
    doc.save('test.pdf');  
  }  
}

I hope it’ll work for you, keep sharing.