Class: WebViewer


WebViewer(options, viewerElement)

Creates a WebViewer instance and embeds it on the HTML page.

Parameters:
Name Type Description
options object
Properties
Name Type Argument Default Description
annotationUser string <optional>
Guest

Name of the user for annotations

config string <optional>

URL path to a custom JavaScript for customizations

css string <optional>

URL path to a custom CSS file for customizations

disabledElements Array.<string> <optional>

List of data-elements to be disabled in UI

enableAnnotations boolean <optional>
true

Enable annotations feature

enableAzureWorkaround boolean <optional>
false

Enable workaround of the issue in Azure related to range requests

enableFilePicker boolean <optional>
false

Enable file picker feature

enableMeasurement boolean <optional>
false

Enable measurement tools

enableRedaction boolean <optional>
false

Enable redaction tool

extension string <optional>

Extension of the document to be loaded

forceClientSideInit boolean <optional>
false

If set to true then when loading a document using WebViewer Server the document will always switch to client only rendering allowing page manipulation and the full API to be used.

fullAPI boolean <optional>
false

Enable PDFNet.js library functions

initialDoc string <optional>

URL path to a document to load on startup

isAdminUser boolean <optional>
false

Set user permission to admin

isReadOnly boolean <optional>
false

Set user permission to read-only

licenseKey string

License key for viewing documents

mobileRedirect boolean <optional>
true

Whether the mobile viewer should redirect to a new window or not

path boolean <optional>
'WebViewer/lib'

Path to the WebViewer lib folder

preloadWorker string <optional>

Type of workers to be preloaded. Accepts pdf|office|all.

ui string <optional>
default

Type of UI to be used

workerTransportPromise object <optional>
Properties
Name Type Argument Description
pdf function <optional>

Promise that resolves to a PDF worker

office function <optional>

Promise that resolves to an office worker

viewerElement HTMLElement

DOM element that will contain WebViewer

Returns:

A promise resolved with WebViewer instance.

Type
Promise
Examples
// 5.1 and after
WebViewer({
  licenseKey: 'YOUR_LICENSE_KEY'
}, document.getElementById('viewer'))
  .then(function(instance) {
    var docViewer = instance.docViewer;
    var annotManager = instance.annotManager;
    // call methods from instance, docViewer and annotManager as needed

    // you can also access major namespaces from the instancs as follows:
    // var Tools = instance.Tools;
    // var Annotations = instance.Annotations;
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer({
  l: 'YOUR_LICENSE_KEY'
}, viewerElement);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  var docViewer = instance.docViewer;
  var annotManager = docViewer.getAnnotationManager();
  // call methods from instance, docViewer and annotManager as needed

  // you can also access major namespaces from the iframe window as follows:
  // var iframeWindow = document.querySelector('iframe').contentWindow;
  // var Tools = iframeWindow.Tools;
  // var Annotations = iframeWindow.Annotations;
});

Classes

Header

Members


Actions

Actions namespace

See:
Examples
// 5.1 and after
    WebViewer(...)
      .then(function(instance) {
        var Actions = instance.Actions;
        // Actions.SomeClass
      });
// 4.0 ~ 5.0
    var viewerElement = document.getElementById('viewer');
    var viewer = new PDFTron.WebViewer(...);

    viewerElement.addEventListener('ready', function() {
      var viewerIframe = document.querySelector('iframe');
      var Actions = viewerIframe.contentWindow.Actions;
      // Actions.SomeClass
    });

Annotations

Annotations namespace

See:
Examples
// 5.1 and after
    WebViewer(...)
      .then(function(instance) {
        var Annotations = instance.Annotations;
        // Annotations.SomeClass
      });
// 4.0 ~ 5.0
    var viewerElement = document.getElementById('viewer');
    var viewer = new PDFTron.WebViewer(...);

    viewerElement.addEventListener('ready', function() {
      var viewerIframe = document.querySelector('iframe');
      var Annotations = viewerIframe.contentWindow.Annotations;
      // Annotations.SomeClass
    });

annotManager

AnnotationManager instance

See:
Examples
// 5.1 and after
    WebViewer(...)
      .then(function(instance) {
        var annotManager = instance.annotManager;
        // annotManager.someAPI();
      });
// 4.0 ~ 5.0
    var viewerElement = document.getElementById('viewer');
    var viewer = new PDFTron.WebViewer(...);

    viewerElement.addEventListener('ready', function() {
      var instance = viewer.getInstance();
      var docViewer = instance.docViewer;
      var annotManager = docViewer.getAnnotationManager();
      // annotManager.someAPI();
    });

