WebViewer(options, viewerElement)
Creates a WebViewer instance and embeds it on the HTML page.
Parameters:
Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
object |
Properties
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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
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
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
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' ]); });
-
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.
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