Some test text!

menu
Reader modekeyboard_arrow_down

Reader mode

Reader mode, also known as reading or reflow mode, makes the document more flexible and easier to read. PDFTron 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

linkHow 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.enableElements(['readerPageTransitionButton']);

    ...
  });

linkHow to get into Reader mode in WebViewer

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

Reader mode

linkLoading reader mode outside of WebViewer's default UI

PDFTron 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/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'),
            (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: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close