Angular PDF tutorial, export tabular data into a downloadable PDF document using the JSPDF package.

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

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