CoreControls

CoreControls namespace

See:
Examples
// 5.1 and after
    WebViewer(...)
      .then(function(instance) {
        var CoreControls = instance.CoreControls;
        // CoreControls.someAPI();
      });
// 4.0 ~ 5.0
    var viewerElement = document.getElementById('viewer');
    var viewer = new PDFTron.WebViewer(...);

    viewerElement.addEventListener('ready', function() {
      var viewerIframe = document.querySelector('iframe');
      var CoreControls = viewerIframe.contentWindow.CoreControls;
      // CoreControls.someAPI();
    });

docViewer

DocumentViewer instance

See:
Examples
// 5.1 and after
    WebViewer(...)
      .then(function(instance) {
        var docViewer = instance.docViewer;
        // docViewer.someAPI();
      });
// 4.0 ~ 5.0
    var viewerElement = document.getElementById('viewer');
    var viewer = new PDFTron.WebViewer(...);

    viewerElement.addEventListener('ready', function() {
      var instance = viewer.getInstance();
      var docViewer = instance.docViewer;
      // docViewer.someAPI();
    });

FitMode

Contains all posible modes for fitting/zooming pages to the viewer. The behavior may vary depending on the LayoutMode.

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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    var FitMode = instance.FitMode;
    instance.setFitMode(FitMode.FitWidth);
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  var FitMode = instance.FitMode;
  instance.setFitMode(FitMode.FitWidth);
});

iframeWindow

WebViewer iframe window object

Examples
// 5.1 and after
    WebViewer(...)
      .then(function(instance) {
        var iframeWindow = instance.iframeWindow;
        // iframeWindow.SomeNamespace
        // iframeWindow.document.querySelector('.some-element');
      });
// 4.0 ~ 5.0
    var viewerElement = document.getElementById('viewer');
    var viewer = new PDFTron.WebViewer(...);

    viewerElement.addEventListener('ready', function() {
      var viewerIframe = document.querySelector('iframe');
      var iframeWindow = viewerIframe.contentWindow;
      // iframeWindow.SomeNamespace
      // iframeWindow.document.querySelector('.some-element');
    });

LayoutMode

Contains string enums for all layouts for WebViewer. They are used to dictate how pages are placed within the viewer.

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    var LayoutMode = instance.LayoutMode;
    instance.setLayoutMode(LayoutMode.Single);
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  var LayoutMode = instance.LayoutMode;
  instance.setLayoutMode(LayoutMode.Single);
});

PartRetrievers

PartRetrievers namespace

See:
Examples
// 5.1 and after
    WebViewer(...)
      .then(function(instance) {
        var PartRetrievers = intance.PartRetrievers;
        // PartRetrievers.SomeClass
      });
// 4.0 ~ 5.0
    var viewerElement = document.getElementById('viewer');
    var viewer = new PDFTron.WebViewer(...);

    viewerElement.addEventListener('ready', function() {
      var viewerIframe = document.querySelector('iframe');
      var PartRetrievers = viewerIframe.contentWindow.CoreControls.PartRetrievers;
      // PartRetrievers.SomeClass
    });

PDFNet

PDFNet namespace

See:
Examples
// 5.1 and after
    WebViewer(...)
      .then(function(instance) {
        var PDFNet = instance.PDFNet;
        // PDFNet.someAPI();
      });
// 4.0 ~ 5.0
    var viewerElement = document.getElementById('viewer');
    var viewer = new PDFTron.WebViewer(...);

    viewerElement.addEventListener('ready', function() {
      var viewerIframe = document.querySelector('iframe');
      var PDFNet = viewerIframe.contentWindow.PDFNet;
      // PDFNet.someAPI();
    });

Tools

Tools namespace

See:
Examples
// 5.1 and after
    WebViewer(...)
      .then(function(instance) {
        var Tools = instance.Tools;
        // Tools.SomeClass
      });
// 4.0 ~ 5.0
    var viewerElement = document.getElementById('viewer');
    var viewer = new PDFTron.WebViewer(...);

    viewerElement.addEventListener('ready', function() {
      var viewerIframe = document.querySelector('iframe');
      var Tools = viewerIframe.contentWindow.Tools;
      // Tools.SomeClass
    });

Methods


addSearchListener(searchListener)

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

Parameters:
Name Type Description
searchListener WebViewer~searchListener

