Welcome folks today in this blog post we will be exporting jsonplaceholder api
table to pdf document using jspdf-autotable library in typescript. All the full source code of the application is shown below.
Get Started
In order to get started you need to initialize a new angular project by following the below commands
ng new pdfproject
cd pdfproject
Now we need to install the libraries as shown below
npm i jspdf
npm i jspdf-autotable
npm i rxjs
After installing this dependencies now you need to go to app.module.ts
file of your proejct to include the httpclient
module as shown below
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { AppComponent } from "./app.component"; import { HttpClientModule } from "@angular/common/http"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, HttpClientModule], providers: [], bootstrap: [AppComponent] }) export class AppModule {} |
Now we need to edit the app.component.html
file of your angular project and copy paste the below code
app.component.html
1 2 3 |
<h1>Download pdf</h1> <button type="button" (click)="downloadPDF()">Descargar</button> |
As you can see we have a simple button and we have attached a onclick event listener to it. Whenever we click the button we need to execute the function called downloadPDF()
So now you need to go to app.component.ts
file and copy paste the below code
Before that just make a data.ts
file in the root directory to hold the datatype of the api response we will be receiving from jsonplaceholder api as shown below
data.ts
1 2 3 |
export class Data { constructor(public userId: string, public id: string, public title: string) {} } |
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import { Component, ViewChild } from "@angular/core"; import * as jspdf from "jspdf"; import "jspdf-autotable"; import { UserOptions } from "jspdf-autotable"; import { HttpClient } from "@angular/common/http"; import { Data } from "./data"; interface jsPDFWithPlugin extends jspdf { autotable: (options: UserOptions) => jspdf; } @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { title = "CodeSandbox"; public ListData = []; public columns = ["ID", "Name", "Country"]; public rows = []; constructor(public _http: HttpClient) {} ngOnInit() { this.getData().subscribe( result => { this.ListData = result as Data[]; //this.dataSource = new MatTableDataSource<Data>(this.ListData); /*this.dataSource.paginator = this.paginator; this.dataSource.sort = this.sort; */ for (var k = 0; k < this.ListData.length; k++) { this.rows.push([ this.ListData[k].userId, this.ListData[k].id, this.ListData[k].title ]); } }, error => { console.log("error"); } ); } getData() { return this._http.get("https://jsonplaceholder.typicode.com/posts"); } downloadPDF() { const doc = new jspdf("portrait", "px", "a4") as jsPDFWithPlugin; doc.autoTable(this.columns, this.rows); doc.save("test.pdf"); } } |
As you can see guys we are making a simple http
get request to the jsonplaceholder api and then we are getting the response and then we are displaying the response in the html5 table and then we are exporting that table to pdf document using autotable()
method. Now if you run the angular project in the browser it will look something as shown below