Some test text!

menu

Get started with WebViewer & Angular

Welcome to PDFTron. You can start with WebViewer in an Angular project from scratch or integrate it into an existing application.

AngularJS / Angular 1.x
If you're looking for an AngularJS / Angular 1.x guide please see this blog or the 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. Your free trial includes unlimited trial usage and support from solution engineers.

linkPrerequisites

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

No trial license key required.
The trial of PDFTron SDK works without a license key. A commercial license key is required for use in a production environment. Please fill out our licensing form if you do not have a valid license key.
Keep your commercial license key confidential.
License keys are uniquely generated. Please make sure that it is not publicly available (e.g. in your public GitHub).

linkSetup

  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.

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

linkIntegrate WebViewer

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

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

    linkwebviewer.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; }

    linkwebviewer.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 docViewer = this.wvInstance;
        const annotManager = this.wvInstance.annotManager;
        // and access classes defined in the WebViewer iframe
        const { Annotations } = this.wvInstance;
        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 = annotManager.getCurrentUser();
        annotManager.addAnnotation(rectangle);
        annotManager.drawAnnotations(rectangle.PageNumber);
        // see https://www.pdftron.com/api/web/WebViewer.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.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.docViewer.on('annotationsLoaded', () => {
            console.log('annotations loaded');
          });
    
          instance.docViewer.on('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
│   └── ...
└── ...
  1. 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 { }
  2. 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>
  3. 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

linkNext step

GuidesSamplesAPI docs

linkTroubleshooting

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

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close