Implement WebViewer using Vanilla JavaScript

1import WebViewer from '@pdftron/webviewer';
2
3const element = document.getElementById('viewer');
4
5const onLoad = async (instance) => {
6  const { documentViewer, annotationManager, Annotations } = instance.Core;
7
8  documentViewer.addEventListener('documentLoaded', () => {
9    const rectangleAnnot = new Annotations.RectangleAnnotation({
10      PageNumber: 1,
11      // values are in page coordinates with (0, 0) in the top left
12      X: 100,
13      Y: 150,
14      Width: 200,
15      Height: 50,
16      Author: annotationManager.getCurrentUser(),
17    });
18
19    annotationManager.addAnnotation(rectangleAnnot);
20    // need to draw the annotation otherwise it won't show up until the page is refreshed
21    annotationManager.redrawAnnotation(rectangleAnnot);
22  });
23};
24
25WebViewer(
26  {
27    path: '/public/webviewer',
28    initialDoc:
29      'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
30  },
31  element
32).then((instance) => {
33  onLoad(instance);
34});
35