Integrating PDF.js Express Viewer into an existing Angular project

This guide will help you integrate a free trial of WebViewer into existing Angular applications. You can find a new project guide here.

Prerequisites

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

• PDF.js Express Viewer:

Setup

1. From PDFJSExpressViewer.zip extract the PDFJSExpressViewer 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 PDFJSExpress 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.

   {
       //...
       "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"
       ]
       //...
   }
   

Integrate WebViewer

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 className="page">
       <div className="header">WebViewer</div>
       <div #viewer className="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 instance = this.wvInstance;
       const { Core } = instance;
   
       // adding an event listener for when a document is loaded
       Core.documentViewer.addEventListener('documentLoaded', () => {
         console.log('document loaded');
       });
   
       // adding an event listener for when the page number has changed
       Core.documentViewer.addEventListener('pageNumberUpdated', (pageNumber) => {
         console.log(`Page number is: ${pageNumber}`);
       });
       // see https://pdfjs.express/api/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;
         const { Core, UI } = instance;
         
         // adds a button to the header that on click sets the page to the next page
         UI.setHeaderItems(header => {
           header.push({
             type: 'actionButton',
             img: 'https://icons.getbootstrap.com/assets/icons/caret-right-fill.svg',
             onClick: () => {
               const currentPage = Core.documentViewer.getCurrentPage();
               const totalPages = Core.documentViewer.getPageCount();
               const atLastPage = currentPage === totalPages;
   
               if (atLastPage) {
                 Core.documentViewer.setCurrentPage(1);
               } else {
                 Core.documentViewer.setCurrentPage(currentPage + 1);
               }
             }
           });
         });
       })
     }
   }
   

   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={{"textAlign":"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:

   ng serve
   

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

   

Next step

Troubleshooting

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