Angular PDF Library - WebViewer Get Started

1import { Component, ViewChild, OnInit, ElementRef, AfterViewInit } from '@angular/core';
2
3declare const WebViewer: any;
4
5@Component({
6  selector: 'web-viewer',
7  templateUrl: './webviewer.component.html',
8  styleUrls: ['./webviewer.component.css']
9})
10export class WebViewerComponent implements OnInit, AfterViewInit {
11  // Syntax if using Angular 8+
12  // true or false depending on code
13  @ViewChild('viewer', {static: true / false}) viewer: ElementRef;
14
15  // Syntax if using Angular 7 and below
16  @ViewChild('viewer') viewer: ElementRef;
17
18  wvInstance: any;
19
20  ngOnInit() {
21    this.wvDocumentLoadedHandler = this.wvDocumentLoadedHandler.bind(this);
22  }
23
24  wvDocumentLoadedHandler(): void {
25    // you can access docViewer object for low-level APIs
26    const { documentViewer, annotationManager, Annotations } = this.wvInstance.Core;
27    // and access classes defined in the WebViewer iframe
28    const rectangle = new Annotations.RectangleAnnotation();
29    rectangle.PageNumber = 1;
30    rectangle.X = 100;
31    rectangle.Y = 100;
32    rectangle.Width = 250;
33    rectangle.Height = 250;
34    rectangle.StrokeThickness = 5;
35    rectangle.Author = annotationManager.getCurrentUser();
36    annotationManager.addAnnotation(rectangle);
37    annotationManager.drawAnnotations(rectangle.PageNumber);
38    // see https://docs.apryse.com/api/web/WebViewerInstance.html for the full list of low-level APIs
39  }
40
41  ngAfterViewInit(): void {
42    // The following code initiates a new instance of WebViewer.
43
44    WebViewer({
45      path: '../../wv-resources/lib',
46      licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
47      initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf'
48    }, this.viewer.nativeElement).then(instance => {
49      this.wvInstance = instance;
50
51      // now you can access APIs through this.webviewer.getInstance()
52      instance.UI.openElement('notesPanel');
53      // see https://docs.apryse.com/web/guides/ui/apis/
54      // for the full list of APIs
55
56      // or listen to events from the viewer element
57      this.viewer.nativeElement.addEventListener('pageChanged', (e) => {
58        const [ pageNumber ] = e.detail;
59        console.log(`Current page is ${pageNumber}`);
60      });
61
62      // or from the docViewer instance
63      instance.Core.documentViewer.addEventListener('annotationsLoaded', () => {
64        console.log('annotations loaded');
65      });
66
67      instance.Core.documentViewer.addEventListener('documentLoaded', this.wvDocumentLoadedHandler)
68    })
69  }
70}