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

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

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

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

<h1>Download pdf</h1>

<button type="button" (click)="downloadPDF()">Descargar</button>

<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

export class Data {
  constructor(public userId: string, public id: string, public title: string) {}
}

export class Data {

constructor(public userId: string, public id: string, public title: string) {}

}

app.component.ts

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");
  }
}

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