Some test text!

platform
search

UI APIs

Contents

addSearchListener
addSortStrategy
closeDocument
closeElements
disableAnnotations
disableDownload
disableElements
disableFilePicker
disableLocalStorage
disableMeasurement
disableNotesPanel
disablePrint
disableRedaction
disableTextSelection
disableTools
downloadPdf
enableAnnotations
enableDownload
enableElements
enableFilePicker
enableLocalStorage
enableMeasurement
enableNotesPanel
enablePrint
enableRedaction
enableTextSelection
enableTools
focusNote
getAnnotationUser
getCurrentPageNumber
getFitMode
getLayoutMode
getPageCount
getToolMode
getZoomLevel
goToFirstPage
goToLastPage
goToNextPage
goToPrevPage
isAdminUser
isElementDisabled
isElementOpen
isMobileDevice
isReadOnly
isToolDisabled
loadDocument
openElements
print
registerTool
removeSearchListener
rotateClockwise
rotateCounterClockwise
searchText
searchTextFull
setActiveHeaderGroup
setActiveLeftPanel
setAdminUser
setAnnotationUser
setCustomNoteFilter
setCustomPanel
setCurrentPageNumber
setEngineType
setFitMode
setHeaderItems
setIconColor
setLanguage
setLayoutMode
setMaxZoomLevel
setMinZoomLevel
setNoteDateFormat
setPrintQuality
setPageLabels
setReadOnly
setSortStrategy
setSwipeOrientation
setTheme
setToolMode
setZoomLevel
toggleElement
toggleFullScreen
unregisterTool
updateTool
useEmbeddedPrint

The following APIs are methods in viewer instance. To make sure the viewer is fully loaded, you should listen to an event on viewer element before accessing viewer instance. For example,

var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer({ ... }, viewerElement);

viewerElement.addEventListener('ready', () => {
  var viewerInstance = viewer.getInstance();
  // call APIs from viewerInstance
});

linkaddSearchListener(listener)

Adds a listener function to be called when search is completed.

linkParameters

linklistener

Listener function that will be triggered when search completed

TypeRequiredDefault
functiontrueN/A

The function will receive the following parameters:

NameTypeDescription
searchValuestringSearch value
optionsobjectSearch options object, which includes caseSensitive, wholeWord, wildcard and regex
resultsarray of objectsSearch results

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  const searchListener = (searchValue, options, results) => {
    console.log(searchValue, options, results);
  };
  viewerInstance.addSearchListener(searchListener);
});

Returns: N/A

linkaddSortStrategy(sortStrategy)

Adds a sorting strategy in notes panel

linkParameters

linksortStrategy

Sorting strategy that will be used to sort notes

TypeRequiredDefault
objecttrueN/A

The object will have the following properties:

NameTypeDescription
namestringName of the strategy, which will be shown in notes panel's dropdown
getSortedNotesfunctionFunction that takes unsorted notes and returns them sorted
shouldRenderSeparatorfunctionFunction that returns when a separator should be rendered
getSeparatorContentfunctionFunction that returns the content of a separator

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.addSortStrategy({
    name: 'annotationType',
    getSortedNotes: notes => {
      return notes.sort((a ,b) => {
        if (a.Subject < b.Subject) return -1;
        if (a.Subject > b.Subject) return 1;
        if (a.Subject === b.Subject) return 0;
      })
    },
    shouldRenderSeparator: (prevNote, currNote) => prevNote.Subject !== currNote.Subject,
    getSeparatorContent: (prevNote, currNote) => `${currNote.Subject}`
  });
});

Returns: N/A

linkcloseDocument()

Closes the document that's currently opened

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.closeDocument().then(() => {
    console.log('Document is closed');
  });
});

Returns: Promise

linkcloseElements(dataElements)

Sets visibility states of the elements to be hidden. Note that closeElements works only for panel/overlay/popup/modal elements.

linkParameters

linkdataElements

Array of data-element attribute values for DOM elements.

TypeRequiredDefault
array of stringstrueN/A

linkExample

// closes (hides) text popup and annotation popup in the UI
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.closeElements([ 'menuOverlay', 'leftPanel' ]);
});

