Add PDF functionality with Angular

Nutrient Web SDK is a JavaScript PDF library for viewing, annotating, and editing PDFs directly in the browser. Use it to add PDF capabilities to any web app.

This guide walks you through the steps to integrate Nutrient Web SDK into your project. By the end, you’ll be able to render a PDF document in the user interface (UI).

Test without installing
Jump to example

Installation

You can load Nutrient Web SDK directly from Nutrient’s content delivery network (CDN). Nutrient maintains the CDN for customers, and it’s our recommended way to get started. For more control and flexibility, use the local installation option.

  1. Add the following script tag in your index.html file:

    src/index.html
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>Angular App</title>
        <base href="/" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" type="image/x-icon" href="favicon.ico" />
        <script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.10.0/nutrient-viewer.js"></script>
      </head>
      <body>
        <app-root></app-root>
      </body>
    </html>

  2. You’re now ready to use Nutrient Web SDK and reference window.NutrientViewer in the client-side code.

Rendering a PDF

  1. Generate a new PDF viewer component:

    Terminal window
    ng generate component pdf-viewer

  2. Replace the contents of src/app/pdf-viewer/pdf-viewer.component.html with the following:

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

  3. Replace the contents of src/app/pdf-viewer/pdf-viewer.component.ts with the following:

    import { Component, OnInit } from "@angular/core";
    

    @Component({
      selector: "pdf-viewer",
      templateUrl: "./pdf-viewer.component.html",
      styleUrls: ["./pdf-viewer.component.css"],
      standalone: true,
    })
    export class PdfViewerComponent implements OnInit {
      ngOnInit(): void {
        const { NutrientViewer } = window as any;
    

        if (NutrientViewer) {
          NutrientViewer.load({
            document: "/assets/document.pdf",
            container: "#nutrient-container",
          }).then((instance: any) => {
            // For the sake of this demo, store the Nutrient instance
            // on the global object so that you can open the dev tools and
            // play with the Nutrient API.
            (window as any).instance = instance;
          });
        }
      }
    }

  4. Update the component where you want to use the PDF viewer — for example, src/app/app.component.ts — to import the PdfViewerComponent:

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

    @Component({
      selector: "app-root",
      imports: [RouterOutlet, PdfViewerComponent],
      templateUrl: "./app.component.html",
      styleUrl: "./app.component.css",
    })
    export class AppComponent {
      title = "angular";
    }

  5. Add the pdf-viewer to the page where you want to display it — for example, src/app/app.component.html:

    <pdf-viewer></pdf-viewer>

  6. Start the development server:

    Terminal window
    npm run dev

  7. You’ll see the PDF rendered in the Nutrient Web SDK user interface (UI).

Troubleshooting

If you encounter issues, refer to the common issues guide.

Note for developers using AI coding assistants: To get accurate troubleshooting help, copy the content from the troubleshooting guide and include it in your prompt, along with your specific error.

Test without installing
View example