HelpBot Assistant

How can I help you?

Create or Generate PDF file in Angular application

12 Jan 20263 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 image and data extraction features, you need to install the @syncfusion/ej2-pdf-data-extract package as an add-on.

  • Copy the ej2-pdf-lib folder from the @syncfusion/ej2-pdf-data-extract package into your project’s public, dist, or assets directory (where your static files are served).
  • Make sure the ej2-pdf-lib folder exists in your final build output if you need to extract images or data from PDF files.
  • Ensure your server serves .wasm files with the Content-Type: application/wasm MIME type.
    (Angular’s development server already handles this; configure production servers manually.)
  • This setup is not required for basic PDF creation.

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