Returns N/A

linkdisableAnnotations()

Disables annotations feature, affecting the annotation visibility and elements related to annotations.

linkExample

// disable annotations feature
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.disableAnnotations();
});

Returns N/A

linkdisableDownload()

Disables download feature, affecting the Download button in menu overlay.

linkExample

// disable download feature
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.disableDownload();
});

Returns N/A

linkdisableElements(dataElements)

Unmount multiple elements in the DOM. Note that this ONLY removes the DOM elements without disabling related features (ie. To disable an annotation tool entirely, see disableTools).

linkParameters

linkdataElements

Array of data-element attribute values for DOM elements.

TypeRequiredDefault
array of stringtrueN/A

linkExample

// remove left panel and left panel button from the DOM
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.disableElements([ 'leftPanel', 'leftPanelButton' ]);
});

Returns N/A

linkdisableFilePicker()

Disables file picker feature, affecting the Open files button in menu overlay and shortcut to open local files (ctrl/cmd + o).

linkExample

// disable file picker feature
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.disableFilePicker();
});

Returns N/A

linkdisableLocalStorage()

Disables localStorage feature, preventing tool styles from being saved to localStorage after changed.

linkExample

// disable localStorage feature
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.disableLocalStorage();
});

Returns N/A

linkdisableMeasurement()

Disables measurement feature, affecting any elements related to measurement tools

linkExample

// disable measurement feature
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.disableMeasurement();
});

Returns N/A

linkdisableNotesPanel()

Disables notes panel feature, affecting any elements related to notes panel

linkExample

// disable notes panel feature
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.disableNotesPanel();
});

Returns N/A

linkdisablePrint()

Disables print feature, affecting the Print button in menu overlay and shortcut to print (ctrl/cmd + p).

linkExample

// disable print feature
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.disablePrint();
});

Returns N/A

linkdisableRedaction()

Disables redaction feature, affecting any elements related to redaction

linkExample

// disable redaction feature
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.disableRedaction();
});

Returns N/A

linkdisableTextSelection()

Disables text to be selected in the document.

linkExample

// disable text to be selected in the document
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.disableTextSelection();
});

Returns N/A

linkdisableTools(toolNames)

Disable multiple tools.

linkParameters

linktoolNames

Array of name of the tools, either from tool names list or the name you registered your custom tool with. If nothing is passed, all tools will be disabled.

TypeRequiredDefault
array of stringfalseall tools

linkExample

// disable sticky annotation tool and free text tool
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.disableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
});

Returns N/A

linkdownloadPdf(includeAnnotations)

Downloads the pdf document with or without annotations added by WebViewer UI.

linkParameters

linkincludeAnnotations

Whether or not to include annotations added by WebViewer UI.

TypeRequiredDefault
boolfalsetrue

linkExample

// download pdf without annotations added by WebViewer UI
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.downloadPdf(false);
});

Returns N/A

linkenableAnnotations()

Enables annotations feature, affecting the annotation visibility and elements related to annotations.

linkExample

// enable annotations feature
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableAnnotations();
});

Returns N/A

linkenableDownload()

Enables download feature, affecting the Download button in menu overlay.

linkExample

// enable download feature
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableDownload();
});

Returns N/A

linkenableElements(dataElements)

Remount the hidden elements in the DOM.

linkParameters

linkdataElements

Array of data-element attribute values for DOM elements.

TypeRequiredDefault
array of stringtrueN/A

linkExample

// remove left panel and left panel button from the DOM
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableElements([ 'leftPanel', 'leftPanelButton' ]);
});

Returns N/A

linkenableFilePicker()

Enables file picker feature, affecting the Open files button in menu overlay and shortcut to open local files (ctrl/cmd + o).

linkExample

// enable file picker feature
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableFilePicker();
});

Returns N/A

linkenableLocalStorage()

Enables localStorage feature, tool styles will be saved to localStorage after changed.

linkExample

// enable localStorage feature
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableLocalStorage();
});

Returns N/A

linkenableMeasurement()

Enables measurement feature, affecting any elements related to measurement tools

linkExample

