DEV Community

Cover image for Generating PDFs in Angular using jsPDF
Vidyarathna Bhat
Vidyarathna Bhat

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Installing jsPDF

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

npm install jspdf
Enter fullscreen mode Exit fullscreen mode

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 { }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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');
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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();
  }
}
Enter fullscreen mode Exit fullscreen mode

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

<button (click)="generatePdf()">Generate PDF</button>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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');
}
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)