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