Some test text!

Loading...
Guides
Viewer events

Interacting with Viewer events

WebViewer triggers numerous events in response to user interactions or processes. They might be helpful in adding additional behavior to how users use WebViewer or performing updates to annotations as users scroll to another page.

Page events

Other than the lifecycle events mentioned in the loading guide , you may also be interested when a user changes pages. The pageNumberUpdated event can be triggered by scrolling through the document or jumping to a certain page.

Subscribe to this event via DocumentViewer .

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;

    documentViewer.addEventListener('pageNumberUpdated', pageNumber => {
      const annotsOnPage = annotationManager.getAnnotationList().filter(annot => annot.PageNumber === pageNumber);

      // Do something with annotations e.g. Focus on certain form fields
    });
  });

Display events

When users are viewing the document, they may change zoom levels or how pages are viewed. These will also trigger events that you could listen to.

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    const { documentViewer, Tools } = instance.Core;

    documentViewer.addEventListener('zoomUpdated', zoom => {
      if (zoom > 3) {
        // Change tools when zoom level is above 300%
        documentViewer.setToolMode(documentViewer.getToolMode(Tools.ToolNames.RECTANGLE));
      }
    });
  });

Search events

When searches are conducted with the DocumentViewer, whether this is done through the UI or directly through an API, you can get the results by listening to these events:

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    const { documentViewer, Tools } = instance.Core;

    const prevSearchResults = []; // Rendered in a custom panel

    documentViewer.addEventListener('searchResultsChanged', results => {
      prevSearchResults.push(results);
    });
  });

Input events

These input events are fired when the mouse and keyboard are interacting with the document viewer.

Here is an example of an onHover for annotations using the mouseMove event.

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;

    documentViewer.addEventListener('mouseMove', evt => {
      const annot = annotationManager.getAnnotationByMouseEvent(evt);
      if (annot) {
        console.log("onHover: " + annot.Id);
      }
    });
  });

Get the answers you need: Support

Upcoming Webinar: PDFTron SDK Tech Review | Nov 29, 2022 at 2 pm ET

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use