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.

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:

JavaScript (SDK v8.0+)

WebViewer(
  {
    path: '...',
    initialDoc: '...',
    fullAPI: true
  },
  document.getElementById('viewer')
)
  .then(instance => {
    instance.UI.enableElements(['readerPageTransitionButton']);

    ...
  });

JavaScript (SDK v7.0+)

WebViewer(
  {
    path: '...',
    initialDoc: '...',
    fullAPI: true
  },
  document.getElementById('viewer')
)
  .then(instance => {
    instance.enableElements(['readerPageTransitionButton']);

    ...
  });

How to get into Reader mode in WebViewer

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

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:

JavaScript (SDK v8.0+)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <script src="./lib/core/webviewer-core.min.js"></script>
  <script src="./lib/core/pdf/PDFNet.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="./lib/webviewer-reading-mode.js"></script>
</head>

<body>
  <div id="wv-reader-mode" style="height: 500px;width: 1000px;border: 1px solid grey;"></div>

  <script>
    Core.setWorkerPath('./lib/core');
    const wvReadingMode = WebViewerReadingMode.initialize(PDFNet);

    PDFNet.initialize(undefined, 'ems').then(() => {
      const main = async () => {
        try {
          wvReadingMode.render(
            PDFNet.PDFDoc.createFromURL("./TestFile.pdf"),
            document.getElementById('wv-reader-mode'),
            {
              pageNumberUpdateHandler: (pageNum) => {
                console.log(`Current page number: ${pageNum}`);
              }
            }
          );
        } catch (err) {
          console.log(err);
        }
      };
      PDFNet.runWithCleanup(main);
    });
  </script>
</body>

</html>

JavaScript (SDK v7.0+)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <script src="./lib/core/CoreControls.js"></script>
  <script src="./lib/core/pdf/PDFNet.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="./lib/webviewer-reading-mode.js"></script>
</head>

<body>
  <div id="wv-reader-mode" style="height: 500px;width: 1000px;border: 1px solid grey;"></div>

  <script>
    CoreControls.setWorkerPath('./lib/core');
    const wvReadingMode = WebViewerReadingMode.initialize(PDFNet);

    PDFNet.initialize(undefined, 'ems').then(() => {
      const main = async () => {
        try {
          wvReadingMode.render(
            PDFNet.PDFDoc.createFromURL("./TestFile.pdf"),
            document.getElementById('wv-reader-mode'),
            {
              pageNumberUpdateHandler: (pageNum) => {
                console.log(`Current page number: ${pageNum}`);
              }
            }
          );
        } catch (err) {
          console.log(err);
        }
      };
      PDFNet.runWithCleanup(main);
    });
  </script>
</body>

</html>

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