Callback function that will be triggered when search completed

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    function searchListener(searchValue, options, results) {
      console.log(searchValue, options, results);
    };

    instance.addSearchListener(searchListener);
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  var searchListener = function(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 WebViewer~getSortedNotes

Function that takes unsorted notes (annotations) and returns them sorted

shouldRenderSeparator WebViewer~shouldRenderSeparator

Function that returns when a separator should be rendered

getSeparatorContent WebViewer~getSeparatorContent

Function that returns the content of a separator

Examples
// 5.1 and after
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);
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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
Examples
// 5.1 and after
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);
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    // closes (hides) text popup and left panel in the UI
    instance.closeElements([ 'menuOverlay', 'leftPanel' ]);
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();

  // closes (hides) text popup and left panel in the UI
  instance.closeElements([ 'menuOverlay', 'leftPanel' ]);
});

disableAnnotations()

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.disableAnnotations();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.disableAnnotations();
});

disableDownload()

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.disableDownload();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.disableDownload();
});

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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    // remove left panel and left panel button from the DOM
    instance.disableElements([ 'leftPanel', 'leftPanelButton' ]);
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();

  // remove left panel and left panel button from the DOM
  instance.disableElements([ 'leftPanel', 'leftPanelButton' ]);
});

disableFilePicker()

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.disableFilePicker();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.disableFilePicker();
});

disableLocalStorage()

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.disableLocalStorage();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.disableLocalStorage();
});

disableMeasurement()

Disables measurement feature, affecting any elements related to measurement tools.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.disableMeasurement();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.disableMeasurement();
});

disableNotesPanel()

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.disableNotesPanel();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.disableNotesPanel();
});

disablePrint()

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.disablePrint();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.disablePrint();
});

disableRedaction()

Disables redaction feature, affecting any elements related to redaction.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.disableRedaction();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.disableRedaction();
});

disableTextSelection()

Disables text to be selected in the document.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.disableTextSelection();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.disableTextSelection();
});

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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    // disable sticky annotation tool and free text tool
    instance.disableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();

  // disable sticky annotation tool and free text tool
  instance.disableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
});

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.

Examples
// 5.1 and after
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);
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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);
  });
});

enableAnnotations()

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.enableAnnotations();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.enableAnnotations();
});

enableDownload()

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.enableDownload();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.enableDownload();
});

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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    // remove left panel and left panel button from the DOM
    instance.enableElements([ 'leftPanel', 'leftPanelButton' ]);
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();

  // remove left panel and left panel button from the DOM
  instance.enableElements([ 'leftPanel', 'leftPanelButton' ]);
});

enableFilePicker()

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.enableFilePicker();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.enableFilePicker();
});

enableLocalStorage()

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.enableLocalStorage();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.enableLocalStorage();
});

enableMeasurement()

Enables measurement feature, affecting any elements related to measurement tools.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.enableMeasurement();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.enableMeasurement();
});

enableNotesPanel()

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.enableNotesPanel();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.enableNotesPanel();
});

enablePrint()

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.enablePrint();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.enablePrint();
});

enableRedaction()

Enables redaction feature, affecting any elements related to redaction.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.enableRedaction();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.enableRedaction();
});

enableTextSelection()

Enables text to be selected in the document.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.enableTextSelection();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.enableTextSelection();
});

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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    // enable sticky annotation tool and free text tool
    instance.enableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();

  // enable sticky annotation tool and free text tool
  instance.enableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
});

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.

Examples
// 5.1 and after
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
        }
      });
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  var annotManager = instance.docViewer.getAnnotationManager();

  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
      }
    });
  });
});

getAnnotationUser()

Return the current username.

Returns:

Current username

Type
string
Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    console.log(instance.getAnnotationUser());
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  console.log(instance.getAnnotationUser());
});

getCurrentPageNumber()

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

Returns:

Current page number (1-indexed)

Type
number
Examples
// 5.1 and after
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.getCurrentPageNumber());
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  var docViewer = instance.docViewer;

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

getFitMode()

Return the current fit mode of the WebViewer.

Returns:

Current fit mode

Type
CoreControls.ReaderControl#FitMode
Examples
// 5.1 and after
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());
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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 WebViewer.

Returns:

Current layout mode

Type
CoreControls.ReaderControl#LayoutMode
Examples
// 5.1 and after
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());
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  var docViewer = instance.docViewer;

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

getPageCount()

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

Returns:

Total number of pages

Type
number
Examples
// 5.1 and after
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.getPageCount());
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  var docViewer = instance.docViewer;

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

getToolMode()

Return the current tool object.

