@pdftron/webviewer-reading-mode

webviewer-reading-mode

A node module to view PDF in reading mode. It will convert the given PDF file to html, and then render it in given viewport.

Installation

npm i @pdftron/webviewer-reading-mode

Usage

1. Import

In standalone HTML page

Import dist/webviewer-reading-mode.js into your page.

Using NPM

import WebViewerReadingMode from "@pdftron/webviewer-reading-mode";

2. Call the 'initialize' API to initialize WebViewerReadingMode

Example:

/**
 * Initialize a new instance of WebViewerReadingMode and return it.
 * @param {PDFNet} pdfNet The PDFNet lib.
 */
this.wvReadingMode = WebViewerReadingMode.initialize(PDFNet);

3. Call the 'render' API to render PDF in reading mode

Example:

/**
 * Render ReadingModeComponent in the given viewer element.
 * @param {Promise<PDFDoc>} doc The PDFDoc object of the PDF file to render.
 * @param {Element} viewerElement The element that ReadingModeComponent is rendered in.
 * @param {object} options Render options. Note: All options are optional.
 * @param {function} options.pageNumberUpdateHandler Function to handle page number update event.
 * @param {number} options.pageNum The page number to go to after initialization. (1-indexed) If not set, will default to 1.
 * @param {boolean} options.isSinglePageMode Default: True. True will render in single-page mode, false will render in continuous-page mode.
 * @param {function} options.pageCountHandler Function to handle page count.
 * @param {function} options.editStyleHandler Function to handle Edit Style button click event.
 */
// Render a file from url in single-page mode, and go to the 3rd page after initial load.
this.wvReadingMode.render(
  PDFNet.PDFDoc.createFromURL(url),
  document.getElementById('web-viewer'),
  {
    pageNumberUpdateHandler: (pageNum) => { /* Handle page number updated */ },
    pageNum: 3,
    isSinglePageMode: true,
    pageCountHandler: (pageCount) => { /* Handle page count updated */ },
    editStyleHandler: (annotColor, annotType, setAnnotColor, doneSetAnnotColor) => { /* Handle Edit Style button click event */ }
  }
);

4. Call the 'goToPage' API to jump to specific page

Example:

/**
 * Go to the page with given page number.
 * @param {number} pageNum The page number to go to.
 */
// Go to 5th page
this.wvReadingMode.goToPage(5);

5. Call the 'setZoom' API to zoom in/out

Example:

/**
  * Set the zoom level for all pages.
  * @param {number} zoomLevel The zoom level to set.
  */
// Zoom to 150%
this.wvReadingMode.setZoom(1.5);

6. Call the 'setAddAnnotConfig' API to set configuration for adding new annotation

Example:

/**
  * Set the configuration for adding new annotation.
  * @param {object} config Add annotation config. { type: AnnotationType, color: string }
  */
// Set the current add annotation configuration to be Highlight with red color.
this.wvReadingMode.setAddAnnotConfig({ type: WebViewerReadingMode.Highlight, color: '#ff0000' });

7. Call the 'unmount' API to unmount ReadingModeComponent

Example:

/**
 * Unmount ReadingModeComponent from the current viewerElement.
 */
this.wvReadingMode.unmount();

Running samples

Clone the project from https://github.com/XodoDocs/webviewer-reading-mode.git. Go to the project directory and run:

npm i
npm run build
npm start

Then it will open the browser redirect to the samples page.