Some test text!

menu
Build your own UIkeyboard_arrow_down

Core engine for WebViewer

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

linkInteracting with Core

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

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

See API documentation for the full list.

linkCreating your own UI using WebViewer Core

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 loadCanvasAsync function to choose exactly when pages are rendered.

<!-- custom-ui.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="custom-ui.css">
  </head>
  <body>
    <div id="header">
      <div class="title">This is a custom viewer</div>
      <button id="zoom-out-button">Zoom out</button>
      <button id="zoom-in-button">Zoom in</button>
      <button id="create-rectangle">Rectangle</button>
      <button id="select">Select</button>
      Latest annotation change: <span id="annotation-change"></span>
    </div>
    <div id="scroll-view">
      <div id="viewer"></div>
    </div>
    <script src="core/CoreControls.js"></script>
    <script src="custom-ui.js"></script>
  </body>
</html>
// custom-ui.js
CoreControls.setWorkerPath('core');

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

const docViewer = new CoreControls.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.on('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.on('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:

https://github.com/PDFTron/webviewer-custom-ui

This sample codebase demonstrates

  • How to leverage PDFTron's document renderer without an <iFrame>
  • How to define custom <button> elements and implement functionality from the PDFTron SDK such as

    • Zoom In/Out
    • Drawing Rectangles
    • Select Tool
    • Creating and Applying Redactions
  • How to implement searching using DocViewer Search APIs

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close