Class: WebViewerInstance

WebViewerInstance


new WebViewerInstance()

A single instance of webviewer. Can be retrieved from the global WebViewer function. This class is not instantiable.
Example
WebViewer({...options}, document.getElementById('viewer'))
 .then(webviewerInstance => {
   // Call APIs on webviewerInstance here
 })

Namespaces

Hotkeys

Members


<static> Feature :string

Contains string enums for all features for WebViewer UI
Type:
  • string
Properties:
Name Type Description
Measurement string Measurement tools that can create annotations to measure distance, perimeter and area.
Annotations string Render annotations in the document and be able to edit them.
Download string A download button to download the current document.
FilePicker string Ctrl/Cmd + O hotkey and a open file button that can be clicked to load local files.
LocalStorage string Store and retrieve tool styles from window.localStorage.
NotesPanel string A panel that displays information of listable annotations.
Print string Ctrl/Cmd + P hotkey and a print button that can be clicked to print the current document.
Redaction string Redaction tools that can redact text or areas. Need fullAPI to be on to use this feature.
TextSelection string Ability to select text in a document.
TouchScrollLock string Lock document scrolling in one direction in mobile devices.
Copy string Ability to copy text or annotations use Ctrl/Cmd + C hotkeys or the copy button.
ThumbnailMerging string Ability to drag and drop a file into the thumbnail panel to merge
ThumbnailReordering string Ability to reorder pages using the thumbnail panel
Example
WebViewer(...)
  .then(function(instance) {
    var Feature = instance.Feature;
    instance.enableFeatures([Feature.Measurement]);
    instance.disableFeatures([Feature.Copy]);
  });

<static> FitMode :string

Contains all possible modes for fitting/zooming pages to the viewer. The behavior may vary depending on the LayoutMode.
Type:
  • string
Properties:
Name Type Description
FitPage string A fit mode where the zoom level is fixed to the width or height of the page, whichever is smaller.
FitWidth string A fit mode where the zoom level is fixed to the width of the page.
Zoom string A fit mode where the zoom level is not fixed.
Example
WebViewer(...)
  .then(function(instance) {
    var FitMode = instance.FitMode;
    instance.setFitMode(FitMode.FitWidth);
  });

<static> LayoutMode :string

Contains string enums for all layouts for WebViewer. They are used to dictate how pages are placed within the viewer.
Type:
  • string
Properties:
Name Type Description
Single string Only the current page will be visible.
Continuous string All pages are visible in one column.
Facing string Up to two pages will be visible.
FacingContinuous string All pages visible in two columns.
FacingCover string All pages visible in two columns, with an even numbered page rendered first. (i.e. The first page of the document is rendered by itself on the right side of the viewer to simulate a book cover.)
FacingCoverContinuous string All pages visible, with an even numbered page rendered first. (i.e. The first page of the document is rendered by itself on the right side of the viewer to simulate a book cover.)
Example
WebViewer(...)
  .then(function(instance) {
    var LayoutMode = instance.LayoutMode;
    instance.setLayoutMode(LayoutMode.Single);
  });

Actions

Actions namespace
See:

annotationPopup

An instance of Popup that can be used to edit items in the annotation popup component
Implements:
Example
WebViewer(...)
  .then(function (instance) {
    instance.annotationPopup.someAPI();
  });

Annotations

Annotations namespace
See:

annotManager

AnnotationManager instance
See:
Example
WebViewer(...)
  .then(function(instance) {
    var annotManager = instance.annotManager;
    // annotManager.someAPI();
  });

contextMenuPopup

An instance of Popup that can be used to edit items in the context menu popup component
Implements:
Example
WebViewer(...)
  .then(function (instance) {
    instance.contextMenuPopup.someAPI();
  });

CoreControls

CoreControls namespace
See:

docViewer

DocumentViewer instance
See:
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;
    // docViewer.someAPI();
  });

iframeWindow

WebViewer iframe window object
Example
WebViewer(...)
  .then(function(instance) {
    var iframeWindow = instance.iframeWindow;
    // iframeWindow.SomeNamespace
    // iframeWindow.document.querySelector('.some-element');
  });

