Some test text!

Overview
Documentation
All Products
Search
Downloads
Chat with us
Discord Logo
Hamburger Icon

Web / Guides / Reader mode

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.

Reader mode

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:

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

    ...
  });
How to get into Reader mode in WebViewer
Click the View Controls button, then under Page Transition section click the Reader button.
Reader mode
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:
<!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>
The module also supports APIs like goToPage, setZoom, etc. More details about the APIs can be found here.
Get the answers you need: Chat with us