Generating PDFs in Angular using jsPDF

In modern web applications, generating PDF documents can be an essential feature for reports, invoices, and more. In this article, we will explore how to integrate and use jsPDF, a popular JavaScript library, in an Angular application to generate PDF files dynamically.

Prerequisites

To follow along with this tutorial, you should have:

• Basic knowledge of Angular.
• Node.js and Angular CLI installed.
• An Angular project set up. If you don't have one, you can create a new project using the Angular CLI:

ng new angular-jspdf
cd angular-jspdf

Installing jsPDF

First, you need to install jsPDF. You can do this using npm:

npm install jspdf

Setting Up jsPDF in Angular

Once jsPDF is installed, you need to set it up in your Angular project. Open your app.module.ts and add the following import:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Creating a PDF Service

To keep your code organized, create a service for generating PDFs. Generate a new service using Angular CLI:

ng generate service pdf

In the generated pdf.service.ts, import jsPDF and create a method for generating a PDF:

import { Injectable } from '@angular/core';
import { jsPDF } from 'jspdf';

@Injectable({
  providedIn: 'root'
})
export class PdfService {

  constructor() { }

  generatePdf() {
    const doc = new jsPDF();

    doc.text('Hello world!', 10, 10);
    doc.save('sample.pdf');
  }
}

Creating a Component to Generate PDFs

Next, generate a new component where you will add a button to trigger the PDF generation:

ng generate component pdf-generator

In pdf-generator.component.ts, inject the PDF service and create a method to call the generatePdf function:

import { Component } from '@angular/core';
import { PdfService } from '../pdf.service';

@Component({
  selector: 'app-pdf-generator',
  templateUrl: './pdf-generator.component.html',
  styleUrls: ['./pdf-generator.component.css']
})
export class PdfGeneratorComponent {

  constructor(private pdfService: PdfService) { }

  generatePdf() {
    this.pdfService.generatePdf();
  }
}

In pdf-generator.component.html, add a button to trigger the PDF generation:

<button (click)="generatePdf()">Generate PDF</button>

Adding the Component to the App

Include the PdfGeneratorComponent in your AppComponent template to make it part of your application:

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

Customizing the PDF Content

To customize the PDF content, you can modify the generatePdf method in PdfService. For example, you can add images, tables, and more complex layouts:

generatePdf() {
  const doc = new jsPDF();

  doc.setFontSize(22);
  doc.text('Custom PDF Document', 10, 10);

  doc.setFontSize(16);
  doc.text('This is a sample PDF generated using jsPDF in Angular.', 10, 30);

  // Add more content as needed
  doc.text('Add your content here...', 10, 50);

  doc.save('custom-sample.pdf');
}

Integrating jsPDF into your Angular project allows you to create PDF documents dynamically within your application. By following the steps outlined above, you can set up jsPDF, create a service for PDF generation, and trigger this functionality from a component. This basic setup can be further expanded to include more complex features such as tables, images, and styled text to meet your application's needs. With jsPDF, the possibilities for generating rich, dynamic PDF content are extensive, making it a powerful tool for any Angular developer.

Happy coding!