Integrating existing Angular project with WebViewer JavaScript PDF library

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

You can watch a step-by-step video to help you get started.

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

If you're looking for an AngularJS / Angular 1.x guide or clone GitHub Sample . Otherwise, continue with the rest of this guide for Angular 2+.

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

• An existing angular application, which also means you already have Angular CLI.
• Download WebViewer SDK Download WebViewer
• Get your Apryse trial key.

From WebViewer.zip extract the WebViewer folder to your preferred location

Navigate to your angular project. Let's call the path to your project PROJ_ROOT:

PROJ_ROOT = path/to/your/angular/project/

Create two new folders:

• Inside the PROJ_ROOT/src folder, create a new folder called wv-resources.
• Inside the PROJ_ROOT/src/app folder, create a new folder called webviewer.

From the WebViewer folder you extracted in step 1. copy the lib folder into PROJ_ROOT/src/wv-resources/

Update the angular.json file inside your project's root folder at PROJ_ROOT/ to update assets and scripts under the options for build.
Add your own license key in place of 'YOUR_LICENSE_KEY'.

{
    //...
    "assets": [
        // existing assets can remain as they are
        "src/wv-resources/lib"
    ],
    "scripts": [
        // other scripts you may have
        "src/wv-resources/lib/webviewer.min.js"
    ]
    //...
}

Inside the PROJ_ROOT/src/app/webviewer/ folder create three new files:

webviewer.component.html

<!-- `webviewer.component.html` -->
<!-- Simple DOM element for WebViewer to populate -->
<div class="page">
    <div class="header">WebViewer</div>
    <div #viewer class="viewer"></div>
</div>

webviewer.component.css

/* `webviewer.component.css` */
/* Change this to suit your viewing needs*/
.page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.header {
    height: 60px;
    padding: 8px 8px 8px 16px;
    background: #0206A8;
    box-sizing: border-box;
    font-size: 1.2em;
    line-height: 44px;
    color: white;
}
app-webviewer {
    flex: 1;
    margin: 8px;
    -webkit-box-shadow: 1px 1px 10px #999;
            box-shadow: 1px 1px 10px #999;
}
.viewer { width: 100%; height: 600px; }

webviewer.component.ts

import { Component, ViewChild, OnInit, ElementRef, AfterViewInit } from '@angular/core';

declare const WebViewer: any;

@Component({
  selector: 'web-viewer',
  templateUrl: './webviewer.component.html',
  styleUrls: ['./webviewer.component.css']
})
export class WebViewerComponent implements OnInit, AfterViewInit {
  // Syntax if using Angular 8+
  // true or false depending on code
  @ViewChild('viewer', {static: true / false}) viewer: ElementRef;

  // Syntax if using Angular 7 and below
  @ViewChild('viewer') viewer: ElementRef;

  wvInstance: any;

  ngOnInit() {
    this.wvDocumentLoadedHandler = this.wvDocumentLoadedHandler.bind(this);
  }

  wvDocumentLoadedHandler(): void {
    // you can access docViewer object for low-level APIs
    const { documentViewer, annotationManager, Annotations } = this.wvInstance.Core;
    // and access classes defined in the WebViewer iframe
    const rectangle = new Annotations.RectangleAnnotation();
    rectangle.PageNumber = 1;
    rectangle.X = 100;
    rectangle.Y = 100;
    rectangle.Width = 250;
    rectangle.Height = 250;
    rectangle.StrokeThickness = 5;
    rectangle.Author = annotationManager.getCurrentUser();
    annotationManager.addAnnotation(rectangle);
    annotationManager.drawAnnotations(rectangle.PageNumber);
    // see https://www.pdftron.com/api/web/WebViewerInstance.html for the full list of low-level APIs
  }

  ngAfterViewInit(): void {
    // The following code initiates a new instance of WebViewer.

    WebViewer({
      path: '../../wv-resources/lib',
      licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
      initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf'
    }, this.viewer.nativeElement).then(instance => {
      this.wvInstance = instance;

      // now you can access APIs through this.webviewer.getInstance()
      instance.UI.openElement('notesPanel');
      // see https://docs.apryse.com/documentation/web/guides/ui/apis/
      // for the full list of APIs

      // or listen to events from the viewer element
      this.viewer.nativeElement.addEventListener('pageChanged', (e) => {
        const [ pageNumber ] = e.detail;
        console.log(`Current page is ${pageNumber}`);
      });

      // or from the docViewer instance
      instance.Core.documentViewer.addEventListener('annotationsLoaded', () => {
        console.log('annotations loaded');
      });

      instance.Core.documentViewer.addEventListener('documentLoaded', this.wvDocumentLoadedHandler)
    })
  }
}

Inside of app.module.ts in the PROJ_ROOT/src/app/ folder import webviewer component:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// Your other imports
import { AppComponent } from './app.component';
+import { WebViewerComponent } from './webviewer/webviewer.component';

@NgModule({
    declarations: [
        AppComponent,
+       WebViewerComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

Inside of app.component.html in the PROJ_ROOT/src/app folder place <web-viewer> tag:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<!-- Place the webviewer component wherever you need
  in your application. Remember to style the component
  using webviewer.component.css to suit your needs -->
+<web-viewer></web-viewer>

You can test that the WebViewer is now part of your application by running the following:

ng serve

In your browser, go to localhost:4200 to see the WebViewer in action.

Unable to load WebViewer Find out more about possible solutions to errors in loading WebViewer in your angular project.

Usage Guides Samples API docs