Reader Mode Sample Code

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Web SDKFull API

This JavaScript sample lets you open documents in reader mode to make them easier to read. This sample works on all browsers (including IE11) and mobile devices without using plug-ins.

Learn more about our Web SDK.

Implementation steps

Step 1: Get started with WebViewer in your preferred web stack

Step 2: Enable the full API

Step 3: Add the sample code provided in this guide

This full sample is one of many included in the manual download of WebViewer.

JavaScript

(() => {
  window.addEventListener('viewerLoaded', () => {
    const instance = window.instance;
    const parentDocument = window.parent.document;

    instance.UI.enableElements(['readerPageTransitionButton']);

    parentDocument.getElementById('select').onchange = e => {
      instance.UI.loadDocument(e.target.value);
    };

    parentDocument.getElementById('file-picker').onchange = e => {
      const file = e.target.files[0];
      if (file) {
        instance.UI.loadDocument(file);
      }
    };

    parentDocument.getElementById('url-form').onsubmit = e => {
      e.preventDefault();
      instance.UI.loadDocument(parentDocument.getElementById('url').value);
    };

    instance.Core.documentViewer.addEventListener(
      'documentLoaded',
      () => {
        instance.UI.setZoomLevel(1);
        instance.UI.toggleReaderMode();
      },
      { once: true }
    );
  });
})();
// eslint-disable-next-line spaced-comment
//# sourceURL=config.js