Generating PDFs in Angular with jsPDF and Nutrient Web SDK

What is jsPDF?

jsPDF(opens in a new tab) is a lightweight JavaScript library that lets you generate PDF files entirely in the browser, without needing any server-side tools. It’s particularly well-suited for simple, static documents like invoices, receipts, certificates, and reports with tables and text.

jsPDF outputs documents in real time and supports basic features like:

• Adding text and images
• Drawing shapes
• Generating tables (with jspdf-autotable)
• Downloading files directly from the client

It’s fast, easy to integrate, and perfect for developers who want a quick solution for exporting content to PDF inside a web app — especially in Angular applications where component-based UI maps nicely to document content.

However, jsPDF has limitations when it comes to:

• Template-based workflows
• Dynamic layout positioning
• Multipage document assembly
• Flattening annotations or form elements

That’s where Nutrient Web SDK shine, and the second half of this tutorial will cover this.

Prerequisites

• Node.js(opens in a new tab) v18.13 or higher and npm(opens in a new tab) (Node Package Manager)

Generating PDFs using jsPDF

In this section, you’ll focus on using jsPDF(opens in a new tab) to convert web content into PDF format, providing a straightforward approach to PDF generation in your Angular projects.

Step 1 — Angular installation

Start by installing Angular CLI(opens in a new tab), a powerful tool for creating and managing Angular projects. Open your terminal and run the following command:

npm install -g @angular/cli

This command installs Angular CLI globally on your system, allowing you to create and manage Angular projects.

Step 2 — Creating a new Angular project

With Angular CLI installed, you can create a new Angular project. Navigate to the directory where you want to create your project and run the following command:

ng new angular-pdf-generator

Angular CLI will prompt you to choose various project configuration options. You can either accept the defaults or customize them according to your preferences.

After creating the project, navigate to the project directory using the following command:

cd angular-pdf-generator

Step 3 — Installing the required packages

To generate PDFs in Angular, you’ll use two libraries: jspdf(opens in a new tab) and jspdf-autotable(opens in a new tab). Install them using npm:

npm install jspdf jspdf-autotable

These packages will enable you to create and customize PDFs within your Angular application.

Step 4 — Creating a PDF generation component

Angular follows a component-based architecture. Create a component dedicated to PDF generation and run the following command:

ng generate component pdf-generator

This command will generate a new component named pdf-generator with associated files for HTML, CSS, and TypeScript.

Step 5 — Writing the PDF generation code

Inside the pdf-generator component, open the pdf-generator.component.ts file. In this file, you’ll write the code responsible for generating PDFs:

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

@Component({
  selector: "app-pdf-generator",
  templateUrl: "./pdf-generator.component.html",
  styleUrls: ["./pdf-generator.component.css"],
})
export class PdfGeneratorComponent {
  generatePDF() {
    // Create a new PDF document.
    const doc = new jsPDF();

    // Add content to the PDF.
    doc.setFontSize(16);
    doc.text("My Angular PDF Generator", 10, 10);
    doc.setFontSize(12);
    doc.text(
      "This is a comprehensive guide on generating PDFs with Angular.",
      10,
      20,
    );

    // Create a table using `jspdf-autotable`.
    const headers = [["Name", "Email", "Country"]];
    const data = [
      ["David", "david@example.com", "Sweden"],
      ["Castille", "castille@example.com", "Spain"],
      // ...
    ];

    autoTable(doc, {
      head: headers,
      body: data,
      startY: 30, // Adjust the `startY` position as needed.
    });

    // Save the PDF.
    doc.save("table.pdf");
  }
}

Here, the code defines an Angular component named PdfGeneratorComponent that generates a PDF document with text and a table when a button is clicked. It uses the jsPDF library for PDF creation and jspdf-autotable for building tables within the PDF. The PDF is saved with the name table.pdf.

Now, open the pdf-generator.component.html file. Add a button element that will trigger the generatePDF() function when clicked. Place this button within your component’s template:

<div>
  <button (click)="generatePDF()">Generate PDF</button>
</div>

Step 6 — Displaying the PDF generation component

Now that you have your PdfGeneratorComponent, you’ll display it in your Angular application. Open the app.component.html file and add the <app-pdf-generator></app-pdf-generator> tag inside the template:

<div>
  <!-- Your navigation or other content can go here -->
  <app-pdf-generator></app-pdf-generator>
</div>

To incorporate the PdfGeneratorComponent into your Angular application, you need to import it into your app.component.ts file. This is achieved by adding the following import statement at the top:

import { PdfGeneratorComponent } from "./pdf-generator/pdf-generator.component";