textPopup

An instance of Popup that can be used to edit items in the text popup component
Implements:
Example
WebViewer(...)
  .then(function (instance) {
    instance.textPopup.someAPI();
  });

Tools

Tools namespace
See:

Methods


addSearchListener(searchListener)

Adds a listener function to be called when search is completed.
Parameters:
Name Type Description
searchListener WebViewerInstance.searchListener Callback function that will be triggered when search completed
Example
WebViewer(...)
  .then(function(instance) {
    function searchListener(searchValue, options, results) {
      console.log(searchValue, options, results);
    };

    instance.addSearchListener(searchListener);
  });

addSortStrategy(sortStrategy)

Adds a sorting strategy in notes panel.
Parameters:
Name Type Description
sortStrategy object Sorting strategy that will be used to sort notes
Properties
Name Type Description
name string Name of the strategy, which will be shown in notes panel's dropdown
getSortedNotes WebViewerInstance.getSortedNotes Function that takes unsorted notes (annotations) and returns them sorted
shouldRenderSeparator WebViewerInstance.shouldRenderSeparator Function that returns when a separator should be rendered
getSeparatorContent WebViewerInstance.getSeparatorContent Function that returns the content of a separator
Example
WebViewer(...)
  .then(function(instance) {
    var mySortStrategy = {
      name: 'annotationType',
      getSortedNotes: function(notes) {
        return notes.sort(function(a ,b) {
          if (a.Subject < b.Subject) return -1;
          if (a.Subject > b.Subject) return 1;
          if (a.Subject === b.Subject) return 0;
        });
      },
      shouldRenderSeparator: function(prevNote, currNote) {
        return prevNote.Subject !== currNote.Subject;
      },
      getSeparatorContent: function(prevNote, currNote) {
        return currNote.Subject;
      }
    };

    instance.addSortStrategy(mySortStrategy);
  });

closeDocument()

Closes the document that's currently opened.
Returns:
A promise resolved after document is closed.
Type
Promise.<void>
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      setTimeout(function() {
        instance.closeDocument().then(function() {
          console.log('Document is closed');
        });
      }, 3000);
    });
  });

closeElements(dataElements)

Sets visibility states of the elements to be hidden. Note that closeElements works only for panel/overlay/popup/modal elements.
Parameters:
Name Type Description
dataElements Array.<string> Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to Finding data-element attribute values.
Example
WebViewer(...)
  .then(function(instance) {
    // closes (hides) text popup and left panel in the UI
    instance.closeElements([ 'menuOverlay', 'leftPanel' ]);
  });

disableElements(dataElements)

Unmount multiple elements in the DOM. Note that this ONLY removes the DOM elements without disabling related features.
Parameters:
Name Type Description
dataElements Array.<string> Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to Finding data-element attribute values.
Example
WebViewer(...)
  .then(function(instance) {
    // remove left panel and left panel button from the DOM
    instance.disableElements([ 'leftPanel', 'leftPanelButton' ]);
  });

disableFeatures(features)

disable certain features in the WebViewer UI.
Parameters:
Name Type Description
features Array.<WebViewerInstance.Feature> Array of features to disable.
Example
WebViewer(...)
  .then(function(instance) {
    instance.disableFeatures(instance.Feature.Measurement);
  });

disableReplyForAnnotations(isReplyDisabled)

Disable reply for annotations determined by the function passed in as parameter
Parameters:
Name Type Description
isReplyDisabled WebViewerInstance.storeisReplyDisabled Function that takes an annotation and returns if the reply of the annotation should be disabled.
Example
WebViewer(...)
  .then(function(instance) {
    // disable reply for all Freehand annotations
    instance.disableReplyForAnnotations(function(annotation) {
      return annotation instanceof instance.Annotations.FreeHandAnnotation;
    });
  });

disableTools( [toolNames])

Disable multiple tools.
Parameters:
Name Type Argument Default Description
toolNames Array.<string> <optional>
all tools 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.
Example
WebViewer(...)
  .then(function(instance) {
    // disable sticky annotation tool and free text tool
    instance.disableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
  });

