Viewer API - MuPDF WebViewer

The viewer object is an instance accessible from the main mupdfwv.MuPDFWebViewer instance as follows:

const viewer = mupdf.viewer;

This assumes you have returned your instance name as mupdf from the initMuPDFWebViewer() promise!

viewer

The viewer object has the following methods:

setColor

setColor(config: {mainColor: string, subColor: string})

Sets the primary (mainColor) and secondary (subColor) for the viewer user-interface.

Arguments:
- config – An object containing the “main” and “sub” colors as hexidecimal strings.

Config object:

Arguments:
- mainColor – (required) string in format “#RRGGBB”.
- subColor – (required) string in format “#RRGGBB”.
Returns: Promise.

Example

mupdf.viewer.setColor({mainColor: "#00ff00", subColor: "#0000ff"});

setBackgroundColor

setBackgroundColor(config: {color: string})

Sets the background color behind the document page.

Arguments:
- config – An object containing the color as a hexidecimal string.

Config object:

Arguments:
- color – (required) string in format “#RRGGBB”.
Returns: Promise.

Example

mupdf.viewer.setBackgroundColor({color: "#222222"});

setPageBorderColor

viewer.setPageBorderColor(config: {color: string})

Sets the border color around document page instances in the viewer.

Arguments:
- config – An object containing the color as a hexidecimal string.

Config object:

Arguments:
- color – (required) string in format “#RRGGBB”.
Returns: Promise.

Example

viewer.setPageBorderColor({color: "#ff0000"});

setTheme

setTheme(config: {type: mupdf.refs.theme})

Sets the overall theme of the viewer UI.

Arguments:
- config – An object containing the theme type.

Config object:

Arguments:
- type – (required) mupdf.refs.theme.
Returns: Promise.

Example

mupdf.viewer.setTheme({type:mupdf.refs.theme.DARK_MODE});

setLogo

setLogo(config: {url: string})

Sets the brand logo (maximum size: 100x24px). It displays the logo in the top center of the viewer.

Arguments:
- config – An object containing a link to the logo image.

Config object:

Arguments:
- url – (required) string.
Returns: Promise.

Example

mupdf.viewer.setLogo({url: "/logo.png"});

toggleDialog

toggleDialog(config: { dialogType: mupdf.refs.dialog.type, visibility?: boolean })

Toggles, shows or hides the print or search dialog.

Arguments:
- config – An object containing the dialog to show or hide.

Config object:

Arguments:
- dialogType – (required) mupdf.refs.dialog.type.
- visibility – (optional) boolean. Use to explicity show or hide instead of toggle.
Returns: Promise.

Example

mupdf.viewer.toggleDialog({dialogType: mupdf.refs.dialog.type.PRINT, visibility:true});

getScale

getScale()

Gets the current zoom scale.

Returns: Promise<{ scale: number; }>.

Example

async function getScale() {
    return mupdf.viewer.getScale();
}

function success(result) {
    console.log(`Scale is: ${result.scale}`);
}

function failure(error) {
    console.error(`Error: ${error}`);
}

getScale().then(success, failure);

setScale

setScale(config: { scale: number })

Sets the current zoom scale.

Arguments:
- config – Object containing the scale number.

Config object:

Arguments:
- scale – (required) number.
Returns: Promise.

Example

mupdf.viewer.setScale({scale:140});

zoomIn

viewer.zoomIn(config?: { increment?: number })

Zooms in on the document.

Arguments:
- config – Object containing the increment number.

Config object:

Arguments:
- increment – (optional) number.
Returns: Promise.

Example

mupdf.viewer.zoomIn({increment:10});

zoomOut

viewer.zoomOut(config?: { decrement?: number })

Zooms out on the document.

Arguments:
- config – Object containing the decrement number.

Config object:

Arguments:
- decrement – (optional) number.
Returns: Promise.

Example

mupdf.viewer.zoomOut({decrement:10});

getCurrentPageIndex

getCurrentPageIndex()

Gets the current page index (zero-indexed).

Returns: Promise<{ currentPageIndex: number; }>.

Example

async function getPageIndex() {
    return mupdf.viewer.getCurrentPageIndex();
}

function success(result) {
    console.log(`Page index is: ${result.currentPageIndex}`);
}

function failure(error) {
    console.error(`Error: ${error}`);
}

getPageIndex().then(success, failure);

getRotation

getRotation()

Gets the current document rotation angle in degrees.

Returns: Promise.

Example

async function getRotation() {
    return mupdf.viewer.getRotation();
}

function success(result) {
    console.log(`Rotation is: ${result.degree}`);
}

function failure(error) {
    console.error(`Error: ${error}`);
}

getRotation().then(success, failure);

setRotation

setRotation(config: { degree: mupdf.refs.degree })

Sets the document rotation angle in degrees.

Arguments:
- config – Object containing rotation value.

Config object:

Arguments:
- degree – (required) mupdf.refs.degree.
Returns: Promise.

Example

mupdf.viewer.setRotation(mupdf.refs.degree.DEG_90)

rotateClockwise

rotateClockwise()

