Open PDFs in an Angular App with PSPDFKit

Editor’s Note: This post was originally published in 2019. We have a new and improved version that shows you how to build a PDF viewer with PDF.js.

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 PSPDFKit for Web, 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 PSPDFKit for Web as an npm package:

npm install pspdfkit

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/pspdfkit/dist/pspdfkit-lib/",
+      "output": "./assets/pspdfkit-lib/"
+    }
  ]
}

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

Opening the PDF

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

<!-- src/app/app.component.html -->
<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 PSPDFKit:

/* src/app/app.component.ts */
import { Component } from '@angular/core';
import PSPDFKit from 'pspdfkit';

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

  ngAfterViewInit() {

    PSPDFKit.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('PSPDFKit for Web loaded!')

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

  }
}

In the snippet above, PSPDFKit.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 PSPDFKit.

• 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 PSPDFKit.load is called in the ngAfterViewInit lifecycle method, i.e. after your div#app is rendered, so that PSPDFKit can be initialized inside of it.

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

Opening a Local PDF

PSPDFKit for Web can also open local PDF files. In this case, the pdf configuration option should be an ArrayBuffer of your file.

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

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

Conclusion

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