// enable measurement feature
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableMeasurement();
});

Returns N/A

linkenableNotesPanel()

Enables notes panel feature, affecting any elements related to notes panel

linkExample

// enable notes panel feature
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableNotesPanel();
});

Returns N/A

linkenablePrint()

Enables print feature, affecting the Print button in menu overlay and shortcut to print (ctrl/cmd + p).

linkExample

// enable print feature
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enablePrint();
});

Returns N/A

linkenableRedaction()

Enables redaction feature, affecting any elements related to redaction

linkExample

// enable redaction feature
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableRedaction();
});

Returns N/A

linkenableTextSelection()

Enables text to be selected in the document.

linkExample

// enable text to be selected in the document
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableTextSelection();
});

Returns N/A

linkenableTools(toolNames)

Enable multiple tools.

linkParameters

linktoolNames

Array of name of the tools, either from tool names list or the name you registered your custom tool with. If nothing is passed, all tools will be enabled.

TypeRequiredDefault
array of stringfalseall tools

linkExample

// enable sticky annotation tool and free text tool
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
});

Returns N/A

linkfocusNote(annotationId)

Focuses a note input field for the annotation. If the notes panel is closed, it is automatically opened before focusing.

linkParameters

linkannotationId

Id of an annotation.

TypeRequiredDefault
stringtrueN/A

linkExample

// Focus the note when annotation is created
const annotationManager = viewerInstance.docViewer.getAnnotationManager();
annotationManager.on('annotationChanged', (e, annotations, action) => {
  annotations.forEach((annotation) => {
    if (action === 'add' && annotation.Listable) {
      viewerInstance.focusNote(annotation.Id); // note it is a capital i
    }
  });
});

Returns N/A

linkgetAnnotationUser()

Return the current username.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.getAnnotationUser());
});

Returns username (string)

linkgetCurrentPageNumber()

Return the current page number (1-indexed) of the document loaded in the WebViewer.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.getCurrentPageNumber());
});

Returns current page number (number)

linkgetFitMode()

Return the current fit mode of the WebViewer.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.getFitMode());
});

Returns fit mode (viewerInstance.FitMode)

linkgetLayoutMode()

Return the current layout mode of the WebViewer.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.getLayoutMode());
});

Returns layout mode (viewerInstance.LayoutMode)

linkgetPageCount()

Return the total number of pages of the document loaded in the WebViewer.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.getPageCount());
});

Returns total number of pages (number)

linkgetToolMode()

Return the current tool object.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.getToolMode().name, viewerInstance.getToolMode());
});

Returns Instance of the current tool (object)

linkgetZoomLevel()

Return the current zoom level

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.getZoomLevel());
});

Returns zoom level (number)

linkgoToFirstPage()

Go to the first page of the document. Makes the document viewer display the first page of the document.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.goToFirstPage();
});

Returns N/A

linkgoToLastPage()

Go to the last page of the document. Makes the document viewer display the last page of the document.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.goToLastPage();
});

Returns N/A

linkgoToNextPage()

Go to the next page of the document. Makes the document viewer display the next page of the document.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.goToNextPage();
});

Returns N/A

linkgoToPrevPage()

Go to the previous page of the document. Makes the document viewer display the previous page of the document.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.goToPrevPage();
});

Returns N/A

linkisAdminUser()

Returns whether the current user is admin.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.isAdminUser());
});

Returns boolean

linkisElementDisabled(dataElement)

Returns whether the element is disabled.

linkParameters

linkdataElement

data-element attribute value for a DOM element. To find data-element of a DOM element, refer to Finding data-element attribute values.

TypeRequiredDefault
stringtrueN/A

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.isElementDisabled('leftPanel'));
});

Returns boolean

linkisElementOpen(dataElement)

Returns whether the element is open.

linkParameters

linkdataElement

data-element attribute value for a DOM element. To find data-element of a DOM element, refer to Finding data-element attribute values.

TypeRequiredDefault
stringtrueN/A

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.isElementOpen('leftPanel'));
});

Returns boolean

linkisMobileDevice()

Returns if the current browser is on a mobile device.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.isMobileDevice());
});