Next, include PdfGeneratorComponent in the imports array of the @Component decorator. This setup allows you to use the <app-pdf-generator></app-pdf-generator> tag in your application’s HTML template, enabling users to generate PDFs directly from the main interface.

Here’s how your app.component.ts will look:

import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { PdfGeneratorComponent } from "./pdf-generator/pdf-generator.component";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [RouterOutlet, PdfGeneratorComponent],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "angular-pdf-generator";
}

Step 7 — Starting the development server

To see your Angular application in action, start the development server with the following command:

ng serve

Your application will be available at http://localhost:4200/. The application will display a Generate PDF button. When this button is clicked, the PDF will be generated as specified in the generatePDF() function.

Angular PDF generation library: Nutrient Web SDK

While the steps outlined above demonstrate PDF generation using jsPDF, an alternative approach is to use a specialized library like Nutrient Web SDK. This JavaScript library is designed for generating and manipulating PDF documents in Angular-based web applications. Nutrient Web SDK offers a wide range of capabilities, making it a powerful tool for your PDF needs:

• Create from template — Insert text or images and prefill forms.
• Generate from images — Convert JPGs, PNGs, or TIFFs into PDF.
• Assemble documents — Merge multiple PDFs and insert pages.
• Thumbnail previews — Render pages as thumbnail images.
• Saving options — Save PDFs to an array buffer, local storage, or a remote server.
• Headless — Optionally, generate PDFs without displaying the user interface.
• Client-side — Create PDFs directly in a browser (no server needed).
• Extendable — Add viewing, forms, signing, annotation, and more.

Now, you’ll learn how to use Nutrient with Angular to generate PDF documents from predefined PDF templates by merging them with data. This can be incredibly useful for various applications, like generating invoices, contracts, tickets, or any structured documents.

Step 1 — Setting up your Angular project

Create a new Angular project:

ng new nutrient-web-angular-example

Choose:

• No for routing
• CSS for stylesheets

Then navigate to your project folder:

cd nutrient-web-angular-example

Ensure you have an assets folder under src:

mkdir src/assets

Step 2 — Installing the Nutrient Web SDK

Add the SDK:

yarn add @nutrient-sdk/viewer

Or use npm install @nutrient-sdk/viewer if you prefer.

Then update your angular.json to expose the SDK assets:

"assets": [
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib/",
    "output": "./assets/nutrient-viewer-lib/"
  }
]

Step 3 — Adding the template and data

Place your PDF template in the assets folder: src/assets/document.pdf

Create a JSON file with the data you want to inject: src/assets/data.json

{
  "company": "Nutrient",
  "companyInfo": "Nutrient Technologies",
  "companyName": "Nutrient Inc."
}

Step 4 — Creating and rendering the PDF viewer

Generate a new component:

ng generate component pdf-viewer

Update the HTML template to define a viewer container:

<div class="pdf-viewer">
  <div id="nutrient-container" style="width: 100%; height: 100vh;"></div>
</div>

Step 5 — Populating the PDF with annotations

Once the PDF is loaded in headless mode, you can inject dynamic data using annotations.

Here’s how you can do this by creating a TextAnnotation:

const textAnnotation = new NutrientViewer.Annotations.TextAnnotation({
  boundingBox: new NutrientViewer.Geometry.Rect({
    height: 9.0675,
    left: 60.375,
    top: 37.7399,
    width: 46.905,
  }),
  fontSize: 8,
  text: {
    format: "plain",
    value: data.company,
  },
  pageIndex: 0,
  fontColor: NutrientViewer.Color.RED,
  backgroundColor: NutrientViewer.Color.WHITE,
});

await instance.create(textAnnotation);

• boundingBox — Define the position and size of the text annotation.
• fontSize — Set the font size.
• text — Provide the text content within the value property.
• pageIndex — Specify the page index where you want to overlay the text.

Repeat this process for other data points that you want to overlay on the document.

To replace existing placeholder text in your PDF, you can use the SDK’s built-in search method:

const bbox = (await instance.search("Company Ltd.")).first().rectsOnPage.get(0);

const dynamicAnnotation = new NutrientViewer.Annotations.TextAnnotation({
  boundingBox: bbox,
  fontSize: 8,
  text: {
    format: "plain",
    value: data.companyName,
  },
  pageIndex: 0,
  fontColor: NutrientViewer.Color.RED,
  backgroundColor: NutrientViewer.Color.WHITE,
});

await instance.create(dynamicAnnotation);

Step 6 — Flattening the annotations

Once all annotations are added, you can optionally flatten them to make the text part of the PDF content (so users can’t edit them):

const flattened = await instance.exportPDF({ flatten: true });

