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.

Prerequisites

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.

1. Create an Angular project

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:

Shell

npm install -g @angular/cli

1. Navigate to the directory where you want to create the project.
2. Create a new webviewer-angular project using a minimal setup:

Shell

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

Info

Flags are used to skip prompts during project configuration. The setup sets the CSS stylesheet format, disables server-side rendering (SSR) and prerendering, and accepts all defaults. Select different options if preferred.

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

Shell

cd webviewer-angular
npm install

2. Install WebViewer

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:

Shell

npm i @pdftron/webviewer

3. Copy WebViewer assets

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:

JSON

angular.json

{
  // ...
  "assets": [
    // ...other assets,
    { 
      "glob": "**/*",
      "input": "./node_modules/@pdftron/webviewer/public",
      "output": "/lib/webviewer"
    }
  ],
}

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

Info

You can add multiple entries to the assets array, each with its own input path. Don't modify or remove the default entries in angular.json. For example, keep entries such as {"glob": "**/*", "input": "public"}.

4. Create the PDF viewer

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:

Shell

npx --yes mkdirp src/webviewer

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

Shell

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

Shell

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

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

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import WebViewer from '@pdftron/webviewer';

@Component({
  selector: 'webviewer',
  templateUrl: './webviewer.html',
  standalone: true,
}) 

export class WebViewerComponent implements AfterViewInit {
  // Reference to DOM element where WebViewer will be mounted
  @ViewChild('viewer') viewer!: ElementRef;
  
  ngAfterViewInit(): void {
    WebViewer(
      {
        // Path to copied WebViewer static assets
        path: '../../lib/webviewer',
        // Replace with your Apryse license key
        licenseKey: 'YOUR_LICENSE_KEY',
        // Document to load when WebViewer initializes
        initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
      },
      // Element where WebViewer is mounted
      this.viewer.nativeElement
    ).then(instance => {
      // WebViewer APIs are available via the instance
    });
  }
}

Info

If you're signed in with an Apryse account, your license key is automatically prepopulated in all code snippets.

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

HTML

src/webviewer/webviewer.html

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

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

TypeScript

src/app/app.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
// Import WebViewer component created earlier
import { WebViewerComponent } from '../webviewer/webviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  // Make WebViewer available in the root component
  imports: [RouterOutlet, WebViewerComponent],
  templateUrl: './app.html',
  styleUrl: './app.css'
})

export class App { 
  // Replace with your Angular project name 
  title = 'webviewer-angular';
}

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

HTML

src/app/app.html

<main class="main">
  <webviewer />
</main>

5. Verify your output

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:

Shell

ng serve

Info

You may get a warning message in the command line, as the project runs, that you're not using RouterOutlet correctly. You can ignore the warning.

A successful output looks similar to:

Shell

Application bundle generation complete. [0.643 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help

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

Get started video

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

Integrate the WebViewer SDK in an Angular (v20+) application.

Next steps

UsageGuidesSamplesAPI docs