Returns boolean

linkisReadOnly()

Returns whether the current mode is read only.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.isReadOnly());
});

Returns boolean

linkisToolDisabled(toolName)

Returns whether the tool is disabled.

linkParameters

linktoolName

Name of the tool, either from tool names list or the name you registered your custom tool with.

TypeRequiredDefault
stringtrueN/A

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.isToolDisabled('AnnotationCreateSticky'));
});

Returns boolean

linkloadDocument(documentPath[, options])

Load a document inside WebViewer UI.

linkParameters

linkdocumentPath

Path to the document OR file object if opening local file.

TypeRequiredDefault
string or fileObjecttrueN/A

linkoptions

TypeRequiredDefault
Object (see possible values below)false{}
Option NameDescriptionType
documentIdUnique id of the document.string
filenameFilename of the document, which is used when downloading the PDF.string
customHeadersAn object custom HTTP headers to use when retrieving the document from the specified url.object
withCredentialsA boolean that indicates whether or not cross-site requests should be made using credentials.boolean
passwordA string that will be used to as the password to load a password protected documentstring

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.loadDocument('https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo-annotated.pdf', { documentId: '1', filename: 'sample-1' });
});

Returns N/A

linkopenElements(dataElements)

Sets visibility states of the elements to be visible. Note that openElements works only for panel/overlay/popup/modal elements.

linkParameters

linkdataElement

data-element attribute value for a DOM element. To find data-element of a DOM element, refer to Finding data-element attribute values.

TypeRequiredDefault
stringtrueN/A

linkExample

// opens (shows) text popup and annotation popup in the UI
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.openElements([ 'menuOverlay', 'leftPanel' ]);
});

Returns N/A

linkprint()

Print the current document.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.print();
});

Returns N/A

linkregisterTool(properties)

Registers tool in the document viewer tool mode map, and adds a button object to be used in the header. See the guides to learn how to make a tool.

linkParameters

linkproperties

TypeRequiredDefault
Object. See properties belowtrueN/A
NameDescriptionTypeRequired
toolNameName of the toolstringtrue
toolObjectInstance of the tool. For more information about creating a custom tool object, refer to Customizing tools.stringtrue
buttonImagePath to an image or base64 data for the tool button.stringtrue
buttonNameName of the tool button that will be used in data-element.stringfalse
buttonGroupGroup of the tool button belongs to.stringfalse
tooltipTooltip of the tool buttonstringfalse

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.registerTool({
    toolName: 'MyTool',
    toolObject: myCustomTool,
    buttonImage: 'path/to/image',
    buttonName: 'myToolButton',
    buttonGroup: 'miscTools',
    tooltip: 'MyTooltip'
  });
});

Returns N/A

linkremoveSearchListener(listener)

Removes the search listener function.

linkParameters

linklistener

Search listener function that was added.

TypeRequiredDefault
functiontrueN/A

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  const searchListener = (searchValue, options, results) => {
    console.log(searchValue, options, results);
  };
  viewerInstance.addSearchListener(searchListener);
  viewerInstance.removeSearchListener(searchListener);
});

Returns N/A

linkrotateClockwise()

Rotates the document in the WebViewer clockwise.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.rotateClockwise();
});

Returns N/A

linkrotateCounterClockwise()

Rotates the document in the WebViewer counter-clockwise.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.rotateCounterClockwise();
});

Returns N/A

linksearchText(searchValue[, options])

Searches the current page for the texts matching searchValue.

linkParameters

linksearchValue

The text value to look for.

TypeRequiredDefault
stringtrueN/A

linkoptions

Search options

TypeRequiredDefault
Object. See properties belowfalse{}
NameDescriptionType
caseSensitiveOption to search with matching cases.bool
wholeWordOption to search whole words only.bool
wildcardOption to search a string with a wildcard *. For example, *viewer.bool
regexOption to search for a regex string. For example, www(.*)com.bool
searchUpOption to search up the document (backwards).bool
ambientStringOption to get the ambient string in the result.bool

All options default to false.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.searchText('test', { caseSensitive: true, wholeWord: true  });
});

Returns N/A

