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://docs.apryse.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/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.