This returns a binary buffer (ArrayBuffer) of the modified PDF, ready to be reloaded in the viewer or downloaded.

Step 7 — Putting it all together

Now, update your pdf-viewer.component.ts file with the full flow: load → annotate → flatten → reload.

93 collapsed lines
1
import { Component, OnInit } from "@angular/core";
2
import NutrientViewer from "@nutrient-sdk/viewer";
3

4
@Component({
5
  selector: "pdf-viewer",
6
  templateUrl: "./pdf-viewer.component.html",
7
  styleUrls: ["./pdf-viewer.component.css"],
8
  standalone: true,
9
})
10
export class PdfViewerComponent implements OnInit {
11
  async ngOnInit(): Promise<void> {
12
    const baseUrl = `${location.protocol}//${location.host}/assets/`;
13
    const searchQuery = "Company Ltd.";
14

15
    try {
16
      const res = await fetch("/assets/data.json");
17
      if (!res.ok) throw new Error("Failed to fetch data.json");
18
      const data = await res.json();
19

20
      const instance: any = await NutrientViewer.load({
21
        baseUrl,
22
        document: "/assets/document.pdf",
23
        container: "#nutrient-container",
24
        headless: true,
25
      });
26

27
      const textAnnotation = new NutrientViewer.Annotations.TextAnnotation({
28
        boundingBox: new NutrientViewer.Geometry.Rect({
29
          height: 9.0675,
30
          left: 60.375,
31
          top: 37.7399,
32
          width: 46.905,
33
        }),
34
        fontSize: 8,
35
        text: {
36
          format: "plain",
37
          value: data.company,
38
        },
39
        pageIndex: 0,
40
        fontColor: NutrientViewer.Color.RED,
41
        backgroundColor: NutrientViewer.Color.WHITE,
42
      });
43

44
      const textAnnotation2 = new NutrientViewer.Annotations.TextAnnotation({
45
        boundingBox: new NutrientViewer.Geometry.Rect({
46
          height: 9.0675,
47
          left: 478.635,
48
          top: 37.7399,
49
          width: 82.695,
50
        }),
51
        fontSize: 8,
52
        text: {
53
          format: "plain",
54
          value: data.companyInfo,
55
        },
56
        pageIndex: 0,
57
        fontColor: NutrientViewer.Color.RED,
58
        backgroundColor: NutrientViewer.Color.WHITE,
59
      });
60

61
      // Search-based bounding box
62
      const bbox = (await instance.search(searchQuery))
63
        .first()
64
        .rectsOnPage.get(0);
65

66
      const textAnnotation3 = new NutrientViewer.Annotations.TextAnnotation({
67
        boundingBox: bbox,
68
        fontSize: 8,
69
        text: {
70
          format: "plain",
71
          value: data.companyName,
72
        },
73
        pageIndex: 0,
74
        fontColor: NutrientViewer.Color.RED,
75
        backgroundColor: NutrientViewer.Color.WHITE,
76
      });
77

78
      // Add annotations
79
      await instance.create([textAnnotation, textAnnotation2, textAnnotation3]);
80

81
      // Flatten the PDF
82
      const flattened = await instance.exportPDF({ flatten: true });
83

84
      await NutrientViewer.load({
85
        baseUrl,
86
        document: flattened,
87
        container: "#nutrient-container",
88
      });
89
    } catch (error) {
90
      console.error("PDF population error:", error);
91
    }
92
  }
93
}

Step 8 — Using the viewer in your app

Update your root component to include the viewer:

import { Component } from "@angular/core";
import { PdfViewerComponent } from "./pdf-viewer/pdf-viewer.component";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [PdfViewerComponent],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "Nutrient Angular PDF Generator";
}

<pdf-viewer></pdf-viewer>

Step 9 — Run the app

Start your Angular development server:

yarn run dev

Or use npm start.

Your browser should now display the PDF template, dynamically populated with data from data.json.

Summary

You now have a working Angular app that dynamically:

• Loads a PDF template
• Injects structured data with annotations
• Optionally flattens annotations into the document
• Displays the final result in the browser

This approach is fast and scalable and requires no backend processing.

For a detailed explanation, check out our guide on how to generate PDFs from a template using JavaScript.

Conclusion

In summary, while basic libraries like jspdf can fulfill simpler PDF generation needs, Nutrient Web SDK excels in scenarios where you require more advanced capabilities, better control, and enhanced functionality. It’s the go-to choice for projects that involve creating structured documents, managing various aspects of PDF files, and empowering your Angular application with a versatile PDF generation and manipulation library.

To get started, you can either:

• Start your free trial to test the library and see how it works in your application.
• Launch our demo to see the viewer in action.

FAQ