Returns:

Instance of the current tool

Type
Tools
Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    console.log(instance.getToolMode().name, instance.getToolMode());
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  console.log(instance.getToolMode().name, instance.getToolMode());
});

getZoomLevel()

Return the current zoom level

Returns:

Zoom level (0 ~ 1)

Type
number
Examples
// 5.1 and after
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());
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  var docViewer = instance.docViewer;

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

goToFirstPage()

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      instance.goToFirstPage();
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  var docViewer = instance.docViewer;

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

goToLastPage()

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      instance.goToLastPage();
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  var docViewer = instance.docViewer;

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

goToNextPage()

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      instance.goToNextPage();
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  var docViewer = instance.docViewer;

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

goToPrevPage()

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      instance.goToPrevPage();
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  var docViewer = instance.docViewer;

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

isAdminUser()

Returns whether the current user is admin.

Returns:

Whether the user is admin.

Type
boolean
Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    console.log(instance.isAdminUser());
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  console.log(instance.isAdminUser());
});

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
Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    console.log(instance.isElementDisabled('leftPanel'));
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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
Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    console.log(instance.isElementOpen('leftPanel'));
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  console.log(instance.isElementOpen('leftPanel'));
});

isMobileDevice()

Returns if the current browser is on a mobile device.

Returns:

Whether the current browser is on a mobile device.

Type
boolean
Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    console.log(instance.isMobileDevice());
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  console.log(instance.isMobileDevice());
});

isReadOnly()

Returns whether the current mode is read only.

Returns:

Whether the current mode is read only.

Type
boolean
Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    console.log(instance.isReadOnly());
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  console.log(instance.isReadOnly());
});

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
Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    console.log(instance.isToolDisabled());
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.loadDocument('https://www.pdftron.com/downloads/pl/test.pdf', {
      documentId: '1',
      filename: 'sample-1.pdf'
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    // opens (shows) text popup and annotation popup in the UI
    instance.openElements([ 'menuOverlay', 'leftPanel' ]);
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();

  // opens (shows) text popup and annotation popup in the UI
  instance.openElements([ 'menuOverlay', 'leftPanel' ]);
});

print()

Print the current document.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      instance.print();
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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

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.

Examples
// 5.1 and after
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);
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  // 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 searchListener

Search listener function that was added.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    function searchListener(searchValue, options, results) {
      console.log(searchValue, options, results);
    };
    
    instance.addSearchListener(searchListener);
    instance.removeSearchListener(searchListener);
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  var searchListener = function(searchValue, options, results) {
    console.log(searchValue, options, results);
  };

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

rotateClockwise()

Rotates the document in the WebViewer clockwise.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      instance.rotateClockwise();
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  var docViewer = instance.docViewer;

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

rotateCounterClockwise()

Rotates the document in the WebViewer counter-clockwise.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      instance.rotateCounterClockwise();
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  var docViewer = instance.docViewer;

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

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.

Examples
// 5.1 and after
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
      });
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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.

Examples
// 5.1 and after
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
      });
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.setActiveHeaderGroup('tools'); // switch to tools header
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    // open left panel
    instance.openElements([ 'leftPanel' ]);
    // view outlines panel
    instance.setActiveLeftPanel('outlinesPanel');
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();

  // open left panel
  instance.openElements([ 'leftPanel' ]);
  // view outlines panel
  instance.setActiveLeftPanel('outlinesPanel');
});

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

Parameters:
Name Type Description
isAdmin boolean

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.setAdminUser(true); // sets the current user to be an admin
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

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

setAnnotationUser(username)

Sets name of the current user

Parameters:
Name Type Description
username string

Username to be used for current user.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.setAnnotationUser('Guest-1');
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.setAnnotationUser('Guest-1');
});

setCurrentPageNumber(pageNumber)

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

Parameters:
Name Type Description
pageNumber number

The page number (1-indexed) of the document to set.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.docViewer;

    // you must have a document loaded when calling this api
    docViewer.on('documentLoaded', function() {
      instance.setCurrentPageNumber(2);
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();

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

setCustomNoteFilter(filterAnnotation)

Filter the annotations shown in the notes panel

Parameters:
Name Type Description
filterAnnotation WebViewer~filterAnnotation

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    // only show annotations that are created by John
    instance.setCustomNoteFilter(function(annotation) {
      return annotation.Author === 'John';
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();

  // 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 WebViewer~renderCustomPanel

Function that returns panel element.

Examples
// 5.1 and after
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);
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

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

  instance.setCustomPanel();
});

setFitMode(fitMode)

Sets the fit mode of the viewer.

Parameters:
Name Type Description
fitMode CoreControls.ReaderControl#FitMode

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

Examples
// 5.1 and after
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);
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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 WebViewer~headerCallback