linksearchTextFull(searchValue[, options])

Searches the full document for the texts matching searchValue.

linkParameters

linksearchValue

The text value to look for.

TypeRequiredDefault
stringtrueN/A

linkoptions

Search options

TypeRequiredDefault
Object. See properties belowfalse{}
NameDescriptionType
caseSensitiveOption to search with matching cases.bool
wholeWordOption to search whole words only.bool
wildcardOption to search a string with a wildcard *. For example, *viewer.bool
regexOption to search for a regex string. For example, www(.*)com.bool

All options default to false.

linkExample

// search for string 'test', and match whole words only
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.searchTextFull('test', { wholeWord: true });
});

Returns N/A

linksetActiveHeaderGroup(headerGroup)

Sets a header group to be rendered in the Header element. This API comes useful when replacing the entire header items in small screens. For more information about header items and groups, refer to Header composition.

linkParameters

linkheaderGroup

Name of the header group to be rendered. Default WebViewer UI has two header groups: default and tools.

TypeRequiredDefault
stringtrueN/A

linkExample

// switch to tools header
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setActiveHeaderGroup('tools');
});

Returns N/A

linksetActiveLeftPanel(dataElement)

Sets a panel to be active in the leftPanel element. Note that this API does not include opening the leftPanel.

linkParameters

linkdataElement

Name of the panel to be active in leftPanel. Default WebViewer UI has three panel options: thumbnailsPanel, outlinesPanel and notesPanel.

TypeRequiredDefault
stringtrueN/A

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  // open left panel
  viewerInstance.openElements([ 'leftPanel' ]);
  // view outlines panel
  viewerInstance.setActiveLeftPanel('outlinesPanel');
});

Returns N/A

linksetAdminUser(isAdmin)

Sets the current user to be admin or not. Admin users have permission to edit/delete any annotations, including the ones they didn't create.

linkParameters

linkisAdmin

Whether or not to set the current user to be an admin.

TypeRequiredDefault
booleantrueN/A

linkExample

// sets the current user to be an admin
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setAdminUser(true);
});

Returns N/A

linksetAnnotationUser(username)

Sets name of the current user

linkParameters

linkusername

Username to be used for current user.

TypeRequiredDefault
stringtrueN/A

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setAnnotationUser('Guest-1');
});

Returns N/A

linksetCustomNoteFilter(handler)

Filter the annotations shown in the notes panel

linkParameters

linkhandler

Function that takes an annotation and returns if the annotation(note) should be shown in the notes panel.

TypeRequiredDefault
functiontrueN/A

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  // only show annotations that are created by John
  viewerInstance.setCustomNoteFilter(annotation => annotation.Author === 'John');
});

Returns N/A

linksetCustomPanel(customPanel)

Adds a custom panel in left panel

linkParameters

linkcustomPanel

Panel to be added in left panel

TypeRequiredDefault
object. See below for object propertiestrueN/A
NameDescriptionTypeProperties
tabTab used to choose which panel to showobjectdataElement title img
panelCustom panelobjectdataElement render

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setCustomPanel({
    tab:{
      dataElement: 'customPanelTab',
      title: 'customPanelTab',
      img: 'https://www.pdftron.com/favicon-32x32.png',
    },
    panel: {
      dataElement: 'customPanel',
      render: () => {
        const div = document.createElement('div');
        div.innerHTML = 'Hello World';
        return div;
      }
    }
  });
});

Returns N/A

linksetCurrentPageNumber(pageNumber)

Sets the current page number (1-indexed) of the document loaded in the WebViewer.

linkParameters

linkpageNumber

The page number of the document to set

TypeRequiredDefault
numbertrueN/A

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setCurrentPageNumber(1);
});

Returns N/A

linksetEngineType(engineType)

Sets the engine type of the viewer to view different types of documents.

linkParameters

linkengineType

TypeRequiredDefault
viewerInstance.constants.engineTypestrueviewerInstance.constants.engineTypes.AUTO

