Section:

Reader Mode Sample Code

Requirements
Web SDK
Full 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.

1(() => {
2  window.addEventListener('viewerLoaded', () => {
3    const instance = window.instance;
4    const parentDocument = window.parent.document;
5
6    instance.UI.enableElements(['readerPageTransitionButton']);
7
8    parentDocument.getElementById('select').onchange = e => {
9      instance.UI.loadDocument(e.target.value);
10    };
11
12    parentDocument.getElementById('file-picker').onchange = e => {
13      const file = e.target.files[0];
14      if (file) {
15        instance.UI.loadDocument(file);
16      }
17    };
18
19    parentDocument.getElementById('url-form').onsubmit = e => {
20      e.preventDefault();
21      instance.UI.loadDocument(parentDocument.getElementById('url').value);
22    };
23
24    instance.Core.documentViewer.addEventListener(
25      'documentLoaded',
26      () => {
27        instance.UI.setZoomLevel(1);
28        instance.UI.toggleReaderMode();
29      },
30      { once: true }
31    );
32  });
33})();
34// eslint-disable-next-line spaced-comment
35//# sourceURL=config.js

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales