developerchandan
Create and Download a PDF Table in Angular using jsPDF and jspdf-autotable

Photo by Carl Heyerdahl on Unsplash

Create and Download a PDF Table in Angular using jsPDF and jspdf-autotable

Step-by-Step Guide to Building PDF Tables in Angular with jsPDF and jspdf-autotable

Chandan kumar's photo
Chandan kumar
·

6 min read

Learn how to generate a PDF from tabular data in Angular using jsPDF and jspdf-autotable. Follow our step-by-step guide to create a table, style it, and download the PDF with ease.

Below is a step-by-step guide (in a blog-style format) showing how to create an Angular application that generates and downloads a PDF containing a table using jsPDF and its companion library jspdf-autotable.

Overview

  1. Create a new Angular project (or use an existing one).

  2. Install jsPDF and jspdf-autotable.

  3. Create a component to display a table (or table data).

  4. Implement the PDF generation using jsPDF and jspdf-autotable.

  5. Add a button to trigger the PDF download.

Step 1: Create a New Angular Project

If you don’t already have an Angular application, you can create one using the Angular CLI:

npm install -g @angular/cli
ng new angular-pdf-table-app
cd angular-pdf-table-app

Once created, open your project in your favorite IDE (e.g., VSCode).

Step 2: Install Dependencies

From the root of your Angular project, install jspdf and jspdf-autotable:

npm install jspdf jspdf-autotable

Step 3: Set Up a Component

For simplicity, let’s create a component called PdfTableComponent that will contain a table of sample data and a button to generate the PDF.

Generate a new component:

ng generate component pdf-table

Your folder structure might look like this:

src
 ┣ app
 ┃ ┣ pdf-table
 ┃ ┃ ┣ pdf-table.component.ts
 ┃ ┃ ┣ pdf-table.component.html
 ┃ ┃ ┣ pdf-table.component.css
 ┃ ┃ ┗ pdf-table.component.spec.ts
 ┗ main.ts

Sample Data

In pdf-table.component.ts, let’s define a list of objects that we want to represent in our table:

import { Component } from '@angular/core';

@Component({
  selector: 'app-pdf-table',
  templateUrl: './pdf-table.component.html',
  styleUrls: ['./pdf-table.component.css'],
})
export class PdfTableComponent {
  // Sample data
  public people = [
    { name: 'John Doe', email: 'john@example.com', age: 30 },
    { name: 'Jane Smith', email: 'jane@example.com', age: 25 },
    { name: 'Michael Brown', email: 'michael@example.com', age: 28 },
  ];

  constructor() {}
}

In the component’s HTML (pdf-table.component.html), you could simply display the data in a regular table to preview what you have:

<h2>List of People</h2>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let person of people">
      <td>{{ person.name }}</td>
      <td>{{ person.email }}</td>
      <td>{{ person.age }}</td>
    </tr>
  </tbody>
</table>

Step 4: Implement the PDF Generation with jsPDF and jspdf-autotable

Next, we need to generate a PDF with a table using the jspdf-autotable plugin. In your pdf-table.component.ts, import and use these libraries:

import { Component } from '@angular/core';
// Import jsPDF and autoTable
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';

@Component({
  selector: 'app-pdf-table',
  templateUrl: './pdf-table.component.html',
  styleUrls: ['./pdf-table.component.css'],
})
export class PdfTableComponent {
  public people = [
    { name: 'John Doe', email: 'john@example.com', age: 30 },
    { name: 'Jane Smith', email: 'jane@example.com', age: 25 },
    { name: 'Michael Brown', email: 'michael@example.com', age: 28 },
  ];

  constructor() {}

  // This method triggers the PDF generation
  public downloadPDF(): void {
    // 1. Create a new jsPDF instance
    const doc = new jsPDF('p', 'mm', 'a4');

    // 2. Prepare the data for autoTable
    // Columns: array of objects with "header" and "dataKey"
    const columns = [
      { header: 'Name', dataKey: 'name' },
      { header: 'Email', dataKey: 'email' },
      { header: 'Age', dataKey: 'age' },
    ];

    // 3. Use autoTable plugin to generate the table
    autoTable(doc, {
      columns: columns,
      body: this.people,
      margin: { top: 20 },
      styles: { fontSize: 10 },
      theme: 'grid',
      headStyles: { fillColor: [22, 160, 133] }, // Example: custom color
    });

    // 4. Save or download the created PDF
    doc.save('people-table.pdf');
  }
}