One of:

  • viewerInstance.constants.engineTypes.UNIVERSAL (for XOD documents)
  • viewerInstance.constants.engineTypes.PDFNETJS (for PDF/Office/Images)
  • viewerInstance.constants.engineTypes.PDFTRON_SERVER (for using pdftronServer from constructor option)
  • viewerInstance.constants.engineTypes.AUTO (for auto-selecting engine type based on constructor options and document paths)

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  // You should only have to call this if you are switching between viewing documents through pdftronServer and locally
  viewerInstance.setEngineType(viewerInstance.constants.engineTypes.PDFNETJS);
});

Returns N/A

linksetFitMode(fitMode)

Sets the fit mode of the viewer.

linkParameters

linkfitMode

TypeRequiredDefault
viewerInstance.FitModetrueN/A

One of:

  • viewerInstance.FitMode.FitPage
  • viewerInstance.FitMode.FitWidth
  • viewerInstance.FitMode.Zoom

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setFitMode(viewerInstance.FitMode.FitWidth);
});

Returns N/A

linksetHeaderItems(handler)

Customize header. Refer to Customizing header for creating header items.

linkParameters

linkhandler

Function that returns a new header. A header object is passed in as a parameter. The default header group is default. WebViewer UI has two header groups: default and tools. See here for more details.

TypeRequiredDefault
functiontrueN/A

Function receives one param (object). Object contains a series of helper function that can be used to change the header.

  • getHeader(headerGroup)
  • get(dataElement)
  • insertBefore(newItem)
  • insertAfter(newItem)
  • delete(dataElement)
  • shift()
  • unshift(newItem1, newItem2, ...)
  • push(newItem1, newItem2, ...)
  • pop()
  • getItems()
  • update()

See example for more details.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setHeaderItems((header) => {
    // refer to "Customzing header" guide for creating header items 
    const newItem = {...}
    // insert newItem before freeHandToolGroupButton in default header
    header.get('freeHandToolGroupButton').insertBefore(newItem);
    // insert newItem after stickyToolButton in tools header
    header.getHeader('tools').get('stickyToolButton').insertAfter(newItem);
    // remove the first item
    header.shift();
    // remove the last item
    header.pop();
    // add newItem before the first element
    header.unshift(newItem);
    // add newItem after the last element
    header.push(newItem);
    // delete freeHandToolGroupButton
    header.delete('freeHandToolGroupButton')
    // delete the second element
    header.deleteElementAtIndex(1);
    // I want to do more things about the header but you didn't provide those methods
    const headerItems = header.getItems();
    // headerItems is a plain array, you can use any Array methods
    // for example, reverse the order of items in the header
    const reversedItems = headerItems.reverse();
    header.update(reversedItems);
  });
});

Returns N/A

linksetIconColor(toolName, colorPalette)

Sets the color palette that will be used as a tool button's icon color

linkParameters

linktoolName

Name of the tool, either from tool names list or the name you registered your custom tool with.

TypeRequiredDefault
stringtrueN/A

linkcolorPalette

The palette which will be used as a tool button's icon color

TypeRequiredDefault
stringtrueN/A
  • text
  • border
  • fill

linkExample

// sets the color in fill palette to be used as freetext tool button's icon color
// by default freetext tool button will use the color in text palette as its icon color
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setIconColor('AnnotationCreateFreeText', 'fill')
});

Returns N/A

linksetLanguage(language)

Set the language of WebViewer UI.

linkParameters

linklanguage

The language WebViewer UI will use

TypeRequiredDefault
stringtrueN/A

By default, WebViewer UI supports following languages:

  • en
  • zh_cn
  • fr

linkExample

// sets the current user to be an admin
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setLanguage('en');
});

Returns N/A

linksetLayoutMode(layoutMode)

Sets the layout mode of the viewer.

linkParameters

linklayoutMode

TypeRequiredDefault
viewerInstance.LayoutModetrueN/A

One of:

  • viewerInstance.LayoutMode.Single

  • viewerInstance.LayoutMode.Continuous

  • viewerInstance.LayoutMode.Facing

  • viewerInstance.LayoutMode.FacingContinuous

  • viewerInstance.LayoutMode.FacingCover

  • viewerInstance.LayoutMode.FacingCoverContinuous

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setLayoutMode(viewerInstance.LayoutMode.FacingContinuous);
});

Returns N/A

linksetMaxZoomLevel(zoomLevel)

Sets the maximum zoom level allowed by the UI. Default is 9999%.

linkParameters

linkzoomLevel

Zoom level in either number or percentage.

TypeRequiredDefault
number or stringtrueN/A

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setMaxZoomLevel('150%'); // or setMaxZoomLevel(1.5)
});

Returns N/A

linksetMinZoomLevel(zoomLevel)

Sets the minimum zoom level allowed by the UI. Default is 5%.

linkParameters

linkzoomLevel

Zoom level in either number or percentage.

TypeRequiredDefault
number or stringtrueN/A

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setMinZoomLevel('10%'); // or setMinZoomLevel(0.1)
});

Returns N/A

linksetNoteDateFormat(format)

Sets the format for displaying the date when a note is create/modified. A list of formats can be found dayjs API

linkParameters

linkformat

The format of date to display

TypeRequiredDefault
stringtrueN/A

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setNoteDataFormat('DD.MM.YYYY HH:MM');
});

Returns N/A

linksetPrintQuality(quality)

Sets the print quality. Higher values are higher quality but takes longer to complete and use more memory. The viewer's default quality is 1.

linkParameters

linkquality

The quality of the document to print

TypeRequiredDefault
numbertrueN/A

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setPrintQuality(2);
});

Returns N/A

linksetPageLabels(pageLabels)

Sets page labels that will be displayed in UI. You may want to use this API if the document's page labels start with characters/numbers other than 1.

linkParameters

linkpageLabels

Page labels that will be displayed in UI.

TypeRequiredDefault
arraytrueN/A

linkExample

// assume a document has 5 pages
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setPageLabels(['i', 'ii', 'iii', '4', '5']);
});

Returns N/A

linksetReadOnly(isReadOnly)

Sets the WebViewer UI to be a read only mode. In read only mode, users cannot create/edit annotations.

linkParameters

linkisReadOnly

Whether or not to set the WebViewer UI to be in in read only mode.

TypeRequiredDefault
booleantrueN/A

linkExample

// sets the viewer to read only mode
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setReadOnly(true);
});

Returns N/A

linksetSortStrategy(sortStrategy)

Sets a sorting algorithm in NotesPanel.

linkParameters

linksortStrategy

Name of the algorithm. Default WebViewer UI has two algorithm options: position and time.

TypeRequiredDefault
stringtrueN/A

linkExample

// sort notes by time
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setSortStrategy('time');
});

Returns N/A

linksetSwipeOrientation(swipeOrientation)

Sets the swipe orientation between pages of WebViewer UI on mobile devices. Default is horizontal.

linkParameters

linkswipeOrientation

The swipe orientation to navigate between pages. Available orientations are: horizontal, vertical and both.

TypeRequiredDefault
stringtrueN/A

linkExample

// set the swipe orientation to vertical.
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setSwipeOrientation('vertical');
});

Returns N/A

linksetTheme(theme)

Sets the theme of Webviewer UI. Please note that this does not work in IE11.

linkParameters

linktheme

TypeRequiredDefault
object or string. See below for object propertiestrueN/A
NameDescriptionTypeDefault
primaryBackground color for the header, modals, overlays, etc.string#FFFFFF
secondaryBackground color for panels and the document container.string#F5F5F5
borderBorder color for different components.string#CDCDCD
buttonHoverBackground color for hovering on a button.string#F6F6F6
buttonActiveBackground color for an active button.string#F0F0F0
textText color.string#333333
iconIcon color.string#757575
iconActiveIcon color when button is active.string#757575

Options for string are default or dark.

linkExample (object)

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setTheme({
    primary: '#2C2B3A',
    secondary: '#4D4C5F',
    border: '#555555',
    buttonHover: '#686880',
    buttonActive: '#686880',
    text: '#FFFFFF',
    icon: '#FFFFFF',
    iconActive: '#FFFFFF'
  });
});

linkExample (string)

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setTheme('dark');
});

Returns N/A

linksetToolMode(toolName)

Sets tool mode.

linkParameters

linktoolName

