Integrate WebViewer into a Vue.js Project

Using a Vue project (scaffolded using vite through create-vue), WebViewer is defined in a Vue component and added to the project. The component is able to view, annotate, and manipulate PDFs and other documents.

The sample also demonstrates how to programmatically add a rectangle annotation with user-defined dimensions. For more information, see this guide.

WebViewer provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.

Click the button below to view the full project in GitHub.

Vue

WebViewer.vue

<template>
  <div id="webviewer" ref="viewer"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import WebViewer from "@pdftron/webviewer";

const licenseKey = import.meta.env.VITE_DEMO_KEY;

const props = defineProps<{
  initialDoc: string;
}>();
const viewer = ref<HTMLDivElement | null>(null);

onMounted(() => {
  if (!viewer.value) {
    return;
  }

  WebViewer(
    {
      path: "/lib/webviewer",
      initialDoc: props.initialDoc,
      licenseKey,
    },
    viewer.value,
  ).then((instance) => {
    const { documentViewer, annotationManager, Annotations } = instance.Core;

    documentViewer.addEventListener("documentLoaded", () => {
      const rectangleAnnot = new Annotations.RectangleAnnotation({
        PageNumber: 1,
        // Values are in page coordinates with (0, 0) in the top left.
        X: 100,
        Y: 150,
        Width: 200,
        Height: 50,
        Author: annotationManager.getCurrentUser(),
      });
      annotationManager.addAnnotation(rectangleAnnot);
      annotationManager.redrawAnnotation(rectangleAnnot);
    });
  });
});
</script>

<style>
#webviewer {
  height: 100vh;
}
</style>