Build an Angular PDF viewer with Apryse WebViewer SDK

This guide shows how to build an Angular PDF viewer using the Apryse WebViewer SDK. You'll learn how to integrate the SDK into an Angular application to render, view, and interact with PDF documents using the WebViewer UI.

You can also download a ready-to-use GitHub sample to get started quickly, or explore the interactive Showcase demo to see WebViewer's full capabilities in action.

This guide assumes basic familiarity with Angular development. Before you start:

• Install Node.js and npm. See the Angular documentation for version details.
• Install Visual Studio Code or another code editor to develop and debug your code.
• Get your Apryse trial key.

In this section, you’ll create a new Angular application using npm. This project provides the foundation for integrating Apryse WebViewer. If you already have an Angular app, skip this and continue to Install WebViewer.

1. In your terminal, install the Angular CLI globally so you can create and manage Angular projects:

1npm install -g @angular/cli

2. Navigate to the directory where you want to create the project.

3. Create a new webviewer-angular project using a minimal setup:

1ng new webviewer-angular --style=css --ssr=false --defaults

4. Navigate to your new Angular project directory and install dependencies:

1cd webviewer-angular
2npm install

Next, install the Apryse WebViewer SDK using npm. This command adds the WebViewer package to your project, allowing you to integrate the PDF viewer and editor into your Angular application.

After navigating to your webviewer-angular project directory, run the following command to install WebViewer:

1npm i @pdftron/webviewer

WebViewer requires access to its static assets at runtime, including WebAssembly modules, HTML, and CSS files. These assets are located in node_modules/@pdftron/webviewer/public. To ensure they’re served correctly, make them publicly accessible in your Angular application by configuring the assets array in angular.json. In this section, you’ll copy the required WebViewer assets to a location that Angular serves automatically. For more, see Copying WebViewer static assets.

1. Open your project in Visual Studio Code and go to the angular.json file.
2. In the angular.json file, update the assets array to include the following and save:

1{
2  // ...
3  "assets": [
4    // ...other assets,
5    { 
6      "glob": "**/*",
7      "input": "./node_modules/@pdftron/webviewer/public",
8      "output": "/lib/webviewer"
9    }
10  ],
11}

The output value creates a new set of folders and moves the static assets to the lib/webviewer folder.

In this section, you'll add WebViewer to your Angular app by creating a component and initializing the viewer. This mounts the WebViewer UI and loads a document in your application.

1. Create a webviewer folder in your project's src directory:

1npx --yes mkdirp src/webviewer

2. Create webviewer.ts and webviewer.html files in the webviewer folder:

1npx --yes shx touch src/webviewer/webviewer.ts

1npx --yes shx touch src/webviewer/webviewer.html

3. In Visual Studio Code, add this code to the webviewer.ts file and save:

1import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
2import WebViewer from '@pdftron/webviewer';
3
4@Component({
5  selector: 'webviewer',
6  templateUrl: './webviewer.html',
7  standalone: true,
8}) 
9
10export class WebViewerComponent implements AfterViewInit {
11  // Reference to DOM element where WebViewer will be mounted
12  @ViewChild('viewer') viewer!: ElementRef;
13  
14  ngAfterViewInit(): void {
15    WebViewer(
16      {
17        // Path to copied WebViewer static assets
18        path: '../../lib/webviewer',
19        // Replace with your Apryse license key
20        licenseKey: 'YOUR_LICENSE_KEY',
21        // Document to load when WebViewer initializes
22        initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
23      },
24      // Element where WebViewer is mounted
25      this.viewer.nativeElement
26    ).then(instance => {
27      // WebViewer APIs are available via the instance
28    });
29  }
30}

4. Add this code to the webviewer.html file and save:

1<div #viewer class="viewer" style="height: 100vh; width: 100%; margin: 0 auto;"></div>

5. Replace the src/app/app.ts file with the following and save:

1import { Component } from '@angular/core';
2import { RouterOutlet } from '@angular/router';
3// Import WebViewer component created earlier
4import { WebViewerComponent } from '../webviewer/webviewer';
5
6@Component({
7  selector: 'app-root',
8  standalone: true,
9  // Make WebViewer available in the root component
10  imports: [RouterOutlet, WebViewerComponent],
11  templateUrl: './app.html',
12  styleUrl: './app.css'
13})
14
15export class App { 
16  // Replace with your Angular project name 
17  title = 'webviewer-angular';
18}

6. Replace the src/app/app.html file with the following and save:

1<main class="main">
2  <webviewer />
3</main>

You can now load and display a PDF document in the WebViewer UI. Run your Angular application to launch WebViewer and see the PDF in your browser.

1. From your project directory, run the following command to start the application:

1ng serve

A successful output looks similar to:

1Application bundle generation complete. [0.643 seconds]
2
3Watch mode enabled. Watching for file changes...
4NOTE: Raw file sizes do not reflect development server per-request transformations.
5  ➜  Local:   http://localhost:4200/
6  ➜  press h + enter to show help

2. Open the localhost URL from your terminal to view the WebViewer UI and PDF document.

In this 5-minute video, learn how to install and integrate the Apryse WebViewer SDK into an Angular project.