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

$3

#### In standalone HTML page
Import dist/webviewer-reading-mode.js into your page.
#### Using NPM
`
import WebViewerReadingMode from "@pdftron/webviewer-reading-mode";
`

$3

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

$3

Example:
`js
/**
* Render ReadingModeComponent in the given viewer element.
* @param {Promise} 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 / }
}
);
`

$3

Example:
`js
/**
* 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);
`

$3

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

$3

Example:
`js
/**
* 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' });
`

$3

Example:
`js
/**
* 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.