Open PDFs in an Angular App with PSPDFKit

Thanks to its amazing tooling, great community, and ease of use, Angular is one of the most popular web frameworks to date. So in this blog post, we’ll show how to open a PDF in an Angular application in minutes.

Prerequisites

We’ll assume you’re already familiar with the Angular CLI and that you have successfully created a new application with it.

To run Nutrient Web SDK, you also need an installation (npm) and to add the PDF you want to open to the src/assets folder of your Angular project.

Installation

Install Nutrient Web SDK as an npm package:

npm install @nutrient-sdk/viewer

Once the package is installed, you need to integrate it with Angular by adding the following lines to the assets section of your angular.json file:

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

This can be found under the projects > yourProjectName > architect > build > options > assets section of the configuration file.

Opening the PDF

Now that Nutrient is installed, you need to add the following HTML to your app component:

<style>
  #app {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
</style>
<div id="app"></div>

The app container doesn’t need to be in position: fixed. However, it always needs to have a width and height set.

Finally, you can initialize Nutrient:

import { Component } from '@angular/core';
import NutrientViewer from '@nutrient-sdk/viewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  title = 'angularpdf';

  ngAfterViewInit() {

    NutrientViewer.load({
      baseUrl: location.protocol + "//" + location.host + "/assets/",
      document: '/assets/example.pdf',
      container: '#app',
      licenseKey: YOUR_LICENSE_KEY_GOES_HERE, // Optional license key.
    }).then(function (instance) {
      console.log('Nutrient Web SDK loaded!')

      // For the sake of this demo, store the Nutrient Web SDK instance
      // on the global object so that you can open the dev tools and
      // play with the Nutrient API.
      (window as any).instance = instance;
    });

  }
}

In the snippet above, NutrientViewer.load is called with a configuration object where you define:

• baseUrl, which is where your assets are available (this is set in angular.json).
• pdf, which is the relative URL for your example PDF file.
• container, which is where you mount Nutrient.
• licenseKey (optional). However, without a license key, you’ll see watermarked text. You can contact the Sales team to get a license key.

Note that NutrientViewer.load is called in the ngAfterViewInit lifecycle method, i.e. after your div#app is rendered, so that Nutrient can be initialized inside of it.

Once loaded, expose the Nutrient Web SDK instance on the global object so that you can open the dev tools and play with our API.

Opening a local PDF

Nutrient Web SDK can also open local PDF files. In this case, the pdf configuration option should be an ArrayBuffer(opens in a new tab) of your file.

To open a file, you need to create a file picker(opens in a new tab) and, when selecting a file, convert it to ArrayBuffer using the FileReader API (see an example here(opens in a new tab)).

Once you have the PDF in the ArrayBuffer format, you can call NutrientViewer.load with it.

Conclusion

Thanks to its toolset, Angular makes it easy to build web applications. Hopefully you found the process of integrating Nutrient Web SDK just as easy.