Angular PDF Library - WebViewer Get Started

This guide will show you how to integrate WebViewer Document Viewer & Editor into an Angular application.

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

Prior to starting, you should have already installed Node and npm.

Get your Apryse trial key.

This video teaches you the fundamentals of installing and initializing WebViewer in any web application. If you wish, you may skip this section and proceed to the steps below.

We will use the Angular CLI to scaffold our project. Run the following code to install it.

1npm install -g @angular/cli@17

Now we can generate our project using the CLI. Run the following command, replacing <project-name> with a project name of your choice.

1ng new <project-name>

You will be asked a set of questions during installation. You may choose whichever options you wish - your choices will not impact the rest of this guide.

Now we can navigate into our new project:

1cd <project-name>

Now we are ready to install WebViewer.

1npm i @pdftron/webviewer --save

We also have to copy the static assets required for WebViewer to run. The files are located in node_modules/@pdftron/webviewer/public and must be moved into a location that will be served and publicly accessible.

In Angular, the location of these static assets can be configured in angular.json by updating the assets array.

Add the following entry to the assets array.

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

Now we are ready to create a WebViewer component that can be used across our app.

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

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}

We also need to create an HTML template so we can create an element for WebViewer to bind to.

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

Now, we can use our component elsewhere in our app.

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

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

Then, in the associated html file, we can mount WebViewer.

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

Now if we run our app using ng serve, you should see WebViewer mounted in your application!