dispose()

Cleans up listeners and data from the WebViewer instance. Should be called when removing the WebViewer instance from the DOM.

downloadPdf( [includeAnnotations])

Downloads the pdf document with or without annotations added by WebViewer UI.
Parameters:
Name Type Argument Default Description
includeAnnotations boolean <optional>
true Whether or not to include annotations added by WebViewer UI.
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      // download pdf without annotations added by WebViewer UI
      instance.downloadPdf(false);
    });
  });

enableElements(dataElements)

Remount the hidden elements in the DOM.
Parameters:
Name Type Description
dataElements Array.<string> Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to Finding data-element attribute values.
Example
WebViewer(...)
  .then(function(instance) {
    // remove left panel and left panel button from the DOM
    instance.enableElements([ 'leftPanel', 'leftPanelButton' ]);
  });

enableFeatures(features)

Enable certain features in the WebViewer UI.
Parameters:
Name Type Description
features Array.<WebViewerInstance.Feature> Array of features to enable.
Example
WebViewer(...)
  .then(function(instance) {
    instance.enableFeatures(instance.Feature.Measurement);
  });

enableTools( [toolNames])

Enable multiple tools.
Parameters:
Name Type Argument Default Description
toolNames Array.<string> <optional>
all tools 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.
Example
WebViewer(...)
  .then(function(instance) {
    // enable sticky annotation tool and free text tool
    instance.enableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
  });

exportBookmarks()

Returns a dictionary with page indices as keys and the bookmark text as the values
Returns:
A dictionary with page indices as keys and the bookmark text as the values. ex: {"0":"Bookmark 1","2":"Bookmark 2"}
Type
Object
Example
WebViewer(...)
  .then(function(instance) {
    // Save the annotation data for doc123
    const bookmarks = instance.exportBookmarks();
    const bookmarksString = JSON.stringify(bookmarks);
    fetch('/server/bookmarksHandler.js?documentId=doc123', {
      method: 'POST',
      body: bookmarksString // written into a json file on server
    });
  });

focusNote(annotationId)

Focuses a note input field for the annotation. If the notes panel is closed, it is automatically opened before focusing.
Parameters:
Name Type Description
annotationId string Id of an annotation.
Example
WebViewer(...)
  .then(function(instance) {
    var annotManager = instance.annotManager;

    annotManager.on('annotationChanged', function(e, annotations, action) {
      annotations.forEach(function(annotation) {
        // Focus the note when annotation is created
        if (action === 'add' && annotation.Listable) {
          instance.focusNote(annotation.Id); // note it is a capital i
        }
      });
    });
  });

getCustomData()

A getter that returns a stringified version of the 'custom' property that is passed to the WebViewer constructor Refer to the passing custom data section.
Returns:
returns a stringified version of the 'custom' property that is passed to the WebViewer constructor
Type
string

getFitMode()

Return the current fit mode of the WebViewerInstance.
Returns:
Current fit mode
Type
WebViewerInstance.FitMode
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      console.log(instance.getFitMode());
    });
  });

getLayoutMode()

Return the current layout mode of the WebViewerInstance.
Returns:
Current layout mode
Type
WebViewerInstance.LayoutMode
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      console.log(instance.getLayoutMode());
    });
  });

getToolMode()

Return the current tool object.
Returns:
Instance of the current tool
Type
Tools.Tool
Example
WebViewer(...)
  .then(function(instance) {
    console.log(instance.getToolMode().name, instance.getToolMode());
  });

getZoomLevel()

Return the current zoom level
Returns:
Zoom level (0 ~ 1)
Type
number
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      console.log(instance.getZoomLevel());
    });
  });

importBookmarks(bookmarks)

Imports user bookmarks
Parameters:
Name Type Description
bookmarks object A dictionary with page indices as keys and the bookmark text as the values. ex: {"0":"Bookmark 1","2":"Bookmark 2"}. Behaviour is undefined otherwise.
Example
WebViewer(...)
  .then(function(instance) {
    // load the user bookmarks data for id 'doc123'
    fetch('/server/bookmarksHandler.js?documentId=doc123', {
      method: 'GET'
    }).then(function(response) {
      if (response.status === 200) {
        response.text().then(function(bookmarksString) {
          // {"0":"Bookmark 1","2":"Bookmark 2"}
          const bookmarks = JSON.parse(bookmarksString);
          instance.importBookmarks(bookmarks);
        });
      }
    });
  });