Callback function to perform different operations on the header.

Examples
// 5.1 and after
// 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);
    });
  });
// 4.0 ~ 5.0
// Adding save annotations button
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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);
  });
});
// 5.1 and after
// Removing existing buttons
WebViewer(...)
  .then(function(instance) {
    instance.setHeaderItems(function(header) {
      var items = header.getItems().slice(9, -3);
      header.update(items);
    });
  });
// 4.0 ~ 5.0
// Removing existing buttons
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.setHeaderItems(function(header) {
    var items = header.getItems().slice(9, -3);
    header.update(items);
  });
});
// 5.1 and after
// 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'
      });
    });
  });
// 4.0 ~ 5.0
// Removing existing buttons
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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'.

Examples
// 5.1 and after
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')
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.setLanguage('fr'); // set the language to French
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.setLanguage('fr'); // set the language to French
});

setLayoutMode(layoutMode)

Sets the layout mode of the viewer.

Parameters:
Name Type Description
layoutMode CoreControls.ReaderControl#LayoutMode

Layout mode of WebViewer.

Examples
// 5.1 and after
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);
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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);
  });
});

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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.setMaxZoomLevel('150%'); // or setMaxZoomLevel(1.5)
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.setMeasurementUnits({
      from: ['in', 'cm', 'm'],
      to: ['cm', 'm', 'km']
    }); 
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.setMinZoomLevel('10%'); // or setMinZoomLevel(0.1)
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.setNoteDataFormat('DD.MM.YYYY HH:MM');
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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.

Examples
// 5.1 and after
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
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.setPrintQuality(2);
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.setPrintQuality(2);
});

setReadOnly(isReadOnly)

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

Parameters:
Name Type Description
isReadOnly boolean

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.setReadOnly(true); // sets the viewer to read only mode
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.setReadOnly(true); // sets the viewer to read only mode
});

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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.setSortStrategy('time'); // sort notes by time
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.setSwipeOrientation('vertical'); // set the swipe orientation to vertical.
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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
// 5.1 and after
// 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'
    });
  });
// 4.0 ~ 5.0
// Using an object
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.setTheme({
    primary: '#2C2B3A',
    secondary: '#4D4C5F',
    border: '#555555',
    buttonHover: '#686880',
    buttonActive: '#686880',
    text: '#FFFFFF',
    icon: '#FFFFFF',
    iconActive: '#FFFFFF'
  });
});
// 5.1 and after
// Using predefined string
WebViewer(...)
  .then(function(instance) {
    instance.setTheme('dark');
  });
// 4.0 ~ 5.0
// Using predefined string
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.setToolMode('AnnotationEdit');
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.setToolMode('AnnotationEdit');
});

setZoomLevel(zoomLevel)

Sets zoom level.

Parameters:
Name Type Description
zoomLevel string | number

Zoom level in either number or percentage.

Examples
// 5.1 and after
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)
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.showErrorMessage('My error message');
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.toggleElement('leftPanel'); // open LeftPanel if it is closed, or vice versa
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

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

toggleFullScreen()

Toggles full scree mode of the browser.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.toggleFullScreen();
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  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.

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.unregisterTool('MyTool');
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.unregisterTool('MyTool');
});

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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.updateTool('AnnotationCreateSticky', {
      buttonImage: 'https://www.pdftron.com/favicon-32x32.png'
    });
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

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

useEmbeddedPrint( [use])

Use/not use embedded 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

Examples
// 5.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.useEmbeddedPrint(false); // disable embedded printing
  });
// 4.0 ~ 5.0
var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer(...);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();
  instance.useEmbeddedPrint(false); // disable embedded printing
});

Type Definitions


filterAnnotation(annotation)

Callback that gets passed to setCustomNoteFilter.

Parameters:
Name Type Description
annotation Annotations

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 Annotation

Previous note (annotation)

currNote 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.<Annotation>

List of unsorted notes (annotations)

Returns:

Sorted notes (annotations)

Type
Array.<Annotation>

headerCallback(header)

Callback that gets passed to setHeaderItems.

Parameters:
Name Type Description
header CoreControls.ReaderControl.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 Annotation

Previous note (annotation)

currNote Annotation

Current note (annotation)

Returns:

Whether a separator should be rendered or not

Type
boolean