Implement WebViewer using Vanilla JavaScript

This is a basic WebViewer setup using vanilla JavaScript. It is a great starting point for learning how WebViewer works before moving on to more advanced projects or frameworks.

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.

Once you generate your license key, it will automatically be included in your sample code below.

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

import WebViewer from '@pdftron/webviewer';

const element = document.getElementById('viewer');

const onLoad = async (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);
    // need to draw the annotation otherwise it won't show up until the page is refreshed
    annotationManager.redrawAnnotation(rectangleAnnot);
  });
};

WebViewer(
  {
    path: '/public/webviewer',
    initialDoc:
      'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
    licenseKey: 'YOUR_LICENSE_KEY',
  },
  element
).then((instance) => {
  onLoad(instance);
});