isElementDisabled(dataElement)

Returns whether the element is disabled.
Parameters:
Name Type Description
dataElement string data-element attribute value for a DOM element. To find data-element of a DOM element, refer to Finding data-element attribute values.
Returns:
Whether the element is disabled.
Type
boolean
Example
WebViewer(...)
  .then(function(instance) {
    console.log(instance.isElementDisabled('leftPanel'));
  });

isElementOpen(dataElement)

Returns whether the element is open.
Parameters:
Name Type Description
dataElement string data-element attribute value for a DOM element. To find data-element of a DOM element, refer to Finding data-element attribute values.
Returns:
Whether the element is open.
Type
boolean
Example
WebViewer(...)
  .then(function(instance) {
    console.log(instance.isElementOpen('leftPanel'));
  });

isToolDisabled(toolName)

Returns whether the tool is disabled.
Parameters:
Name Type Description
toolName string Name of the tool, either from tool names list or the name you registered your custom tool with.
Returns:
Whether the tool is disabled.
Type
boolean
Example
WebViewer(...)
  .then(function(instance) {
    console.log(instance.isToolDisabled());
  });

loadDocument(documentPath, options)

Load a document inside WebViewer UI.
Parameters:
Name Type Description
documentPath string | File Path to the document OR File object if opening local file.
options object Additional options
Properties
Name Type Description
extension string The extension of the file. If file is a blob/file object or a URL without an extension then this is necessary so that WebViewer knows what type of file to load.
filename string Filename of the document, which is used when downloading the PDF.
customHeaders object An object of custom HTTP headers to use when retrieving the document from the specified url.
documentId string Unique id of the document.
withCredentials boolean Whether or not cross-site requests should be made using credentials.
cacheKey string A key that will be used for caching the document on WebViewer Server.
password string A string that will be used to as the password to load a password protected document.
Example
WebViewer(...)
  .then(function(instance) {
    instance.loadDocument('https://www.pdftron.com/downloads/pl/test.pdf', {
      documentId: '1',
      filename: 'sample-1.pdf'
    });
  });

openElements(dataElements)

Sets visibility states of the elements to be visible. Note that openElements works only for panel/overlay/popup/modal elements.
Parameters:
Name Type Description
dataElements Array.<string> Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to Finding data-element attribute values.
Example
WebViewer(...)
  .then(function(instance) {
    // opens (shows) text popup and annotation popup in the UI
    instance.openElements([ 'menuOverlay', 'leftPanel' ]);
  });

print()

Print the current document.
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      instance.print();
    });
  });

registerTool(properties [, annotationConstructor])

Registers tool in the document viewer tool mode map, and adds a button object to be used in the header. See Customizing tools to learn how to make a tool.
Parameters:
Name Type Argument Description
properties object Tool properties.
Properties
Name Type Argument Description
toolName string Name of the tool.
toolObject Tools.Tool Instance of the tool.
buttonImage string Path to an image or base64 data for the tool button.
buttonName string <optional>
Name of the tool button that will be used in data-element.
buttonGroup string <optional>
Group of the tool button belongs to.
tooltip string <optional>
Tooltip of the tool button.
annotationConstructor function <optional>
The constructor function for the annotation that will be created by the registered tool.
Example
WebViewer(...)
  .then(function(instance) {
    // assume myCustomTool and myCustomAnnotation are already defined
    var myTool = {
      toolName: 'MyTool',
      toolObject: myCustomTool,
      buttonImage: 'path/to/image',
      buttonName: 'myToolButton',
      buttonGroup: 'miscTools',
      tooltip: 'MyTooltip'
    };

    instance.registerTool(myTool, myCustomAnnotation);
  });

removeSearchListener(listener)

