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:

• View and edit in Spreadsheet Editor for .xlsx files.
• View and edit in DOCX Editor for .docx files.

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. 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 with the Apryse WebViewer SDK in an Angular project by viewing our video. You can also skip the video and follow the steps below to get started.

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.

First, you'll create your project folder where you'll store your Angular scaffolding later.

1. From the command line interface (CLI), cd to where you want your new project folder to be:

1cd <existing-folder>

2. Run the following on the command line, replacing <project-name> with a project name of your choice:

1mkdir <project-name>

Within your new project directory, run the following on the command line to install the Angular CLI so you can use the CLI to scaffold (create) your Angular project:

1npm install @angular/cli

Generate your project next.

Run the following on the command line, replacing <project-name> with a project name of your choice:

1ng new <project-name>

You'll 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'.

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

1cd <project-name>

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

1npm i @pdftron/webviewer

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.

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

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.

1. Create a file called src/app/webviewer/webviewer.component.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.

1import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
2import WebViewer from '@pdftron/webviewer';
3
4@Component({
5  selector: 'webviewer',
6  templateUrl: './webviewer.component.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}

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

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.

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

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

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

5. In the file, mount WebViewer:

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

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.

1ng serve

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