Create or Generate PDF file in Angular application

18 Dec 20253 minutes to read

The Syncfusion® JavaScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, fill forms, and secure PDF files.

This guide explains how to integrate the JavaScript PDF library into an Angular application.

Setup Angular Environment

You can use the Angular CLI to setup your Angular applications.
To install the latest Angular CLI globally use the following command.

npm install -g @angular/cli

NOTE

To install a specific Angular CLI version, use: npm install –save @angular/[email protected]

Create an Angular Application

Start a new Angular application using the Angular CLI command as follows.

ng new my-app
cd my-app

Installing Syncfusion® JavaScript PDF package

All Syncfusion® JS 2 packages are published in npmjs.com registry.

  • To install PDF component, use the following command.
npm install @syncfusion/ej2-pdf --save

NOTE

For data extraction features, you need to install the @syncfusion/ej2-pdf-data-extract package as an add-on.

  • Copy the contents of the openjpeg folder from ./node_modules/@syncfusion/ej2-pdf-data-extract/dist to the public directory using the command: 
    cp -R ./node_modules/@syncfusion/ej2-pdf-data-extract/dist/openjpeg ./src/assets/openjpeg
  • Confirm that there is an openjpeg directory within your src/assets directory if you are extracting images from PDFs.
  • Ensure your server serves .wasm files with the Content-Type: application/wasm MIME type (Angular dev server handles this by default; configure your production server accordingly).

Create a PDF document

  • Add a simple button to app.component.html and attach a click handler that uses the TypeScript PDF API to create a new PDF document.
<html>
  <head>
    <title>PDF creation example</title>
  </head>
  <body>
    <button id="normalButton">Create PDF document</button>
  </body>
</html>
  • Include the following namespaces in app.component.ts file.
import { PdfDocument, PdfGraphics, PdfPage, PdfFontFamily, PdfFontStyle, PdfFont, PdfBrush } from '@syncfusion/ej2-pdf';
  • Include the following code example in the click event of the button in app.component.ts to generate a PDF document.
document.getElementById('normalButton').onclick = (): void => {
    // Create a new PDF document
    const document = new PdfDocument();
    // Add a new page
    const page: PdfPage = document.addPage();
    // Get graphics from the page
    const graphics: PdfGraphics = page.graphics;
    // Set font
    const font: PdfFont = document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular);
    // Create a new black brush
    const brush = new PdfBrush({r: 0, g: 0, b: 0});
    // Draw text
    graphics.drawString('Hello World!!!', font, {x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60}, brush);
    // Save and download PDF
    document.save('Output.pdf');
    // Destroy the PDF document instance
    document.destroy();
};

Run the application

Use the following command to run the application in browser.

ng serve --open

By executing the program, you will get the PDF document as follows.

Output PDF document