How To Export PDF In Angular

Exporting an HTML element is like a snapshot for sharing some information in the form of documents, and it may be used for reporting too. So, if you need to save as a PDF or want to take a print-out of any other HTML elements like Table, Div or any Grid in Angular, you can do that easily.

Follow the steps for an example of how to do a  PDF Export.

Step 1

Create an Angular application using CLI or any other method you want.

Step 2

Open this application code in any editor like Visual Studio Code.

Step 3

For demo grid data, declare a variable with some sample data.

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

Step 4

Bind that data with an HTML table or any element, this must how you want your PDF Document. In my app.component.html, I just replaced the default HTML with the following HTML code. In this code, I bind that data variable from my component to this table.

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

Now serve your Angular App in the browser using “ng serve --o”, this will be the default output.

How to Export PDF in Angular 

I know this is not the output that you want to download, so use the formatting and modify this as you need. In my Demo App, I’ll use bootstrap just for a simple table format.

Step 5

Add Bootstrap using CLI in your project and apply the “table table-dark” class on that HTML table. Use the following CLI command to add bootstrap in your project,

“npm install bootstrap –save”

Step 6

After adding bootstrap in your application, apply the required bootstrap classes like this,

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

And now output must be like this,

How to Export PDF in Angular 

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,

How to Export PDF in Angular

Click on the Download PDF button and get the file.

How to Export PDF in Angular

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. 


Similar Articles