Section:

Reader mode

Reader mode, also known as reading or reflow mode, makes the document more flexible and easier to read. Apryse is able to extract the reflowable layout of each page in a PDF document as HTML format, and then combine them into one single view. It also supports zooming to increase the font size and page navigation to jump to a particular page.

Apryse Docs Image

How to enable Reader mode feature

Reader mode is available from WebViewer v7.1, and this feature is disabled by default currently. To enable it, you need to set the constructor option fullAPI: true, and you also need to enable the reader mode button in the UI.

For example:

1WebViewer(
2  {
3    path: '...',
4    initialDoc: '...',
5    fullAPI: true
6  },
7  document.getElementById('viewer')
8)
9  .then(instance => {
10    instance.UI.enableElements(['readerPageTransitionButton']);
11
12    ...
13  });

How to get into Reader mode in WebViewer

Click the View Controls button, then under Page Transition section click the Reader button.

Apryse Docs Image

Loading reader mode outside of WebViewer's default UI

Apryse implements reader mode using the webviewer-reading-mode module in the default UI. However this module can be loaded independently outside of WebViewer's UI as well. It takes a PDFDoc object, PDFNet and it can display the document in reader mode in the DOM element you specify.

For example:

1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6
7  <script src="./lib/core/webviewer-core.min.js"></script>
8  <script src="./lib/core/pdf/PDFNet.js"></script>
9  <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
10  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
11  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
12  <script src="./lib/webviewer-reading-mode.js"></script>
13</head>
14
15<body>
16  <div id="wv-reader-mode" style="height: 500px;width: 1000px;border: 1px solid grey;"></div>
17
18  <script>
19    Core.setWorkerPath('./lib/core');
20    const wvReadingMode = WebViewerReadingMode.initialize(PDFNet);
21
22    PDFNet.initialize(undefined, 'ems').then(() => {
23      const main = async () => {
24        try {
25          wvReadingMode.render(
26            PDFNet.PDFDoc.createFromURL("./TestFile.pdf"),
27            document.getElementById('wv-reader-mode'),
28            {
29              pageNumberUpdateHandler: (pageNum) => {
30                console.log(`Current page number: ${pageNum}`);
31              }
32            }
33          );
34        } catch (err) {
35          console.log(err);
36        }
37      };
38      PDFNet.runWithCleanup(main);
39    });
40  </script>
41</body>
42
43</html>

The module also supports APIs like goToPage, setZoom, etc. More details about the APIs.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales