Select a product

PDF.js Express Free Viewerplay_arrow

Professional PDF.js Viewing - Free

PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

Get Started

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

Compare

play_arrow

Advanced Capabilities

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Integrating PDF.js Express Viewer into an existing Angular project

AngularJS / Angular 1.x
If you're looking for an AngularJS / Angular 1.x guide please see this AngularJS sample project. Otherwise, continue with the rest of this guide for Angular 2+.

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:

Download PDF.js Express Viewer
Free license key required.

To use PDF.js Express Viewer you do need a free license key. Please get your free Viewer key here if you do not have one.

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.

    Angular WV integrated in project

Next step

GuidesSamplesAPI docs

Troubleshooting

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