Angular 9|8|7 Convert Tables into PDF File using jspdf-autotable Example

Angular tutorial to convert Tabular data into download document of PDF type.

We can convert dynamic data into a table using a jsPDF Autotable library which can be converted into a PDF file to download or open in a new browser tab.

In this article, we will learn How to install and use the jspdf-autotable in the Angular 8/9 project to create a PDF document of JSON object data in the form of a table.

The jspdf-autotable package use jsPDF library which is a very well known and popular library to create PDF files of HTML, Images and JSON data.

Sometimes a user may need to download the data presented on an application page to be downloaded in a PDF file so this plugin resolves those tasks very easily.

Let’s get started to implement the jspdf-autotable in our Angular application.

Version Check:
Angular CLI: 9.0.6
Node: 12.15.0

Create an Angular project

Using NG CLI create new Angular project by running the following command:

$ ng new jspdf-autotable-demo
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS</pre>
Move to project root:
<pre class="wp-block-prismatic-blocks"><code class="language-javascript">$ cd jspdf-autotable-demo</pre>
<h3></h3>
<h3>Install Packages and Types</h3>
Run following NPM commands to install the <code>jspdf and jspdf-autotable libraries
$ npm install jspdf jspdf-autotable faker --save</pre>
Now open the <strong>angular.json</strong> file at project root to update <code>scripts property array with JS libraries:
            "scripts": [
              "node_modules/jspdf/dist/jspdf.min.js",
              "node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
            ]
Adding Table PDF downloader
Next, move to the component where we want to add this functionality. Here for the sake of simplicity, we are implementing in App component.
Open the app.component.ts file to make the following changes:
As we are using JS libraries, we don't need to import them in the App module. Just import them in the component as shown below:

import * as jsPDF from 'jspdf';
import 'jspdf-autotable';

Define head and table data definition:
  head = [['ID', 'Country', 'Rank', 'Capital']]

  data = [

    [1, 'Finland', 7.632, 'Helsinki'],

    [2, 'Norway', 7.594, 'Oslo'],

    [3, 'Denmark', 7.555, 'Copenhagen'],

    [4, 'Iceland', 7.495, 'Reykjavík'],

    [5, 'Switzerland', 7.487, 'Bern'],

    [9, 'Sweden', 7.314, 'Stockholm'],

    [73, 'Belarus', 5.483, 'Minsk'],

  ]</pre>

Add the <code>createPDF method which will create a table them download it as a PDF document:
  createPdf() {

    var doc = new jsPDF();

    doc.setFontSize(18);

    doc.text('My PDF Table', 11, 8);

    doc.setFontSize(11);

    doc.setTextColor(100);







    (doc as any).autoTable({

      head: this.head,

      body: this.data,

      theme: 'plain',

      didDrawCell: data => {

        console.log(data.column.index)

      }

    })
    // Open PDF document in new tab

    doc.output('dataurlnewwindow')
    // Download PDF document

    doc.save('table.pdf');

  }

</pre>

The complete <strong>app.component.ts</strong> file will look this:

<pre class="wp-block-prismatic-blocks"><code class="language-javascript">// 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 {

  title = 'jspdf-autotable-demo';







  head = [['ID', 'Country', 'Rank', 'Capital']]
  data = [

    [1, 'Finland', 7.632, 'Helsinki'],

    [2, 'Norway', 7.594, 'Oslo'],

    [3, 'Denmark', 7.555, 'Copenhagen'],

    [4, 'Iceland', 7.495, 'Reykjavík'],

    [5, 'Switzerland', 7.487, 'Bern'],

    [9, 'Sweden', 7.314, 'Stockholm'],

    [73, 'Belarus', 5.483, 'Minsk'],

  ]
  createPdf() {

    var doc = new jsPDF();
    doc.setFontSize(18);

    doc.text('My PDF Table', 11, 8);

    doc.setFontSize(11);

    doc.setTextColor(100);
    (doc as any).autoTable({

      head: this.head,

      body: this.data,

      theme: 'plain',

      didDrawCell: data => {

        console.log(data.column.index)

      }

    })
    // Open PDF document in new tab

    doc.output('dataurlnewwindow')
    // Download PDF document

    doc.save('table.pdf');

  }
}

</pre>

In the App template just a <code>button element to call the createPDF method:

<button (click)="createPdf()">Create PDF</button></pre>

That's it now you can run the application by executing <code>$ ng serve --open npm command.


Table Themes:
There are three themes available for the table to be added in theme property above: 'plain', 'grid' and 'plain'
You can check more demos and examples of the official sites and implement the same in Angular application.
 
 
 
Category: Angular