Syncfusion AI Assistant

How can I help you?

Create or Generate PDF file in Angular application

11 Jun 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.

Integrate the PDF library into an Angular application

Step1: 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]
Step2: Create a new Angular application using the Angular CLI command as follows.

ng new my-app
cd my-app

Step3: All Syncfusion® JS 2 packages are published in npmjs.com registry.To install the 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.

Step4: 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();
};

Step5: 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

Click here to explore the rich set of Syncfusion® PDF library features.

An online sample link to create PDF document in Angular.