Some test text!

Search
Hamburger Icon

Web / 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 (in ways that don't permanently affect the document). 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);
      }
    });
  });

Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales