Core engine for WebViewer

Core is the main engine that does document processing, canvas rendering and annotation managing.

Core provide an access point through a few global variables, one of them being Core. This is a namespace containing WebViewer's main classes, objects and methods.

Some of the main namespaces and classes that Core exposes are:

• Core
• DocumentViewer
• AnnotationManager
• DisplayModeManager
• Document
• Annotations
• Bookmark
• Tools

See API documentation for the full list.

If you are using the default UI, you rarely have to worry about calling Core functions directly. However, you can choose not to use the provided UIs and create your own from scratch. The example below shows how to load a document in a custom viewer.

Using the DocumentViewer class will give you a scrolling viewer with caching, pre-rendering, optimized zooming, text selection, annotation creation and a number of other features built in.

Note that if you want to go even lower level you can use the Document class, in particular the loadCanvas function to choose exactly when pages are rendered.

// custom-ui.js
Core.setWorkerPath('core');

const licenseKey = 'Insert commercial license key here after purchase';

const docViewer = new Core.DocumentViewer();

docViewer.setScrollViewElement(document.getElementById('scroll-view'));
docViewer.setViewerElement(document.getElementById('viewer'));
docViewer.loadDocument('path/to/document.pdf', { l: licenseKey });
docViewer.setOptions({ enableAnnotations: true });

setupEventHandlers(docViewer);

docViewer.addEventListener('documentLoaded', () => {
    console.log('document loaded');
    // enable default tool for text and annotation selection
    docViewer.setToolMode(docViewer.getTool('AnnotationEdit'));
});

// setup event handlers for the header
const setupEventHandlers = docViewer => {
  document.getElementById('zoom-in-button').addEventListener('click', () => {
    docViewer.zoomTo(docViewer.getZoom() + 0.25);
  });

  document.getElementById('zoom-out-button').addEventListener('click', () => {
    docViewer.zoomTo(docViewer.getZoom() - 0.25);
  });

  document.getElementById('create-rectangle').addEventListener('click', () => {
    docViewer.setToolMode(docViewer.getTool('AnnotationCreateRectangle'));
  });

  document.getElementById('select').addEventListener('click', () => {
    docViewer.setToolMode(docViewer.getTool('AnnotationEdit'));
  });

  const annotationChangeContainer = document.getElementById('annotation-change');

  const annotManager = docViewer.getAnnotationManager();
  annotManager.addEventListener('annotationChanged', (annotations, action) => {
    annotationChangeContainer.textContent = action + ' ' + annotations.length;
  });
};

/* custom-ui.css */
html, body {
  margin: 0;
  height: 100%;
}

#header {
  height: 100px;
}

.title {
  font-size: 2em;
  font-weight: bold;
}

#scroll-view {
  bottom: 0;
  /* leave room for 100px header */
  height: calc(100% - 100px);
  width: 100%;
  overflow: auto;
}

#viewer {
  margin: auto;
}

.pageContainer {
  border: 1px solid black;
  position: relative;
}

Using some of the above techniques, we have put together a custom interface built using React that you can find in this GitHub repository.

This sample codebase demonstrates

• How to leverage Apryse's document renderer without an <iFrame>
• How to define custom <button> elements and implement functionality from the Apryse SDK such as
  • Zoom In/Out
  • Drawing Rectangles
  • Select Tool
  • Creating and Applying Redactions
• How to implement searching using DocViewer Search APIs