Skip to content

SDK

Low-Code

Workflow

DWS API
Nutrient Web SDK

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 UI.

Test without installing You can test the SDK capabilities in our playground.
Jump to example Prefer to jump straight to code? View the example repo on GitHub.

Installation

  1. Add the Nutrient Web SDK (@nutrient-sdk/viewer) dependency:

    Terminal window
    npm i @nutrient-sdk/viewer

  2. In the angular.json file, add the following to the assets option:

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

    Angular will now copy the Nutrient Web SDK assets to the assets directory before running your app.

You're now ready to use the Nutrient Web SDK locally in your Angular project.

Render 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="pspdfkit-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';
    import NutrientViewer from '@nutrient-sdk/viewer';
    

    @Component({
      selector: 'pdf-viewer',
      templateUrl: './pdf-viewer.component.html',
      styleUrls: ['./pdf-viewer.component.css'],
      standalone: true,
    })
    export class PdfViewerComponent implements OnInit {
      ngOnInit(): void {
        NutrientViewer.load({
          // Use the assets directory URL as a base URL. Nutrient will download its library assets from here.
          baseUrl: `${location.protocol}//${location.host}/assets/`,
          document: "/assets/document.pdf",
          container: "#nutrient-container",
        }).then(instance => {
          // For the sake of this demo, store the Nutrient for Web 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 should see the PDF rendered in the Nutrient Web SDK UI.

Troubleshooting

Example View the example repo on GitHub.
Facing issues? Visit the troubleshooting guide for solutions to some common errors.