Rotates clockwise.

Returns: Promise.

Example

mupdf.viewer.rotateClockwise();

rotateCounterClockwise

rotateCounterClockwise()

Rotates counter-clockwise.

Returns: Promise.

Example

mupdf.viewer.rotateCounterClockwise();

setViewMode

setViewMode(config: { viewMode: mupdf.refs.viewMode })

Sets the view mode for the document.

Arguments:
- config – Object containing the view mode.

Config object:

Arguments:
- viewMode – (required) mupdf.refs.viewMode.
Returns: Promise.

Example

mupdf.viewer.setViewMode({viewMode:mupdf.refs.viewMode.DOUBLE});

fitTo

fitTo(config: { to: mupdf.refs.fit.to })

Sets the page fitting.

Arguments:
- config – Object containing the page fitting type.

Config object:

Arguments:
- to – (required) mupdf.refs.fit.to.
Returns: Promise.

Example

mupdf.viewer.fitTo({to:mupdf.refs.fit.to.WIDTH});

scrollToNextPage

scrollToNextPage()

Scrolls to the next page.

Returns: Promise.

Example

mupdf.viewer.scrollToNextPage();

scrollToPreviousPage

scrollToPreviousPage()

Scrolls to the previous page.

Returns: Promise.

Example

mupdf.viewer.scrollToPreviousPage();

scrollTo

scrollTo(config: { type: mupdf.refs.scroll.type, value: number, centerPoint?: { x: number, y: number }, select?: boolean, name?: string, pageIndex?: number })

Scrolls to a specific position on a page or to an annotation.

Arguments:
- config – The configuration object.

Config object:

Arguments:
- type – (required) mupdf.refs.scroll.type.
- value – (required) Scroll value (PAGE: Page index, zero-indexed, ANNOTATION: Annotation id).
- centerPoint – (optional) Center point of the page (only if type is mupdf.refs.scroll.type.PAGE).
- select – (optional) Whether to select the annotation (only if type is mupdf.refs.scroll.type.ANNOTATION).
- name – (optional) Annotation name (only if type is mupdf.refs.scroll.type.ANNOTATION).
- pageIndex – (optional) Page index (only if type is mupdf.refs.scroll.type.ANNOTATION).
Returns: Promise.

Example

// scroll to page 4 of the document
mupdf.viewer.scrollTo({type:mupdf.refs.scroll.type.PAGE, value:3});

openSideView

openSideView(config: { type: mupdf.refs.panel.open })

Opens a side view panel.

Arguments:
- config – An object containing the side view panel to open.

Config object:

Arguments:
- type – (required) mupdf.refs.panel.open
Returns: Promise.

Example

mupdf.viewer.openSideView({type:mupdf.refs.panel.open.BOOKMARK})

closeSideView

closeSideView(config: { type: mupdf.refs.panel.close })

Closes a side view panel.

Arguments:
- config – An object containing the side view panel to close.

Config object:

Arguments:
- type – (required) mupdf.refs.panel.close.
Returns: Promise.

Example

mupdf.viewer.closeSideView({type: mupdf.refs.panel.close.RIGHT});

togglePanel

togglePanel(config: { type: mupdf.refs.panel.open })

Toggles a panel visibility.

Arguments:
- config – An object containing the side view to toggle.

Config object:

Arguments:
- type – (required) mupdf.refs.panel.open.
Returns: Promise.

Example

mupdf.viewer.togglePanel({type:mupdf.refs.panel.open.BOOKMARK});

highlight

highlight(config: { rects: Array<{ color: string; pageIndex: number; opacity?: number; rect: { top: number; left: number; bottom: number; right: number } }> })

Highlights text.

Arguments:
- config – The configuration object.

Config object:

Arguments:
- rects – (required) Array of highlight area information.
- color – (required) Highlight color.
- pageIndex – (required) Page index.
- opacity – (optional) Highlight opacity.
- rect – (required) Highlight area.
Returns: Promise<mupdfwv.HighlightedRect[]>.

Example

mupdf.viewer.highlight({rects:[{color:"#ff00ff", pageIndex:0, rect:{left:0,right:100,top:0, bottom:100}}]});

unhighlight

unhighlight(config:{ rects: { id: number }[] })

Removes highlights.

Arguments:
- config – The configuration object.

Config object:

Arguments:
- rects – (required) Array of highlight area information.
Returns: Promise.

Example

mupdf.viewer.unhighlight({rects:[{id:12}, {id:43}]});

searchText

searchText(config: { keyword: string; caseSensitive?: boolean; useRegex?: boolean; emitEvent?: boolean })

Searches for text. This will open up the search panel if it is not already opened and run the search.

Arguments:
- config – The configuration object.

Config object:

Arguments:
- keyword – (required) Search keyword.
- caseSensitive – (optional) Whether to be case sensitive.
- useRegex – (optional) Whether to use regular expressions.
- emitEvent – (optional) Whether to emit events.
Returns: Promise.

Example

mupdf.viewer.searchText({keyword:"hello", caseSensitive:false})

setLanguage

setLanguage(config: { key: mupdf.refs.language })

Sets the language for the UI.

Arguments:
- config – The configuration object.

Config object:

Arguments:
- key – (required) mupdf.refs.language.
Returns: Promise.

mupdf.viewer.setLanguage({ key: mupdf.refs.language.ENGLISH });

getSize

getSize()

Gets the viewer size.

Returns: Promise<{ width: number; height: number; }>.

Example

async function getSize() {
    return mupdf.viewer.getSize();
}

function success(result) {
    console.log(`Size is: ${result.width}x${result.height}`);
}

function failure(error) {
    console.error(`Error: ${error}`);
}

getSize().then(success, failure);

setViewVisibility

setViewVisibility(config: { view: mupdf.refs.visibility.view, visibility: boolean })

Sets a view visibility.

Arguments:
- config – The configuration object.

Config object:

Arguments:
- view – (required) mupdf.refs.visibility.view. mupdf.refs.visibility.view should be one of TOOLBAR | FLOATING_NAV | SIDE_VIEW | CONTEXT_MENU | INDICATOR.
- visibility - (required) Boolean indicating visibility state.
Returns: Promise.

addButton

viewer.addButton(config: { buttons: Array<{ position: string, icon: mupdf.refs.icon, label: string, onclick: Function }> })

Adds button items to the toolbar.

Arguments:
- config – The configuration object.

Config object:

Arguments:
- buttons – (required) Array of button information.
  
  buttons array objects:
  - Arguments:
    - position – (required) Button position, two options as string references: “TOOLBAR.LEFT_SECTION.FIRST” | “TOOLBAR.LEFT_SECTION.LAST”.
    - icon – (required) Button icon mupdf.refs.icon.
    - label – (required) Button label.
    - onclick – (required) Click handler function.
Returns: Promise.

addContextMenu

viewer.addContextMenu(config: { menus: Array<{ type: string, position: string, icon?: mupdf.refs.icon, label?: string, onclick?: Function }> })

Adds items to the context menu (this is the pop-up menu you see when you right click on a document).

Arguments:
- config – The configuration object.

Config object:

Arguments:
- menus – (required) Array of menu information.
  
  menus array objects:
  - Arguments:
    - type - (required) Menu type: “MENU”.
    - position – (required) Item position, two options as string references: “FIRST” | “LAST”.
    - icon – (optional) Item icon mupdf.refs.icon.
    - label – (optional) Item label.
    - onclick – (optional) Click handler function.
Returns: Promise.

defineDocumentPanel

defineDocumentPanel(config: { items: Array<{ label: string, onclick: Function, icon?: refs.icon }> })

Defines document panel at the left side of the viewer toolbar.

Config object:

Arguments:
- items – (required) Array of menu information.
  
  items array objects:
  - Arguments:
    - label – (required) Item label.
    - onclick – (required) Click handler function.
    - icon – (optional) Item icon mupdf.refs.icon.

defineAnnotSelectMenu

viewer.defineAnnotSelectMenu(config: { html: string; style?: string; script?: string; tool?: mupdf.refs.annotation.tool})

Defines the popup menu when selecting or creating an annotation.

Arguments:
- config – The configuration object.

Config object:

Arguments:
- html – (required) HTML content of the menu.
- style - (optional) CSS content of the menu.
- script - (optional) JavaScript content of the menu.
- tool - (optional) Annotation tool that the menu is displayed for (mupdf.refs.annotation.tool ‘HIGHLIGHT’ | ‘STRIKE’ | ‘UNDERLINE’ | …).
Returns: Promise.

When using style or script, please consider the following

style: CSS selectors will apply to all matching elements within the viewer scope.
script: JavaScript code will be executed in the viewer’s context with the following limitations:
- External resources cannot be accessed.
- Variables declared will be in global scope.

Refer to the Customization: Define Annotation Selection Menu Guide

API Documentation

​viewer

​setColor

​setBackgroundColor

​setPageBorderColor

​setTheme

​setLogo

​toggleDialog

​getScale

​setScale

​zoomIn

​zoomOut

​getCurrentPageIndex

​getRotation

​setRotation

​rotateClockwise

​rotateCounterClockwise

​setViewMode

​fitTo

​scrollToNextPage

​scrollToPreviousPage

​scrollTo

​openSideView

​closeSideView

​togglePanel

​highlight

​unhighlight

​searchText

​setLanguage

​getSize

​setViewVisibility

​addButton

​addContextMenu

​defineDocumentPanel

​defineAnnotSelectMenu

viewer

setColor

setBackgroundColor

setPageBorderColor

setTheme

setLogo

toggleDialog

getScale

setScale

zoomIn

zoomOut

getCurrentPageIndex

getRotation

setRotation

rotateClockwise

rotateCounterClockwise

setViewMode

fitTo

scrollToNextPage

scrollToPreviousPage

scrollTo

openSideView

closeSideView

togglePanel

highlight

unhighlight

searchText

setLanguage

getSize

setViewVisibility

addButton

addContextMenu

defineDocumentPanel

defineAnnotSelectMenu