Removes the search listener function.
Parameters:
Name Type Description
listener WebViewerInstance.searchListener Search listener function that was added.
Example
WebViewer(...)
  .then(function(instance) {
    function searchListener(searchValue, options, results) {
      console.log(searchValue, options, results);
    };

    instance.addSearchListener(searchListener);
    instance.removeSearchListener(searchListener);
  });

searchText(searchValue [, options])

Searches the current page for the texts matching searchValue.
Parameters:
Name Type Argument Description
searchValue string The text value to look for.
options object <optional>
Search options.
Properties
Name Type Argument Default Description
caseSensitive boolean <optional>
false Search with matching cases.
wholeWord boolean <optional>
false Search whole words only.
wildcard boolean <optional>
false Search a string with a wildcard *. For example, *viewer.
regex boolean <optional>
false Search for a regex string. For example, www(.*)com.
searchUp boolean <optional>
false Search up the document (backwards).
ambientString boolean <optional>
false Get the ambient string in the result.
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      instance.searchText('test', {
        caseSensitive: true,
        wholeWord: true
      });
    });
  });

searchTextFull(searchValue [, options])

Searches the full document for the texts matching searchValue.
Parameters:
Name Type Argument Description
searchValue string The text value to look for.
options object <optional>
Search options.
Properties
Name Type Argument Default Description
caseSensitive boolean <optional>
false Search with matching cases.
wholeWord boolean <optional>
false Search whole words only.
wildcard boolean <optional>
false Search a string with a wildcard *. For example, *viewer.
regex boolean <optional>
false Search for a regex string. For example, www(.*)com.
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      instance.searchTextFull('test', {
        wholeWord: true
      });
    });
  });

setActiveHeaderGroup(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.
Parameters:
Name Type Description
headerGroup string Name of the header group to be rendered. Default WebViewer UI has two header groups: default and tools.
Example
WebViewer(...)
  .then(function(instance) {
    instance.setActiveHeaderGroup('tools'); // switch to tools header
  });

setActiveLeftPanel(dataElement)

Sets a panel to be active in the leftPanel element. Note that this API does not include opening the leftPanel.
Parameters:
Name Type Description
dataElement string Name of the panel to be active in leftPanel. Default WebViewer UI has three panel options: thumbnailsPanel, outlinesPanel and notesPanel.
Example
WebViewer(...)
  .then(function(instance) {
    // open left panel
    instance.openElements([ 'leftPanel' ]);
    // view outlines panel
    instance.setActiveLeftPanel('outlinesPanel');

setCustomNoteFilter(filterAnnotation)

Filter the annotations shown in the notes panel
Parameters:
Name Type Description
filterAnnotation WebViewerInstance.filterAnnotation Function that takes an annotation and returns if the annotation(note) should be shown in the notes panel.
Example
WebViewer(...)
  .then(function(instance) {
    // only show annotations that are created by John
    instance.setCustomNoteFilter(function(annotation) {
      return annotation.Author === 'John';
    });
  });

setCustomPanel(options)

Adds a custom panel in left panel
Parameters:
Name Type Description
options object
Properties
Name Type Description
tab object Tab options.
Properties
Name Type Description
dataElement string data-element for tab.
title string Tooltip for tab.
img string Url for an image.
panel object Panel options.
Properties
Name Type Description
dataElement string data-element for panel.
render WebViewerInstance.renderCustomPanel Function that returns panel element.
Example
WebViewer(...)
  .then(function(instance) {
    var myCustomPanel = {
      tab:{
        dataElement: 'customPanelTab',
        title: 'customPanelTab',
        img: 'https://www.pdftron.com/favicon-32x32.png',
      },
      panel: {
        dataElement: 'customPanel',
        render: function() {
          var div = document.createElement('div');
          div.innerHTML = 'Hello World';
          return div;
        }
      }
    };

    instance.setCustomPanel(myCustomPanel);
  });

setFitMode(fitMode)

Sets the fit mode of the viewer.
Parameters:
Name Type Description
fitMode WebViewerInstance.FitMode Fit mode of WebViewer.
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;
    var FitMode = instance.FitMode;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      instance.setFitMode(FitMode.FitWidth);
    });
  });

