Converting dynamic table data in PDF file with the jsPdf module, you can easily download or open in a browser window.
This tutorial is for those who have been looking at all over the internet for knowing. How to implement and use the jspdf package in the Angular application? Creating a PDF document from table data is effortless with this tutorial.
The jspdf-autotable library is good for creating PDF files of HTML, JSON Data, and Images. Using it once will never let you forget the resonance of its notability.
You must have sometimes noticed we expect to download some important information from the site we visit. Well, downloading a PDF document is a good idea. It helps you scan the necessary information.
Let’s begin implementing jsPdf in angular.
Create new Angular project
With the help of angular CLI, install a brand new angular project.
$ ng new angular-jspdf-example
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS
Head over to project root:
cd angular-jspdf-example
Disable Strict Angular TypeStrict Errors
The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false
, "noImplicitReturns": false
and "strictTemplates": false
inside the compilerOptions and angularCompilerOptions in tsconfig.json file.
Install Third-Party Packages
We need to install both the packages jspdf
and jspdf-autotable
.
npm install jspdf jspdf-autotable faker --save
"scripts": [
"node_modules/jspdf/dist/jspdf.min.js",
"node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
]
Export to PDF in Angular
Head over to the angular component, i am talking about that one with which you have to establish the consensus. Its better to go with the default app component.
Also, import the JavaScript packages in the component rather than the app module.
All the following code goes into the app.component.ts file to:
import * as jsPDF from 'jspdf';
import 'jspdf-autotable';
Create header
and tableData
data:
header = [['ID', 'Name', 'Email', 'Profile']]
tableData = [
[1, 'John', 'john@yahoo.com', 'HR'],
[2, 'Angel', 'angel@yahoo.com', 'Marketing'],
[3, 'Harry', 'harry@yahoo.com', 'Finance'],
[4, 'Anne', 'anne@yahoo.com', 'Sales'],
[5, 'Hardy', 'hardy@yahoo.com', 'IT'],
[6, 'Nikole', 'nikole@yahoo.com', 'Admin'],
[7, 'Sandra', 'Sandra@yahoo.com', 'Sales'],
[8, 'Lil', 'lil@yahoo.com', 'Sales']
]
All the conjugated code will look something like this in app.component.ts file.
// app.component.ts
import { Component } from '@angular/core';
import * as jsPDF from 'jspdf';
import 'jspdf-autotable';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
header = [['ID', 'Name', 'Email', 'Profile']]
tableData = [
[1, 'John', 'john@yahoo.com', 'HR'],
[2, 'Angel', 'angel@yahoo.com', 'Marketing'],
[3, 'Harry', 'harry@yahoo.com', 'Finance'],
[4, 'Anne', 'anne@yahoo.com', 'Sales'],
[5, 'Hardy', 'hardy@yahoo.com', 'IT'],
[6, 'Nikole', 'nikole@yahoo.com', 'Admin'],
[7, 'Sandra', 'Sandra@yahoo.com', 'Sales'],
[8, 'Lil', 'lil@yahoo.com', 'Sales']
]
generatePdf() {
var pdf = new jsPDF();
pdf.setFontSize(2P);
pdf.text('Angular PDF Table', 11, 8);
pdf.setFontSize(12);
pdf.setTextColor(99);
(pdf as any).autoTable({
head: this.header,
body: this.tableData,
theme: 'plain',
didDrawCell: data => {
console.log(data.column.index)
}
})
// Open PDF document in browser's new tab
pdf.output('dataurlnewwindow')
// Download PDF doc
pdf.save('table.pdf');
}
}
To change the looks of the theme, you get the three options, and those are "striped"
"grid"
and "plain"
.
Finally, we have to create a button that does the magic, binds it with an angular click event.
<button (click)="generatePdf()">Generate PDF</button>
Finally, the Angular PDF tutorial is over; you can try your hands on more PDF customization try jsPDF-AutoTable examples.
Lastly, you can test the application.
ng serve --open