Name of the tool, either from tool names list or the name you registered your custom tool with.

TypeRequiredDefault
stringtrueN/A

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setToolMode('AnnotationEdit');
});

Returns N/A

linksetZoomLevel(zoomLevel)

Sets zoom level.

linkParameters

linkzoomLevel

Zoom level in either number or percentage.

TypeRequiredDefault
number or stringtrueN/A

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setZoomLevel('150%'); // or setZoomLevel(1.5)
});

Returns N/A

linktoggleElement(dataElement)

Toggles a visibility state of the element to be visible/hidden. Note that toggleElement works only for panel/overlay/popup/modal elements.

linkParameters

linkdataElement

data-element attribute value for a DOM element. To find data-element of a DOM element, refer to Finding data-element attribute values.

TypeRequiredDefault
stringtrueN/A

linkExample

// open LeftPanel if it is closed, or vice versa
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.toggleElement('leftPanel');
});

Returns N/A

linktoggleFullScreen()

Toggles full scree mode of the browser

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.toggleFullScreen();
});

Returns N/A

linkunregisterTool(toolName)

Unregisters tool in the document viewer tool mode map, and removes the button object.

linkParameters

linktoolName

Name of the tool, either from tool names list or the name you registered your custom tool with.

TypeRequiredDefault
stringtrueN/A

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.unregisterTool('MyTool');
});

Returns N/A

linkupdateTool(toolName, properties)

Update existing tool's properties.

linkParameters

linktoolName

Name of the tool, either from tool names list or the name you registered your custom tool with.

TypeRequiredDefault
stringtrueN/A

linkproperties

TypeRequiredDefault
object. See below for propertiestrueN/A
NameDescriptionType
buttonImagePath to an image or base64 data for the tool buttonstring
buttonNameName of the tool button that will be used in data-elementstring
buttonGroupGroup of the tool button belongs tostring
tooltipTooltip of the tool buttonstring

All options are optional. If you don't pass anything, the value won't be changed.

linkExample

viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.updateTool('AnnotationCreateSticky', {
    buttonImage: 'https://www.pdftron.com/favicon-32x32.png'
  });
});

Returns N/A

linkuseEmbeddedPrint(use)

Use/not use embedded printing. You may not want to use embedded printing if there are custom annotations in your document.

linkParameters

linkuse

Whether or not to use embedded printing

TypeRequiredDefault
boolfalsetrue

linkExample

// disable embedded printing
viewerElement.addEventListener('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.useEmbeddedPrint(false);
});

Returns N/A

Get the anwsers you need: Support

Contents

addSearchListener
addSortStrategy
closeDocument
closeElements
disableAnnotations
disableDownload
disableElements
disableFilePicker
disableLocalStorage
disableMeasurement
disableNotesPanel
disablePrint
disableRedaction
disableTextSelection
disableTools
downloadPdf
enableAnnotations
enableDownload
enableElements
enableFilePicker
enableLocalStorage
enableMeasurement
enableNotesPanel
enablePrint
enableRedaction
enableTextSelection
enableTools
focusNote
getAnnotationUser
getCurrentPageNumber
getFitMode
getLayoutMode
getPageCount
getToolMode
getZoomLevel
goToFirstPage
goToLastPage
goToNextPage
goToPrevPage
isAdminUser
isElementDisabled
isElementOpen
isMobileDevice
isReadOnly
isToolDisabled
loadDocument
openElements
print
registerTool
removeSearchListener
rotateClockwise
rotateCounterClockwise
searchText
searchTextFull
setActiveHeaderGroup
setActiveLeftPanel
setAdminUser
setAnnotationUser
setCustomNoteFilter
setCustomPanel
setCurrentPageNumber
setEngineType
setFitMode
setHeaderItems
setIconColor
setLanguage
setLayoutMode
setMaxZoomLevel
setMinZoomLevel
setNoteDateFormat
setPrintQuality
setPageLabels
setReadOnly
setSortStrategy
setSwipeOrientation
setTheme
setToolMode
setZoomLevel
toggleElement
toggleFullScreen
unregisterTool
updateTool
useEmbeddedPrint