Display Documents on mobile, tablet and desktop

The world’s most flexible document viewing solution

Download Trial Request a quote

IDRViewer API and Documentation

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.

Simple Example:

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 (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

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 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:

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

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

Default Settings:

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

Example:

Transitions:

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

Example:

Presentation Transitions:

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

Magazine Transitions:

  • transition-magazine
IDRSolutions Limited 1999-2016