setHeaderItems(headerCallback)

Customize header. Refer to Customizing header for details.
Parameters:
Name Type Description
headerCallback WebViewerInstance.headerCallback Callback function to perform different operations on the header.
Examples
// Adding save annotations button
WebViewer(...)
  .then(function(instance) {
    instance.setHeaderItems(function(header) {
      var myCustomButton = {
        type: 'actionButton',
        img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
        onClick: function() {
          instance.saveAnnotations();
        }
      }

      header.push(myCustomButton);
    });
  });
// Removing existing buttons
WebViewer(...)
  .then(function(instance) {
    instance.setHeaderItems(function(header) {
      var items = header.getItems().slice(9, -3);
      header.update(items);
    });
  });
// Appending logo and shifting existing buttons to the right
WebViewer(...)
  .then(function(instance) {
    instance.setHeaderItems(function(header) {
      header.delete(9);
      header.unshift({
        type: 'customElement',
        render: function() {
          var logo = document.createElement('img');
          logo.src = 'https://www.pdftron.com/downloads/logo.svg';
          logo.style.width = '200px';
          logo.style.marginLeft = '10px';
          logo.style.cursor = 'pointer';
          logo.onclick = function() {
            window.open('https://www.pdftron.com', '_blank');
          }
          return logo;
        }
      }, {
        type: 'spacer'
      });
    });
  });

setIconColor(toolName, colorPalette)

Sets the color palette that will be used as a tool button's icon color.
Parameters:
Name Type Description
toolName string Name of the tool, either from tool names list or the name you registered your custom tool with.
colorPalette string The palette which will be used as a tool button's icon color. One of 'text', 'border' and 'fill'.
Example
WebViewer(...)
  .then(function(instance) {
    // 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
    instance.setIconColor('AnnotationCreateFreeText', 'fill')
  });

setLanguage(language)

Set the language of WebViewer UI.
Parameters:
Name Type Description
language string The language WebViewer UI will use. By default, following languages are supported: en, zh_cn, fr.
Example
WebViewer(...)
  .then(function(instance) {
    instance.setLanguage('fr'); // set the language to French
  });

setLayoutMode(layoutMode)

Sets the layout mode of the viewer.
Parameters:
Name Type Description
layoutMode WebViewerInstance.LayoutMode Layout mode of WebViewerInstance.
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;
    var LayoutMode = instance.LayoutMode;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      instance.setLayoutMode(LayoutMode.FacingContinuous);
    });
  });

setMaxSignaturesCount( [maxSignaturesCount])

Set the number of signatures that can be stored in the WebViewer (default is 2)
Parameters:
Name Type Argument Default Description
maxSignaturesCount number <optional>
2 Number of signature webViewer can store
Example
WebViewer(...)
  .then(function(instance) {
    instance.setMaxSignaturesCount(5); // allow up to 5 stored signatures
  });

setMaxZoomLevel(zoomLevel)

Sets the maximum zoom level allowed by the UI. Default is 9999%.
Parameters:
Name Type Description
zoomLevel string | number Zoom level in either number or percentage.
Example
WebViewer(...)
  .then(function(instance) {
    instance.setMaxZoomLevel('150%'); // or setMaxZoomLevel(1.5)
  });

setMeasurementUnits(units)

Sets the units that will be displayed in the measurement tools' styles popup Valid units are: 'mm', 'cm', 'm', 'km', 'mi', 'yd', 'ft', 'in', 'pt'
Parameters:
Name Type Description
units Object an object which contains the from units and to units
Example
WebViewer(...)
  .then(function(instance) {
    instance.setMeasurementUnits({
      from: ['in', 'cm', 'm'],
      to: ['cm', 'm', 'km']
    });
  });

setMinZoomLevel(zoomLevel)

Sets the minimum zoom level allowed by the UI. Default is 5%.
Parameters:
Name Type Description
zoomLevel string | number Zoom level in either number or percentage.
Example
WebViewer(...)
  .then(function(instance) {
    instance.setMinZoomLevel('10%'); // or setMinZoomLevel(0.1)
  });