Explanation

  1. Create jsPDF instance:
const doc = new jsPDF('p', 'mm', 'a4');

The parameters specify page orientation p (portrait), units mm, and format a4.

2. Define Table Columns:

const columns = [
  { header: 'Name', dataKey: 'name' },
  { header: 'Email', dataKey: 'email' },
  { header: 'Age', dataKey: 'age' },
];

These objects define how the columns should appear in the PDF.

3. Call autoTable:

autoTable(doc, {
  columns: columns,
  body: this.people,
  margin: { top: 20 },
  styles: { fontSize: 10 },
  theme: 'grid',
  headStyles: { fillColor: [22, 160, 133] },
});

  • doc is your jsPDF instance.

  • columns: what columns to use.

  • body: the data array (rows).

  • margin, styles, and headStyles let you adjust the layout and styling.

  • theme: 'grid' draws table borders.

4. Save the PDF:

doc.save('people-table.pdf');

Prompts the user to download the PDF file named "people-table.pdf".

Step 5: Add a Button to Trigger PDF Download

Add a button in your pdf-table.component.html that calls downloadPDF() when clicked:

<h2>List of People</h2>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let person of people">
      <td>{{ person.name }}</td>
      <td>{{ person.email }}</td>
      <td>{{ person.age }}</td>
    </tr>
  </tbody>
</table>

<button (click)="downloadPDF()">Download PDF</button>

Step 6: Add the Component to the App

Finally, ensure you add this component (or route) to your main app.component.html or the relevant place in your application:

<!-- app.component.html -->
<app-pdf-table></app-pdf-table>

Now serve the application:

ng serve

Navigate to http://localhost:4200, and you’ll see the table of data. Click the Download PDF button, and a PDF file named people-table.pdf will be downloaded, containing your table.

Complete Example (pdf-table.component.ts)

Below is a concise version of the complete code for the PdfTableComponent:

import { Component } from '@angular/core';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';

@Component({
  selector: 'app-pdf-table',
  templateUrl: './pdf-table.component.html',
  styleUrls: ['./pdf-table.component.css'],
})
export class PdfTableComponent {
  public people = [
    { name: 'John Doe', email: 'john@example.com', age: 30 },
    { name: 'Jane Smith', email: 'jane@example.com', age: 25 },
    { name: 'Michael Brown', email: 'michael@example.com', age: 28 },
  ];

  constructor() {}

  public downloadPDF(): void {
    const doc = new jsPDF('p', 'mm', 'a4');

    const columns = [
      { header: 'Name', dataKey: 'name' },
      { header: 'Email', dataKey: 'email' },
      { header: 'Age', dataKey: 'age' },
    ];

    autoTable(doc, {
      columns: columns,
      body: this.people,
      margin: { top: 20 },
      styles: { fontSize: 10 },
      theme: 'grid',
      headStyles: { fillColor: [22, 160, 133] },
    });

    doc.save('people-table.pdf');
  }
}

And the corresponding HTML (pdf-table.component.html):

<h2>List of People</h2>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let person of people">
      <td>{{ person.name }}</td>
      <td>{{ person.email }}</td>
      <td>{{ person.age }}</td>
    </tr>
  </tbody>
</table>

<button (click)="downloadPDF()">Download PDF</button>

Conclusion

You now have a basic Angular application that:

  • Displays a simple data table in HTML,

  • Uses jsPDF and jspdf-autotable to generate a PDF with that table,

  • Downloads the PDF to the user’s device when they click a button.

This approach can be extended and customized:

  • Add logos, titles, or footers in your PDF.

  • Style your table (colors, fonts, sizes).

  • Integrate with dynamic data (e.g., from a server).

With that, you’ve successfully created and downloaded a PDF table using Angular, jsPDF, and jspdf-autotable!

📌 Stay Updated

Follow me for more design tips and tools! ✨

🐙 GitHub: Follow me for more web development resources.
🔗 LinkedIn: Connect with me for tips and tricks in coding.
✍️ Medium: Follow me for in-depth articles on web development.
📬 Substack: Dive into my newsletter for exclusive insights and updates:

Angularpdfpdf downloadjsPDF