Integrate WebViewer into a Vue.js Project

1<template>
2  <div id="webviewer" ref="viewer"></div>
3</template>
4
5<script>
6import { ref, onMounted } from 'vue';
7import WebViewer from '@pdftron/webviewer';
8
9export default {
10  name: 'WebViewer',
11  props: { initialDoc: { type: String } },
12  setup(props) {
13    const viewer = ref(null);
14    onMounted(() => {
15      WebViewer({ 
16        path: '/lib/webviewer', 
17        initialDoc: props.initialDoc, 
18        licenseKey: 'your_license_key'  // sign up to get a free trial key at https://dev.apryse.com
19      }, viewer.value).then(
20        (instance) => {
21          const { documentViewer, annotationManager, Annotations } =
22            instance.Core;
23
24          documentViewer.addEventListener('documentLoaded', () => {
25            const rectangleAnnot = new Annotations.RectangleAnnotation({
26              PageNumber: 1,
27              // values are in page coordinates with (0, 0) in the top left
28              X: 100,
29              Y: 150,
30              Width: 200,
31              Height: 50,
32              Author: annotationManager.getCurrentUser(),
33            });
34            annotationManager.addAnnotation(rectangleAnnot);
35            annotationManager.redrawAnnotation(rectangleAnnot);
36          });
37        }
38      );
39    });
40    return {
41      viewer,
42    };
43  },
44};
45</script>
46
47<style>
48#webviewer {
49  height: 100vh;
50}
51</style>
52