setNoteDateFormat(format)

Sets the format for displaying the date when a note is create/modified. A list of formats can be found dayjs API.
Parameters:
Name Type Description
format string The format of date to display
Example
WebViewer(...)
  .then(function(instance) {
    instance.setNoteDataFormat('DD.MM.YYYY HH:MM');
  });

setPageLabels(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.
Parameters:
Name Type Description
pageLabels Array.<string> Page labels that will be displayed in UI.
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      instance.setPageLabels(['i', 'ii', 'iii', '4', '5']); // assume a document has 5 pages
    });
  });

setPrintQuality(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.
Parameters:
Name Type Description
quality number The quality of the document to print
Example
WebViewer(...)
  .then(function(instance) {
    instance.setPrintQuality(2);
  });

setSortStrategy(sortStrategy)

Sets a sorting algorithm in NotesPanel.
Parameters:
Name Type Description
sortStrategy string Name of the algorithm. By default, there are two algorithm options: position and time.
Example
WebViewer(...)
  .then(function(instance) {
    instance.setSortStrategy('time'); // sort notes by time
  });

setSwipeOrientation(swipeOrientation)

Sets the swipe orientation between pages of WebViewer UI on mobile devices. Default is horizontal.
Parameters:
Name Type Description
swipeOrientation string The swipe orientation to navigate between pages. Available orientations are: horizontal, vertical and both.
Example
WebViewer(...)
  .then(function(instance) {
    instance.setSwipeOrientation('vertical'); // set the swipe orientation to vertical.
  });

setTheme(theme)

Sets the theme of Webviewer UI. Please note that this does not work in IE11.
Parameters:
Name Type Description
theme string | object Either theme object or predefined string. Predefined strings are 'default' and 'dark'.
Properties
Name Type Argument Default Description
primary string <optional>
#FFFFFF Background color for the header, modals, overlays, etc.
secondary string <optional>
#F5F5F5 ackground color for panels and the document container.
border string <optional>
#CDCDCD Border color for different components.
buttonHover string <optional>
#F6F6F6 Background color for hovering on a button.
buttonActive string <optional>
#F0F0F0 Background color for an active button.
text string <optional>
#333333 Text color.
icon string <optional>
#757575 Icon color.
iconActive string <optional>
#757575 Icon color when button is active.
Examples
// Using an object
WebViewer(...)
  .then(function(instance) {
    instance.setTheme({
      primary: '#2C2B3A',
      secondary: '#4D4C5F',
      border: '#555555',
      buttonHover: '#686880',
      buttonActive: '#686880',
      text: '#FFFFFF',
      icon: '#FFFFFF',
      iconActive: '#FFFFFF'
    });
  });
// Using predefined string
WebViewer(...)
  .then(function(instance) {
    instance.setTheme('dark');
  });

setToolMode(toolName)

Sets tool mode.
Parameters:
Name Type Description
toolName string Name of the tool, either from tool names list or the name you registered your custom tool with.
Example
WebViewer(...)
  .then(function(instance) {
    instance.setToolMode('AnnotationEdit');
  });

setZoomLevel(zoomLevel)

Sets zoom level.
Parameters:
Name Type Description
zoomLevel string | number Zoom level in either number or percentage.
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      instance.setZoomLevel('150%'); // or setZoomLevel(1.5)
    });
  });

showErrorMessage(message)

Displays the custom error message
Parameters:
Name Type Description
message string An error message
Example
WebViewer(...)
  .then(function(instance) {
    instance.showErrorMessage('My error message');
  });

toggleElement(dataElement)

Toggles a visibility state of the element to be visible/hidden. Note that toggleElement works only for panel/overlay/popup/modal elements.
Parameters:
Name Type Description
dataElement string data-element attribute value for a DOM element. To find data-element of a DOM element, refer to Finding data-element attribute values.
Example
WebViewer(...)
  .then(function(instance) {
    instance.toggleElement('leftPanel'); // open LeftPanel if it is closed, or vice versa
  });

toggleFullScreen()

Toggles full scree mode of the browser.
Example
WebViewer(...)
  .then(function(instance) {
    instance.toggleFullScreen();
  });

