Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Angular 14 jsPDF-Autotable Project to Export REST API JSONPlaceholder HTML5 Table to PDF Document in Browser Using TypeScript

Posted on December 17, 2022

 

 

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

 

 

TypeScript
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

 

TypeScript
1
2
3
export class Data {
  constructor(public userId: string, public id: string, public title: string) {}
}

 

 

app.component.ts

 

 

TypeScript
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

 

 

 

Recent Posts

  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Android Java Project to Download Random Image From Unsplash Using OkHttp & Picasso Library & Display it
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme