How to Display PDFs Using Angular

In this blog post, you’ll learn how to display a PDF document using PSPDFKit’s Angular PDF library. Developed and maintained by Google, Angular is an open source JavaScript framework. It’s written in TypeScript and follows a model-view-controller (MVC) design pattern.

PSPDFKit’s Angular PDF Library

We offer a commercial Angular PDF library that can easily be integrated into your web application. Our Angular viewer supports rendering PDF, JPEG, PNG, and TIFF files in any modern browser and on any mobile device without any plugins.

It comes with 30+ features that let you view, annotate, edit, and sign documents directly in your browser. Out of the box, it has a polished and flexible UI that you can extend or simplify based on your unique use case:

• A prebuilt and polished UI
• 15+ annotation tools
• Cropping and rotation tools
• Support for multiple file types
• Dedicated support from engineers

Requirements

• An LTS version of Node.js

• A package manager — npm or Yarn

No additional setup is required to use npm, as it’s included with your Node.js installation.

1. Creating a Fresh Angular Project

1. Install the Angular CLI using npm or Yarn:

   npm install -g @angular/cli
   
   yarn global add @angular/cli

2. Create a new Angular application:

   ng new display-pdf

3. The ng new command lets you configure the features to include in the initial app. Accept the defaults by pressing the Return key.

4. Change to the project directory:

   cd display-pdf

2. Adding PSPDFKit’s Angular PDF Library

1. Add the PSPDFKit dependency:

   npm install --save pspdfkit
   
   yarn add pspdfkit

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

   "assets": [
       "src/assets",
   +   {
   +       "glob": "**/*",
   +       "input": "./node_modules/pspdfkit/dist/pspdfkit-lib/",
   +       "output": "./assets/pspdfkit-lib/"
   +   }
   ]

With this, Angular will now copy the PSPDFKit library assets to the assets directory before running your app.

Make sure your server has the Content-Type: application/wasm MIME type set. Read more about this in the Troubleshooting section of our guides.

3. Displaying a PDF Document

1. Copy the PDF document you want to display to the src/assets directory. You can use this demo document as an example.

2. Replace the contents of the app.component.html file in the src/app/ directory with the following:

   <div class="app">
   	<!-- We'll mount the PSPDFKit UI to this element. -->
   	<div
   		id="pspdfkit-container"
   		style="width: 100%; height: 100vh"
   	></div>
   </div>

3. In the src/app/ directory, replace the contents of the app.component.ts file with the following:

   import { Component } from '@angular/core';
   import PSPDFKit from 'pspdfkit';
   
   @Component({
   	selector: 'app-root',
   	templateUrl: './app.component.html',
   	styleUrls: ['app.component.css'],
   })
   export class AppComponent {
   	title = 'PSPDFKit for Web Angular Example';
   
   	ngAfterViewInit() {
   		PSPDFKit.load({
   			// Use the assets directory URL as a base URL. PSPDFKit will download its library assets from here.
   			baseUrl:
   				location.protocol + '//' + location.host + '/assets/',
   			// Replace [YOUR-DOCUMENT] with your document's name
   			document: '/assets/[YOUR-DOCUMENT].pdf',
   			container: '#pspdfkit-container',
   		}).then((instance) => {
   			// 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;
   		});
   	}
   }

The PSPDFKit.load() method creates a new PSPDFKit instance and returns a Promise resolving to a new PSPDFKit.Instance. It requires a configuration object and returns a rejected promise, PSPDFKit.Error, when the configuration is invalid.

Learn more about the properties of a PSPDFKit.load configuration.

4. Start the app and open it in your default browser:

   npm start --open
   
   yarn start --open

The result is shown in the image below.

Interact with the sandbox by clicking the left rectangle icon and selecting Editor > Show Default Layout. To edit, sign in with GitHub — click the rectangle icon again and choose Sign in. To preview the result, click the rectangle icon once more and choose Editor > Embed Preview. For the full example, click the Open Editor button. Enjoy experimenting with the project!

Conclusion

In this post, you learned how to display a PDF in Angular using PSPDFKit’s Angular PDF library. If you hit any snags, don’t hesitate to reach out to our Support team for help.

At PSPDFKit, we offer a commercial, feature-rich, and completely customizable web PDF library that’s easy to integrate and comes with well-documented APIs to handle advanced use cases. Try it for free, or visit our demo to see it in action.