unregisterTool(toolName)

Unregisters tool in the document viewer tool mode map, and removes the button object.
Parameters:
Name Type Description
toolName string Name of the tool, either from tool names list or the name you registered your custom tool with.
Example
WebViewer(...)
  .then(function(instance) {
    instance.unregisterTool('MyTool');
  });

updateElement(dataElement, props)

Update an element in the viewer. Currently this API can only update elements that have a Button class name.
Parameters:
Name Type Description
dataElement string the data element of the element that will be updated.
props object An object that is used to override an existing item's properties.
Example
WebViewer(...)
  .then(function(instance) {
    instance.updateElement('thumbnailsPanelButton', {
      img: 'path/to/image',
      title: 'new_tooltip',
    })
  });

updateTool(toolName [, properties])

Update existing tool's properties.
Parameters:
Name Type Argument Description
toolName string Name of the tool, either from tool names list or the name you registered your custom tool with.
properties object <optional>
Tool properties
Properties
Name Type Argument Description
buttonImage string <optional>
Path to an image or base64 data for the tool button
buttonName string <optional>
Name of the tool button that will be used in data-element
buttonGroup string <optional>
Group of the tool button belongs to
tooltip string <optional>
Tooltip of the tool button
Example
WebViewer(...)
  .then(function(instance) {
    instance.updateTool('AnnotationCreateSticky', {
      buttonImage: 'https://www.pdftron.com/favicon-32x32.png'
    });
  });

useEmbeddedPrint( [use])

Use/not use embedded printing. Only applicable to Chrome. The printing process will be faster and the quality might be higher when using Chrome's native printing. You may not want to use embedded printing if there are custom annotations in your document.
Parameters:
Name Type Argument Default Description
use boolean <optional>
true Whether or not to use embedded printing
Example
WebViewer(...)
  .then(function(instance) {
    instance.useEmbeddedPrint(false); // disable embedded printing
  });

Type Definitions


filterAnnotation(annotation)

Callback that gets passed to setCustomNoteFilter.
Parameters:
Name Type Description
annotation Annotations.Annotation Annotation object
Returns:
Whether the annotation should be kept.
Type
boolean

getSeparatorContent(prevNote, currNote, options)

Callback that gets passed to `sortStrategy.getSeparatorContent` in addSortStrategy.
Parameters:
Name Type Description
prevNote Annotations.Annotation Previous note (annotation)
currNote Annotations.Annotation Current note (annotation)
options object Optional values
Properties
Name Type Description
pageLabels Array.<string> List of page label
Returns:
Content to be rendered in a separator
Type
string | number

getSortedNotes(notes)

Callback that gets passed to `sortStrategy.getSortedNotes` in addSortStrategy.
Parameters:
Name Type Description
notes Array.<Annotations.Annotation> List of unsorted notes (annotations)
Returns:
Sorted notes (annotations)
Type
Array.<Annotations.Annotation>

headerCallback(header)

Callback that gets passed to setHeaderItems.
Parameters:
Name Type Description
header Header Header instance with helper functions

renderCustomPanel()

Callback that gets passed to `options.panel.render` in setCustomPanel.
Returns:
Panel element.
Type
HTMLElement

searchListener(searchValue, options, results)

Callback that gets passed to addSearchListener.
Parameters:
Name Type Description
searchValue string Search value
options object Search options object, which includes 'caseSensitive', 'wholeWord', 'wildcard' and 'regex'
results Array.<object> Search results

shouldRenderSeparator(prevNote, currNote)

Callback that gets passed to `sortStrategy.shouldRenderSeparator` in addSortStrategy.
Parameters:
Name Type Description
prevNote Annotations.Annotation Previous note (annotation)
currNote Annotations.Annotation Current note (annotation)
Returns:
Whether a separator should be rendered or not
Type
boolean

storeisReplyDisabled(annotation)

Callback that gets passed to disableReplyForAnnotations
Parameters:
Name Type Description
annotation Annotations.Annotation Annotation object
Returns:
Whether the reply of the annotation should be disabled.
Type
boolean