Integrating existing Angular project with WebViewer JavaScript PDF library

This guide will help you integrate a free trial of WebViewer into existing Angular applications. Your free trial includes unlimited trial usage and support from solution engineers.

• An existing angular application, which also means you already have Angular CLI.

• WebViewer:

Download WebViewer

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

2. 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.

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

4. Update the angular.json file inside your project's root folder at PROJ_ROOT/ to update assets and scripts under the options for build.

//@data {"ga":7715720733}// { //... "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" ] //... } ```

1. Inside the PROJ_ROOT/src/app/webviewer/ folder create three new files - webviewer.component.html, webviewer.component.css, webviewer.component.ts:

   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: #00a5e4;
       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',
         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://www.pdftron.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)
       })
     }
   }

At this point, the structure of your PROJ_ROOT/src/app/ directory should be similar to:

my-app
├── angular.json
├── CONTRIBUTING.md
├── e2e
├── LICENSE
├── node_modules
│   └── ...
├── package.json
├── README.md
├── src
│   ├── app
│   │   ├── webviewer
│   │   │   ├── webviewer.component.html
│   │   │   ├── webviewer.component.css
│   │   │   └── webviewer.component.ts
│   │   └── ... app component/module files
│   ├── wv-resources
│   │   └── lib
│   │       └── webviewer.min.js
│   └── ...
└── ...

2. 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 { }

3. 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>

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

//@data {"ga":3845431078}// ng serve ```

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

Guides Samples API docs

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