How To Export Data As PDF in Angular?

Exporting data in Angular to PDF is a common requirement for applications that handle reports, invoices or downloadable content, in this article, we'll explain how to manually export data from an Angular application to PDF using jsPDF, a popular JavaScript library for creating PDF documents.

Prerequisites

• Basic understanding of Angular
• Node.js installed on your machine
• Angular CLI installed

Steps To Export Data As PDF in Angular

Step 1: Install Angular CLI

If you do not have Angular CLI installed globally then run the following command in PowerShell or your command line:

npm install -g @angular/cli

This installs Angular CLI globally making ng command available system-wide.

Step 2: Verify the Installation

When the installation is complete Verify that Angular CLI is installed correctly by running this:

ng --version

If Angular CLI is installed correctly, you should view the Angular CLI version details and associated dependencies.

Step 3: Setting Up a New Angular Project

ng new angular-pdf-export-gfg
cd angular-pdf-export-gfg

It will create a basic angular project.

Step 4: Installing Required npm Packages

• jsPDF: It is a popular library for creating PDF files
• html2canvas: It captures content of an HTML element and render it to the canvas which can be converted to PDF.

npm install jspdf html2canvas --save

Project Structure

Dependencies

"dependencies": {
    "@angular/animations": "^18.2.0",
    "@angular/common": "^18.2.0",
    "@angular/compiler": "^18.2.0",
    "@angular/core": "^18.2.0",
    "@angular/forms": "^18.2.0",
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-browser-dynamic": "^18.2.0",
    "@angular/router": "^18.2.0",
    "html2canvas": "^1.4.1",
    "jspdf": "^2.5.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.10"
  }

Step 5: Implementing the PDF Export Functionality

5.1. Modify the app.component.html

It will add a simple HTML template with button to trigger PDF creation and a section with content that we will export as PDF.

<!-- app.component.html -->

<div class="container">
    <h1>GeeksforGeeks</h1>
    <h3>Angular PDF Export Example</h3>
    <div id="content">
        <p>This content will be exported to PDF!</p>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Pankaj Bind</td>
                    <td>20</td>
                    <td>Surat</td>
                </tr>
                <tr>
                    <td>Neeraj Bind</td>
                    <td>18</td>
                    <td>Prayagraj</td>
                </tr>
            </tbody>
        </table>
    </div>
    <button (click)="exportPDF()">Export as PDF</button>
</div>

5.2. Modify the app.component.ts

In the component’s TypeScript file, we'll import the jsPDF and html2canvas libraries and write the logic for generating the PDF.

//app.component.ts

import { Component } from '@angular/core';
import * as jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    standalone: true,
    imports: [CommonModule]
})
export class AppComponent {
    exportPDF() {
        const data = document.getElementById('content');
        html2canvas(data!).then(canvas => {
            const imgWidth = 208;
            const imgHeight = canvas.height * imgWidth / canvas.width;
            const contentDataURL = canvas.toDataURL('image/png');
            const pdf = new jsPDF.jsPDF('p', 'mm', 'a4'); // A4 size page of PDF
            const position = 0;
            pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
            pdf.save('exported-file.pdf'); // Save the generated PDF
        });
    }
}

5.3. Add Some Basic Styling

To make table look decent in the PDF add some basic styles in app.component.css:

/* app.component.css */

.container {
    text-align: center;
    margin-top: 50px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table,
th,
td {
    border: 1px solid black;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}

button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

Step 6: Run and Test the Application

ng serve

Open http://localhost:4200/ in your browser. You should see a simple page with content and a button that lets you export the data to PDF, when you click the button, the content (including tables) will be exported and downloaded as PDF.

Output

Conclusion

After this tutorial You have successfully implemented the functionality to export data to PDF in Angular using jsPDF and html2canvas, this approach works with static content as well as dynamically generated content, this makes it highly flexible for use in real-world applications, you can now extend this functionality to include charts, graphs, and other elements in your PDFs.