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:

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


  • IDRViewer.zoomIn(); - Zoom the document in
  • IDRViewer.zoomOut(); - Zoom the document out
  • IDRViewer.setZoom(IDRViewer.ZOOM_AUTO); - Zoom to best fit the browser (dependant 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


  • 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


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


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‘eventtype’, eventListener);


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


  • 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


  • 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


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


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


  • layout (string) - The current layout mode


  • type (string) - The current select mode


  • 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


No arguments

  • 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


  • 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.


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


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.


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

Presentation Layout Transitions:

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

Magazine Layout Transitions:

  • transition-magazine

Have more questions? Ask us on Discord