Integrate WebViewer into Tomcat JavaServer Pages (JSP)

Using an Apache Tomcat 9.0 Servlet/JSP container, WebViewer is defined as a web application to be hosted and displayed when navigated to. WebViewer 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 and includes a number of example files that can be loaded (PDF, XOD, and an annotation XFDF sample).

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.

JavaScript

index.js

WebViewer({
    path: 'lib',
    initialDoc: 'files/webviewer-demo-annotated.pdf'
  }, document.getElementById('viewer'))
  .then(function(instance) {

    // you can access documentViewer object for low-level APIs
    const { documentViewer } = instance.Core;

    // now you can access APIs through this.webviewer.getInstance()
    instance.UI.openElements(['notesPanel']);
    // see https://www.pdftron.com/documentation/web/guides/ui/apis for the full list of APIs
    
    // or listen to events from the viewer element
    documentViewer.addEventListener('pageNumberUpdated', (pageNumber) => {
      console.log(`Current page is ${pageNumber}`);
    });

    // or from the documentViewer instance
    documentViewer.addEventListener('annotationsLoaded', () => {
      console.log('annotations loaded');
    });

    documentViewer.addEventListener('documentLoaded', function() {
      // and access classes defined in the WebViewer iframe
      const { Annotations, annotationManager } = instance.Core;
      const rectangle = new Annotations.RectangleAnnotation();
      rectangle.PageNumber = 1;
      rectangle.X = 100;
      rectangle.Y = 100;
      rectangle.Width = 250;
      rectangle.Height = 250;
      rectangle.StrokeThickness = 5;
      rectangle.Author = annotationManager.getCurrentUser();
      annotationManager.addAnnotation(rectangle);
      annotationManager.drawAnnotations(rectangle.PageNumber);
      // see https://www.pdftron.com/api/web/WebViewer.html for the full list of low-level APIs
    });

  });