Section:

Get Started with Apryse WebViewer SDK in an Angular Project

The WebViewer SDK is expansive, allowing you to do the following with PDFs inside your app:

  • View
  • Edit
  • Annotate
  • Flatten
  • Extract
  • Search
  • Build forms
  • Calculate using measurements
  • Support layers
  • Customize the UI
  • Meet global accessibility standards through the UI
  • Page manipulation
  • Compare different versions of a PDF
  • Archive
  • Use digital signature
  • Redact
  • Generate templates
  • Add security
  • Document conversion, including Office and CAD conversion

You can also:

Adding WebViewer to your application allows users to use PDFs, .xlsx, and .docx files without going outside of your application. This reduces reliance on third-party systems, multiple vendors, and file downloads for everyday tasks without compromising control, compliance, or security.

Interact with our showcase demo to test out all of the Apryse WebViewer SDK functionality.

This guide walks you through how to integrate the WebViewer SDK into your Angular application via Angular version 20+ or Angular 19 or earlier. By the end, you'll be able to render a PDF document in the UI.

You can download a ready-to-go sample on GitHub.

Get started video

Get started with the Apryse WebViewer SDK in an Angular project by viewing our video. This video includes instructions for successfully integrating WebViewer SDK into your Angular version 19 or earlier app. You can also skip the video and follow the steps below to get started.

Video on how integrate the Apryse WebViewer SDK into an Angular version 19 or earlier app.

Prerequisites

Before you start:

  • Install Node and npm to use as your run-time environment and package manager.
  • Open a text editor like Visual Studio Code.
  • Get your Apryse trial key.

1. Add Angular CLI

Angular version 20+ is significantly different then earlier versions, mainly in file naming style. They've modernized the style and don't include redundant suffixes like .component.ts by default in new projects. Because there is a difference in file names between newer and earlier versions, this get started guide includes instructions for both version(s) 20+ as well as earlier versions so you can get WebViewer SDK up and running quickly, no matter what version of Angular you're using.

If you already have an Angular project, skip to step 3.

Run the following on the command line:

The command installs the Angular CLI so you can use the CLI to scaffold (create) your Angular project. This command installs Angular version 20 or later.

shell

1npm install -g @angular/cli

2. Scaffold Angular project

Scaffold your Angular project next.

1. On the command line, cd to where you want your new project to sit.

2. Run the following on the command line, replacing <project-name> with whatever project name you choose:

shell

1ng new <project-name>

You may be asked a set of questions during installation. Your answers to most of the questions won't matter to be able to get through the instructions below successfully.

For the question 'Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?', answer 'No'.

3. Navigate to new Angular project

Enter the following on the command line to navigate into your new project:

shell

1cd <project-name>

4. Integrate WebViewer

Enter the following on the command line from within your project directory to install WebViewer into your Angular project:

shell

1npm i @pdftron/webviewer

5. Copy static assets

You'll need to copy the static assets from the webviewer folder required for WebViewer to run using your text editor. The files are located in node_modules/@pdftron/webviewer/public and must be moved into a location that will be served and publicly accessible. Angular has a built-in mechanism to do this. In Angular, the location of these static assets can be configured in the angular.json file by updating the assets array.

Add the following code to the assets array:

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

All default entries in the asset array that exist in the angular.json file should not be deleted. For example, "glob": "**/*", "input": "public".

JSON

angular.json

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

6. Implement WebViewer into your project

Next, create a WebViewer component that can be used across the app. You'll add code into new folders you create and existing default folders that are part of your Angular project.

Use the tabs below to select the Angular version you're using and follow the instructions based on the version.

1. Create a folder called webviewer in src/app.

2. Create a file called src/app/webviewer/webviewer.ts and add the following code:

  • The path is the path to the copied static assets.
  • Add your own license key in place of 'YOUR_LICENSE_KEY'. If you've created your license key and you're logged in, your key is already in the code below.
  • Specify an initial document to open when WebViewer starts using the initialDoc parameter.
  • Specify the element where you want WebViewer to be mounted. In this case, that's viewer.

TypeScript

app/webviewer/webviewer.ts

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})
9export class WebViewerComponent implements AfterViewInit {
10  @ViewChild('viewer') viewer!: ElementRef;
11
12  constructor() { }
13
14  ngAfterViewInit(): void {
15    WebViewer({
16      path: '../../lib/webviewer',
17      licenseKey: 'YOUR_LICENSE_KEY',
18      initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf'
19    }, this.viewer.nativeElement).then(instance => {
20      
21
22    })
23  }
24}

3. Create an HTML file called app/webviewer/webviewer.html so you can create an element for WebViewer to bind to. Add the following code to the file:

HTML

app/webviewer/webviewer.html

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

The code above adds a div element which contains a reference variable of viewer that we just used in the TypeScript file. We've also specified some styling.

Now, you can use the component elsewhere in your app.

4. In app/app.ts (or whatever file you want to use the component in), delete the default code and add the WebViewerComponent to the imports like this:

  • Add your Angular project name in place of the <'project-name'> for the title in the code below.

TypeScript

app/app.ts

1import { Component } from '@angular/core';
2import { RouterOutlet } from '@angular/router';
3import { WebViewerComponent } from './webviewer/webviewer.js';
4
5@Component({
6  selector: 'app-root',
7  standalone: true,
8  imports: [RouterOutlet, WebViewerComponent],
9  templateUrl: './app.html',
10  styleUrl: './app.css'
11})
12export class App{
13  title = <'project-name'>;
14}
15

5. Delete the existing code in the app/app.html file. There's lots of code by default in this file and we don't need any of it.

6. In the file, mount WebViewer:

HTML

app/app.html

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

7. View PDF in WebViewer UI

After you've saved all of the files, you'll serve the webpage so you can see the WebViewer UI and the PDF you included to open in WebViewer.

1. Run the following command on the command line from your project directory to run the project.

shell

1ng serve

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.

2. Click the localhost link created in your terminal to view the WebViewer UI and PDF file locally.

Next steps

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales