IDRViewer JavaScript API

The IDRViewer is designed to be a simple viewing component that is easy to build a UI around. It implements all the complex tasks such as page loading, zoom, page display & layouts, etc and provides a clean API that can be used to interact with the viewer. Several example UIs are provided that can be used as they are, or can serve as a starting point or example of how to build your own user interface.

Viewer API:

Navigation:

• IDRViewer.next(); - Go to the next page
• IDRViewer.prev(); - Go to the previous page
• IDRViewer.goToPage(page); - Go to the specified page

Zoom:

• IDRViewer.zoomIn(); - Zoom the document in
• IDRViewer.zoomOut(); - Zoom the document out
• IDRViewer.setZoom(IDRViewer.ZOOM_AUTO); - Zoom to best fit the browser (dependent on document & layout mode)
• IDRViewer.setZoom(IDRViewer.ZOOM_ACTUALSIZE); - Zoom the document to 100%
• IDRViewer.setZoom(IDRViewer.ZOOM_FITWIDTH); - Zoom to fit width (largest page width used in continuous mode)
• IDRViewer.setZoom(IDRViewer.ZOOM_FITHEIGHT); - Zoom to fit height (largest page height used in continuous mode)
• IDRViewer.setZoom(IDRViewer.ZOOM_FITPAGE); - Zoom to fit the page (largest page used in continuous mode)
• IDRViewer.setZoom(0.5); - Zoom the document to a specified zoom value

Layout:

• IDRViewer.setLayout(IDRViewer.LAYOUT_CONTINUOUS); - Sets the layout to continuous mode
• IDRViewer.setLayout(IDRViewer.LAYOUT_PRESENTATION); - Sets the layout to presentation mode
• IDRViewer.setLayout(IDRViewer.LAYOUT_MAGAZINE); - Sets the layout to magazine mode

Selection:

• IDRViewer.setSelectMode(IDRViewer.SELECT_PAN); - Sets selection mode to mouse panning
• IDRViewer.setSelectMode(IDRViewer.SELECT_SELECT); - Sets the selection mode to select text

Events:

A variety of events are available to listen to as a way to update the UI based on user interaction. Event listeners can be added and removed using IDRViewer.on(‘eventtype’, eventListener); and IDRViewer.off(‘eventtype’, eventListener);

Example:

IDRViewer.on('pagechange', function(data) {
    console.log("navigated to page " + data.page);
});

ready:

• page (number) - The current page
• pagecount (number) - The number of pages in the document
• bounds (array[[number, number]]) - An array of page bounds
• thumbnailType (string) - The file type of thumbnails (jpg or png)
• selectMode (string) - The current selection mode
• isMobile (boolean) - Whether the user is browsing from a mobile or tablet
• layout (string) - The current layout mode
• availableLayouts (array[string]) - The layouts that are available to use
• title (string) - The title of the converted file (if available)
• bookmarks (object) - The bookmarks in the converted file (if available)
• pageType (string) - The file type of the page (html or svg)
• isFirstPage (boolean) - If the current page is the first
• isLastPage (boolean) - If the current page is the last

pagechange:

• page (number) - The current page
• pagecount (number) - The number of pages in the document
• isFirstPage (boolean) - If the current page is the first
• isLastPage (boolean) - If the current page is the last

pageload:

• page (number) - The page number that was loaded

pageunload:

• page (number) - The page number that was unloaded

layoutchange:

• layout (string) - The current layout mode

selectchange:

• type (string) - The current select mode

zoomchange:

• zoomType (string) - The current zoom mode
• scale (number) - The actual scale value
• isMinZoom (boolean) - If the current zoom is the minimum
• isMaxZoom (boolean) - If the current zoom is the maximum

searchready:

No arguments

search:

• searchTerm (String) - The string that was searched for
• results (array[object]) - All the results for the search term and settings on the PDF, each result contains the page number, the index relative to the page, and a snippet of the matched text
• settings (object(matchCase, limitOnePerPage, decompose snippets)) - The settings used for the search

searchresultselected:

• resultIndex (int) - The index of the selected result in the searchResults array
• result (object) - The result object prefetched from the array

Default Settings:

To change the default settings, the Viewer API can be used before the setup function is called.

Example:

IDRViewer.goToPage(2); // Set default page
IDRViewer.setZoom(IDRViewer.ZOOM_FITPAGE); // Set default zoom
IDRViewer.setLayout(IDRViewer.LAYOUT_PRESENTATION); // Set default layout
IDRViewer.setSelecMode(IDRViewer.SELECT_SELECT); // Set default select mode
IDRViewer.setup(); // Load viewer with new default settings

Transitions:

Various transitions are available in the presentation and magazine layout modes. Transitions can be enabled by adding the relevant CSS class to the IDRViewer element.

Example:

<div id="idrviewer" class="transition-flip"></div>

Presentation Layout Transitions:

• transition-flip
• transition-slide
• transition-throw
• transition-fade

Magazine Layout Transitions:

• transition-magazine