Class: GcPdfViewer

Document Solutions PDF Viewer (DsPdfViewer) is a fast JavaScript based client-side PDF Viewer that runs in all major browsers.

Note that DsPdfViewer is the new name for GcPdfViewer, with the same API.

During this transition period we are publishing both versions, but it is recommended that you switch to using DsPdfViewer when possible.

Extends

• unknown

Extended by

• DsPdfViewer

Constructors

new GcPdfViewer()

new GcPdfViewer(element, options?): GcPdfViewer

Document Solutions PDF Viewer constructor.

Parameters

element

root container element or selector pattern used to select the root container element.

string | HTMLElement

options?

Partial<ViewerOptions>

Viewer options. See ViewerOptions for further information.

Returns

GcPdfViewer

Overrides

ReportViewer.constructor

Properties

LicenseKey

static LicenseKey: string

Product license key.

Example

<script>
 // Add your license
 DsPdfViewer.LicenseKey = 'XXX';
 // Add your code
 const viewer = new DsPdfViewer("#viewer");
 viewer.addDefaultPanels();
</script>

---

registeredFonts

registeredFonts: object

An object to keep track of registered fonts. The key is the font name, and the value is an object containing the URL and format of the font.

Index Signature

[fontName: string]: object

Accessors

i18n

Get Signature

get static i18n(): i18n

Gets i18next instance which can be used to add viewer translations. See https://www.i18next.com for details about i18next framework.

Example

function loadPdfViewer(selector) {
  // You can load translations from any source (see en-pdf-viewer.json for an example):
  var myTranslations = {
		"toolbar": {
			"open-document": "Open MY document",
			"pan": "My Pan tool",
		}
   };
   // Initialize translations:
   DsPdfViewer.i18n.init({
     resources: { myLang: { viewer: myTranslations } },
     defaultNS: 'viewer'
   }).then(function(t) {
     // New translations initialized and ready to go!
     // Now create PDF viewer:
     var viewer = new DsPdfViewer(selector, { language: 'myLang' });
     viewer.addDefaultPanels();
     //viewer.open("sample.pdf");
   });
}
loadPdfViewer('#root');

Returns

i18n

---

activatedEditorMode

Get Signature

get activatedEditorMode(): "" | "SecondBar" | "FormEditor" | "AnnotationEdtor" | "Any"

Activated editor mode name.

Returns

"" | "SecondBar" | "FormEditor" | "AnnotationEdtor" | "Any"

---

annotations

Get Signature

get annotations(): Promise<object[]>

Retrieves all annotations in the document, organized by page.

This property returns a promise that resolves to an array of objects, where each object represents a page in the document. Each object contains the page index and an array of annotations present on that page.

Examples

var viewer = new DsPdfViewer('#root');
viewer.addDefaultPanels();
viewer.onAfterOpen.register(function() {
  viewer.annotations.then(function(data) {
    data.forEach(pageData => {
      console.log(`Page ${pageData.pageIndex} has ${pageData.annotations.length} annotation(s)`);
    });
  });
});
viewer.open('Test.pdf');

viewer.annotations.then(function(data) {
  data.forEach(pageData => {
    const highlightAnnotations = pageData.annotations.filter(ann => ann.annotationType === 9);
    console.log(`Page ${pageData.pageIndex} has ${highlightAnnotations.length} highlight annotation(s)`);
  });
});

viewer.annotations.then(function(data) {
  data.forEach(pageData => {
    pageData.annotations.forEach(annotation => {
      console.log(`Annotation ID: ${annotation.id}, Type: ${annotation.subtype}, Contents: ${annotation.contents}`);
    });
  });
});

viewer.annotations
  .then(data => {
    console.log(`Retrieved annotations for ${data.length} pages`);
  })
  .catch(error => {
    console.error('Failed to retrieve annotations:', error);
  });

Returns

Promise<object[]>

A promise that resolves with annotations grouped by page.

---

beforeUnloadConfirmation

Get Signature

get beforeUnloadConfirmation(): boolean

Ask the user if he want to leave the page when document is modified. Requires SupportApi.

Example

 var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
 viewer.addDefaultPanels();
 viewer.addAnnotationEditorPanel();
 viewer.addFormEditorPanel();
 viewer.beforeUnloadConfirmation = true;

Returns

boolean

Set Signature

set beforeUnloadConfirmation(enable): void

Ask the user if he want to leave the page when document is modified. Requires SupportApi.

Example

 var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
 viewer.addDefaultPanels();
 viewer.addAnnotationEditorPanel();
 viewer.addFormEditorPanel();
 viewer.beforeUnloadConfirmation = true;

Parameters

enable

boolean

Returns

void

---

canEditDocument

Get Signature

get canEditDocument(): boolean

Indicates whether the open document can be edited using SupportApi. Requires SupportApi.

Example

if(viewer.canEditDocument) {
  alert("Document editing features enabled.");
} else {
  alert("Document editing features disabled.");
}

Returns

boolean

---

currentUserName

Get Signature

get currentUserName(): string

Specifies the current user name. The property is used by Annotation Editor as default value for 'author' field.

Examples

viewer.currentUserName = "John";

alert("The current user name is " + viewer.currentUserName);

Returns

string

Set Signature

set currentUserName(userName): void

Specifies the current user name. The property is used by Annotation Editor as default value for 'author' field. Note, current user name is saved in the browser's local storage and it will be used on the next page reload if userName option is not set.

Examples

viewer.currentUserName = "John";

alert("The current user name is " + viewer.currentUserName);

Parameters

userName

string

Returns

void

---

dataLoader

Get Signature

get dataLoader(): GcPdfViewerDataLoader

PDF document meta data loader. Used by some sidebar panels.

Returns

GcPdfViewerDataLoader

---

editMode

Get Signature

get editMode(): EditMode

Indicates the selected editing tool for the Annotation editor or Form editor. Requires SupportApi.

Example

 // Set the layout mode to "Annotation editor"
 viewer.layoutMode = 1;
 // Set the edit mode to "Square".
 viewer.editMode = 4;

Returns

EditMode

Set Signature

set editMode(mode): void

Indicates the selected editing tool for the Annotation editor or Form editor. Requires SupportApi.

Example

 // Set the layout mode to "Annotation editor"
 viewer.layoutMode = 1;
 // Set the edit mode to "Square".
 viewer.editMode = 4;

Parameters

mode

EditMode

Returns

void

---

eventBus

Get Signature

get eventBus(): IGCEventBus

Internal event bus. Available event names are: outlineloaded, attachmentsloaded, namedaction, pagemode, fileattachmentannotation, pagerendered, pagecancelled, scalechange, pagesinit, pagesloaded, documentchanged, rotationchanging, updateviewarea, undostorechanged, show-custom-layout, hide-custom-layout, annotationeditstarted, unselectannotation, annotation-bounds-change, pagechange, mousemodechange, request-answer, textlayerready, textselectionchanged, viewersizechanged, articlebeadnavigate, error, open, pagelabels, documentload.

Example

// Example: listen annotation selected/unselected event.
var viewer = DsPdfViewer.findControl("#root");
viewer.eventBus.on("annotationeditstarted", (args)=> {
    console.log("Annotation selected, annotation id: " + args.annotationId);
});
viewer.eventBus.on("unselectannotation", (args)=> {
    console.log("Annotation unselected, annotation id: " + args.annotationId);
});

Returns

IGCEventBus

---

fileData

Get Signature

get fileData(): Uint8Array<ArrayBuffer>

Gets the file data. Available when keepFileData option is set to true.

Example

var viewer = new DsPdfViewer('#root', { keepFileData: true });
viewer.open('Test.pdf');
viewer.onAfterOpen.register(function() {
  var pdfFileData = viewer.fileData;
});

Returns

Uint8Array<ArrayBuffer>

---

fileName

Get Signature

get fileName(): string

Gets the file name that was used to open the document. The file name is determined as follows:

• if a local file was opened using the "Open File" dialog, returns the local file name;
• else, if a new file was created using the "newDocument" method, returns the argument passed to that method;
• else, if options.friendlyFileName is not empty, returns its value;
• else, returns the name generated from the URL passed to the "open" method.

Example

var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
  alert("The document is opened, the fileName is " + viewer.fileName);
});
viewer.open('MyDocuments/Test.pdf');

Returns

string

---

fileSize

Get Signature

get fileSize(): Promise<number>

Gets the PDF document file size in bytes.

Example

const fileSizeBytes = await viewer.fileSize;

Returns

Promise<number>

---

fileUrl

Get Signature

get fileUrl(): string

Gets the URL that was used to open the document. Returns an empty string when the document was opened from binary data.

Example

var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
  alert("The document is opened, the fileUrl is " + viewer.fileUrl);
});
viewer.open('MyDocuments/Test.pdf');

Returns

string

---

fingerprint

Get Signature

get fingerprint(): string

An unique document identifier.

Example

var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
  alert("The document opened, an unique document identifier is "+ viewer.fingerprint);
});
viewer.open('Test.pdf');

Returns

string

---

gcPdfVersion

Get Signature

get gcPdfVersion(): string

Gets the GcPdf library version used by the SupportApi, if available.

Returns

string

---

hasChanges

Get Signature

get hasChanges(): boolean

Indicates whether the document has been modified by the user.

Example

if(viewer.hasChanges) {
  alert("The document has been changed.");
}

Returns

boolean

---

hasCopyData

Get Signature

get hasCopyData(): boolean

Indicates whether the copy buffer contains any data.

Example

if(viewer.hasCopyData) {
  viewer.execPasteAction();
}

Returns

boolean

---

hasDocument

Get Signature

get hasDocument(): boolean

Indicates whether the document is loaded into view.

Example

if(!viewer.hasDocument) {
  viewer.open("sample.pdf");
}

Returns

boolean

---

hasForm

Get Signature

get hasForm(): boolean

Gets a value indicating whether the active document has any form fields.

Example

if(viewer.hasForm) {
  viewer.showFormFiller();
}

Returns

boolean

---

hasPersistentConnection

Get Signature

get hasPersistentConnection(): boolean

Gets a value indicating whether the viewer has a persistent connection to the server.

• if(viewer.hasPersistentConnection) {
• viewer.getSharedDocuments().then(function(result) {
• });
• }

Returns

boolean

---

hasRedoChanges

Get Signature

get hasRedoChanges(): boolean

Gets a value indicating whether the pdf viewer can redo document changes. Requires SupportApi.

Example

if(viewer.hasRedoChanges) {
  viewer.redoChanges();
}

Returns

boolean

---

hasReplyTool

Get Signature

get hasReplyTool(): boolean

Indicates whether the Reply Tool has been added.

Example

var viewer = new DsPdfViewer('#root');
if(viewer.hasReplyTool) {
  alert("The Reply Tool has not been added to the viewer.");
} else {
  alert("The Reply Tool has been added to the viewer.");
}
viewer.open('Test.pdf');

Returns

boolean

---

hasUndoChanges

Get Signature

get hasUndoChanges(): boolean

Gets a value indicating whether the pdf viewer can undo document changes. Requires SupportApi.

Example

if(viewer.hasUndoChanges) {
  viewer.undoChanges();
}

Returns

boolean

---

hideAnnotations

Get Signature

get hideAnnotations(): boolean

Determines whether the annotation layer is hidden.

Example

// Hide annotations:
viewer.hideAnnotations = true;

Returns

boolean

Set Signature

set hideAnnotations(hide): void

Determines whether the annotation layer is hidden.

Example

// Hide annotations:
viewer.hideAnnotations = true;

Parameters

hide

boolean

Returns

void

---

highlightManager

Get Signature

get highlightManager(): ITextHighlightManager

Returns the instance of the ITextHighlightManager for managing text highlights in the document.

This property provides access to the ITextHighlightManager which allows you to add, remove, retrieve, and clear text highlights within the document. If the highlightManager instance does not already exist, it is created and initialized with the current plugin context.

Example

// Access the highlight manager and add a highlight:
const highlightManager = viewer.highlightManager;
highlightManager.highlightTextSegment(1, 0, 50, { color: 'rgba(255, 255, 0, 0.5)' });

Returns

ITextHighlightManager

The ITextHighlightManager instance for the document.

---

isDocumentShared

Get Signature

get isDocumentShared(): boolean

Gets a value indicating whether the active document is open in shared mode. Requires SupportApi.

Example

if(viewer.isDocumentShared) {
  alert("The document is open in shared mode.");
}

Returns

boolean

---

isEditModeSticked

Get Signature

get isEditModeSticked(): boolean

Returns true if the active edit mode is sticked by the user. Indicates that the stickyBehavior for the active edit button is enabled and the button is checked. See the toolbarLayout.stickyBehavior property for details.

Returns

boolean

---

isInEditorMode

Get Signature

get isInEditorMode(): boolean

Gets a value indicating whether the editor mode is currently active.

Examples

let isInEditorMode = viewer.isInEditorMode;

// Detect the start/end of edit mode
var isEdit = false;
viewer.onViewerStateChange.register(function () {
	if (viewer.isInEditorMode !== isEdit) {
		isEdit = viewer.isInEditorMode;
		console.log(isEdit ? "Editor Mode activated." : "Editor Mode deactivated.");
	}
});

Returns

boolean

---

jsFormatFunctions

Get Signature

get jsFormatFunctions(): any

In some specific cases, users may need to override or add new JavaScript formatting functions. Use the jsFormatFunctions property to achieve this.

Example

// Below is an example of how to add a new custom formatting function that appends a postfix to a field value
viewer.jsFormatFunctions.customUserFormat = function(strValue, postfix){
  return strValue + postfix;
}

Returns

any

---

language

Get Signature

get language(): string

language - A property that retrieves the standardized language key based on the provided language option. The language key is determined by the options.language setting.

Returns

string

Standardized language key (e.g., 'en', 'ja').

---

layoutMode

Get Signature

get layoutMode(): LayoutMode

Gets or sets the layout mode (0 - Viewer, 1 - AnnotationEditor or 2 - FormEditor).

Default

0

Example

 // Set the layout mode to "Form editor"
 viewer.layoutMode = 2;

Returns

LayoutMode

Set Signature

set layoutMode(mode): void

Gets or sets the layout mode (0 - Viewer, 1 - AnnotationEditor or 2 - FormEditor).

Default

0

Example

 // Set the layout mode to "Form editor"
 viewer.layoutMode = 2;

Parameters

mode

LayoutMode

Returns

void

---

leftSidebar

Get Signature

get leftSidebar(): LeftSidebar

Left sidebar API.

Example

viewer.leftSidebar.hide();

Returns

LeftSidebar

---

logLevel

Get Signature

get logLevel(): LogLevel

Gets current log level. Available log levels are: 'None', 'Critical', 'Error', 'Warning', 'Information', 'Debug', 'Trace'. Default level is 'None'.

Returns

LogLevel

Set Signature

set logLevel(logLvel): void

Sets current log level. Available log levels are: 'None', 'Critical', 'Error', 'Warning', 'Information', 'Debug', 'Trace'. Default level is 'None'.

Parameters

logLvel

LogLevel

Returns

void

---

modificationsState

Get Signature

get modificationsState(): ModificationsState

Gets modifications state for active document. Requires SupportApi.

Example

 var modificationsState = viewer.modificationsState;
 console.log(modificationsState);

Returns

ModificationsState

---

onAfterAddAnnotation

Get Signature

get onAfterAddAnnotation(): EventFan<AfterAddAnnotationEventArgs>

After add annotation event.

Example

viewer.onAfterAddAnnotation.register(function(args) {
    console.log(args); // Log the event arguments to the console
});

Returns

EventFan<AfterAddAnnotationEventArgs>

---

onAfterOpen

Get Signature

get onAfterOpen(): EventFan<EventArgs>

The event raised when the user changes the viewer theme.

Example

var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
  alert("The document opened.");
});
viewer.open('Test.pdf');

Returns

EventFan<EventArgs>

---

onAfterRemoveAnnotation

Get Signature

get onAfterRemoveAnnotation(): EventFan<AfterRemoveAnnotationEventArgs>

After remove annotation event.

Example

viewer.onAfterRemoveAnnotation.register(function(args) {
    console.log(args);
});

Returns

EventFan<AfterRemoveAnnotationEventArgs>

---

onAfterUpdateAnnotation

Get Signature

get onAfterUpdateAnnotation(): EventFan<AfterUpdateAnnotationEventArgs>

After update annotation event.

Example

viewer.onAfterUpdateAnnotation.register(function(args) {
    console.log(args);
});

Returns

EventFan<AfterUpdateAnnotationEventArgs>

---

onBeforeAddAnnotation

Get Signature

get onBeforeAddAnnotation(): EventFan<BeforeAddAnnotationEventArgs>

Before add annotation event. The event is cancelable.

Examples

// This example demonstrates how to change the color of an annotation to red
// before it is added to the PDF viewer.
viewer.onBeforeAddAnnotation.register(function(args) {
   args.annotation.color = "#ff0000"; // Set the annotation color to red
});

// This example demonstrates how to prevent an annotation from being added.
viewer.onBeforeAddAnnotation.register(function(args) {
  console.log(args); // Log the event arguments to the console
  args.cancel = true; // Set the cancel flag to cancel the annotation addition
});

Returns

EventFan<BeforeAddAnnotationEventArgs>

---

onBeforeOpen

Get Signature

get onBeforeOpen(): EventFan<BeforeOpenEventArgs>

Occurs immediately before the document opens.

Example

var viewer = new DsPdfViewer('#root');
viewer.onBeforeOpen.register(function(args) {
  alert("A new document will be opened,\n payload type(binary or URL): " + args.type +",\n payload(bytes or string): " + args.payload);
});
viewer.open('Test.pdf');

Returns

EventFan<BeforeOpenEventArgs>

---

onBeforeRemoveAnnotation

Get Signature

get onBeforeRemoveAnnotation(): EventFan<BeforeRemoveAnnotationEventArgs>

Before remove annotation event. The event is cancelable.

viewer.onBeforeRemoveAnnotation.register(function(args) {
  console.log(args);
  args.cancel = true; // set the cancel flag to cancel event.
});

Returns

EventFan<BeforeRemoveAnnotationEventArgs>

---

onBeforeUpdateAnnotation

Get Signature

get onBeforeUpdateAnnotation(): EventFan<BeforeUpdateAnnotationEventArgs>

Before update annotation event. The event is cancelable.

// This example demonstrates how to prevent an annotation from being updated.
viewer.onBeforeUpdateAnnotation.register(function(args) {
  console.log(args); // Log the event arguments to the console
  args.cancel = true; // set the cancel flag to cancel event.
});

Returns

EventFan<BeforeUpdateAnnotationEventArgs>

---

onError

Get Signature

get onError(): EventFan<ErrorEventArgs>

The event indicating error.

Example

var viewer = new DsPdfViewer('#root');
viewer.addDefaultPanels();
viewer.onError.register(handleError);
viewer.open('Test.pdf');

function handleError(eventArgs) {
    var message = eventArgs.message;
    if (message.indexOf("Invalid PDF structure") !== -1) {
        alert('Unable to load pdf document, pdf document is broken.');
    } else {
        alert('Unexpected error: ' + message);
    }
}

Returns

EventFan<ErrorEventArgs>

---

onThemeChanged

Get Signature

get onThemeChanged(): EventFan<EventArgs>

Occurs when the viewer theme changed by user.

Example

var viewer = new DsPdfViewer(selector, {
	requireTheme: localStorage.getItem('demo_theme') || 'viewer'
});
viewer.addDefaultPanels();
viewer.onThemeChanged.register(function(args) {
  localStorage.setItem('demo_theme', args.theme);
});

Returns

EventFan<EventArgs>

---

optionalContentConfig

Get Signature

get optionalContentConfig(): Promise<OptionalContentConfig>

Default optional content config. An optional content is a collection of graphics that can be made visible or invisible dynamically.

Examples

// Use the optionalContentConfig property to print information about all available layers
const config = await viewer.optionalContentConfig;
console.table(config.getGroups());

const config = await viewer.optionalContentConfig;
// Turn off optional content group with id "13R":
config.setVisibility("13R", false);
// Repaint visible pages:
viewer.repaint();

Returns

Promise<OptionalContentConfig>

---

options

Get Signature

get options(): Partial<ViewerOptions>

The viewer options.

Example

viewer.options.zoomByMouseWheel = { always: true };
viewer.applyOptions();

Returns

Partial<ViewerOptions>

Set Signature

set options(options): void

PDF viewer options.

Parameters

options

Partial<ViewerOptions>

Returns

void

---

pageCount

Get Signature

get pageCount(): number

Gets pages count.

Example

var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
  alert("The document opened. Total number of pages: " + viewer.pageCount);
});
viewer.open('Test.pdf');

Returns

number

---

pageDisplay

Get Signature

get pageDisplay(): PageDisplayType

Page display mode.

Returns

PageDisplayType

---

pageIndex

Get Signature

get pageIndex(): number

Gets/sets the active page index.

Example

var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
  // Navigate page with index 9:
  viewer.pageIndex = 9;
});
viewer.open('Test.pdf');

Returns

number

Set Signature

set pageIndex(val): void

Gets/sets the active page index.

Example

var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
  // Navigate page with index 9:
  viewer.pageIndex = 9;
});
viewer.open('Test.pdf');

Parameters

val

number

Returns

void

---

requiredSupportApiVersion

Get Signature

get requiredSupportApiVersion(): string

Gets the required SupportApi version that is compatible with the current version of the DsPdfViewer.

Returns

string

---

rightSidebar

Get Signature

get rightSidebar(): GcRightSidebar

Gets right sidebar object. Use this object if you want to manipulate the right sidebar.

Example

viewer.rightSidebar.show('expanded', 'reply-tool');
viewer.rightSidebar.toggle();
viewer.rightSidebar.hide();
viewer.rightSidebar.expand();
viewer.rightSidebar.collapse();

Returns

GcRightSidebar

---

rotation

Get Signature

get rotation(): number

Specifies the rotation in degrees.

Example

var viewer = new DsPdfViewer('#root');
// Register an onAfterOpen event handler:
viewer.onAfterOpen.register(function() {
  // Apply 90 degree clockwise rotation:
  viewer.rotation = 90;
});
// Open document:
viewer.open('Test.pdf');

Returns

number

Set Signature

set rotation(degrees): void

Specifies the rotation in degrees.

Example

var viewer = new DsPdfViewer('#root');
// Register an onAfterOpen event handler:
viewer.onAfterOpen.register(function() {
  // Apply 90 degree clockwise rotation:
  viewer.rotation = 90;
});
// Open document:
viewer.open('Test.pdf');

Parameters

degrees

number

Returns

void

---

scrollView

Get Signature

get scrollView(): HTMLElement

Gets the scroll view HTML element. Note, the left scroll position is calculated by the viewer automatically - so, usually, you don't need to change left scroll position.

Example

// Scroll to the top of the document:
viewer.scrollView.scrollTop = 0;

Returns

HTMLElement

---

searcher

Get Signature

get searcher(): GcPdfSearcher

Document search worker instance. Searches currently opened document for a text.

Examples

 // Highlight all search results without opening SearchPanel.
 const searchIterator = viewer.searcher.search({ Text: "test", MatchCase: true, HighlightAll: true });
 searchIterator.next();
 searcher.applyHighlight();

 // Iterate all search results
 const searcher = viewer.searcher;
 var searchResults = [];
 const searchIterator = searcher.search({ Text: textToSearch, MatchCase: true });
 var searchResult = await searchIterator.next();
 if (searchResult.value)
     searcher.highlight(searchResult.value)
 while (searchResult.value && !searchResult.done) {
     const searchResultValue = searchResult.value;
     searchResults.push(`index: ${searchResultValue.ItemIndex}, text: ${searchResultValue.DisplayText}, pageIndex: ${searchResultValue.PageIndex}`);
     searchResult = await searchIterator.next();
 }
 console.log("Search results: " + (searchResults.length ? searchResults.join("; ") : "No search results"));

// Open the document, find the text 'wildlife' and highlight the first result:
async function loadPdfViewer(selector) {
	 var viewer = new DsPdfViewer(selector, { restoreViewStateOnLoad: false });
	 viewer.addDefaultPanels();
	 var afterOpenPromise = new Promise((resolve)=>{ viewer.onAfterOpen.register(()=>{ resolve(); }); });
	 await viewer.open('wetlands.pdf');
	 await afterOpenPromise;
	 var findOptions = { Text: 'wildlife' };
	 var searchIterator = await viewer.searcher.search(findOptions);
	 var searchResult = await searchIterator.next();
  viewer.searcher.cancel();
  viewer.searcher.highlight(searchResult.value);
}
loadPdfViewer('#root');

// Open the document, find the text 'wildlife' and print search results to the console:

 async function loadPdfViewer(selector) {
     var viewer = new DsPdfViewer(selector);
  	viewer.addDefaultPanels();
  	await viewer.open('wetlands.pdf');
  	await (new Promise((resolve)=>{
  		viewer.onAfterOpen.register(()=>{
  			resolve();
  		});
  	}));
  	var findOptions = {
  		Text: 'wildlife',
  		MatchCase: true,
  		WholeWord: true,
  		StartsWith: false,
  		EndsWith: false,
  		Wildcards: false,
  		Proximity: false,
  		SearchBackward: false,
  		HighlightAll: true
  	};
  	var searcher = viewer.searcher;
  	var searchIterator = await searcher.search(findOptions);
  	var resultsCount = 0;
  	var searchResult;
  	do {
  		searchResult = await searchIterator.next();
  		if (searchResult.value) {
  			// this could be either result or progress message (ItemIndex < 0)
  			if(searchResult.value.ItemIndex >= 0) {
  				console.log('next search result:');
  				console.log(searchResult.value);
  				resultsCount++;
  			} else {
  				const pageCount = _doc.pageCount.totalPageCount || _doc.pageCount.renderedSoFar;
  				console.log('search progress, page index is ' + searchResult.value.PageIndex);
  			}
  		}
  		else {
  			console.log("Search completed");
  			break;
  		}
  	}
  	while(!searchResult.done);
  	console.log('Total results count is ' + resultsCount);
 }

Returns

GcPdfSearcher

---

secondToolbar

Get Signature

get secondToolbar(): SecondToolbar

Second toolbar API.

Returns

SecondToolbar

---

secondToolbarLayout

Get Signature

get secondToolbarLayout(): SecondToolbarLayout

Second toolbar layout. Use the secondToolbarLayout property to configure available tools.

Default

{
     *           "text-tools": ['edit-text', 'edit-free-text', 'edit-ink', '$split', 'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
     *           "draw-tools": ['edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
     *           "attachment-tools": ['edit-stamp', 'edit-file-attachment', 'edit-richmedia', 'edit-sign-tool', 'edit-sound', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
     *           "form-tools": ['edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio', 'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
     *           "page-tools": ['new-document', 'new-page', 'delete-page', '$split', 'edit-undo', 'edit-redo', '$split', 'pdf-organizer']
     *       }

Returns

SecondToolbarLayout

Set Signature

set secondToolbarLayout(layout): void

Second toolbar layout. Use the secondToolbarLayout property to configure available tools.

Default

{
     *           "text-tools": ['edit-text', 'edit-free-text', 'edit-ink', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
     *           "draw-tools": ['edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
     *           "attachment-tools": ['edit-stamp', 'edit-file-attachment', 'edit-richmedia', 'edit-sign-tool', 'edit-sound', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
     *           "form-tools": ['edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio', 'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
     *           "page-tools": ['new-document', 'new-page', 'delete-page', '$split', 'edit-undo', 'edit-redo', '$split', 'pdf-organizer']
     *       }

Parameters

layout

SecondToolbarLayout

Returns

void

---

signToolStorage

Get Signature

get signToolStorage(): SignToolStorage

Returns data storage which can be used to store and retrieve current signature tool settings and images. Please, note, the storage data depends on current user name, see currentUserName property

Returns

SignToolStorage

---

storage

Get Signature

get storage(): DataStorage

Data storage for the active document.

Examples

const fileData = viewer.storage.getItem(annotation.fileId);

viewer.storage.setItem(fileId, bytes);

Add Stamp annotation programatically using storage API

	viewer.newDocument().then(function() {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', 'http://localhost/sample.jpg', true);
	xhr.responseType = 'arraybuffer';
	xhr.onload = function(e) {
		var arrayBuffer = this.response;
		if (arrayBuffer) {
		    // Add Stamp annotation programatically:
			viewer.storage.setItem("sample_file_id_1", new Uint8Array(arrayBuffer));
			var pageSize = viewer.getPageSize(0);
			viewer.addAnnotation(0, {annotationType: 13, fileId: "sample_file_id_1", rect: [0, pageSize.height - 144, 144, pageSize.height]});
		}
	};
	xhr.send();
});

Returns

DataStorage

---

structureTree

Get Signature

get structureTree(): Promise<StructTreeNode[]>

Structure tree data.

Example

const viewer = new DsPdfViewer(selector);
await viewer.open("sample.pdf");
const structureTree = await viewer.structureTree;
if(structureTree) {
 console.log(structureTree);
}

Returns

Promise<StructTreeNode[]>

A promise that is resolved with a [] objects that represents the page's structure tree, or null when no structure tree is present for the page.

---

supportApi

Get Signature

get supportApi(): ISupportApi

Gets the SupportApi client. Requires SupportApi.

Example

 var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
 // Contact server and get Support API version.
 viewer.serverVersion.then(function(ver) {
     alert("The SupportApi version is " + ver);
 });

Returns

ISupportApi

---

supportApiVersion

Get Signature

get supportApiVersion(): string

Gets the connected version of the SupportApi, if available.

Returns

string

---

toolbarLayout

Get Signature

get toolbarLayout(): PdfToolbarLayout

Defines the layout of the toolbar for different viewer modes: viewer, annotationEditor, formEditor.

Description

The full list of the viewer specific toolbar items:

'open', '$navigation', '$split', 'text-selection', 'pan', 'zoom', '$fullscreen', '$split', 'text-tools', 'draw-tools', 'attachment-tools',
'form-tools', 'page-tools', '$split', 'rotate', 'search', 'page-display', 'theme-change', 'download', 'print', 'save-as', 'hide-annotations', 'form-filler',
'doc-title', 'doc-properties', 'about', 'share', 'single-page', 'continuous-view', 'page-display', '$history', '$mousemode', 'show-edit-tools', 'show-form-editor'

The full list of the annotationEditor specific toolbar items:

 'edit-select', 'save-as', 'share',  'edit-text', 'edit-free-text', 'edit-ink', 'edit-square',
 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'edit-file-attachment', 'edit-richmedia', 'edit-sound', 'edit-link', 'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out'.
 'edit-redact', 'edit-redact-apply', 'edit-erase',  'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'

The full list of the formEditor specific toolbar items:

 'edit-select-field', 'save-as', 'share',
 'edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio',
 'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset',
 'edit-erase-field', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'

Examples

// Customize the toolbar layout:
viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
viewer.toolbarLayout.annotationEditor.default = ["open", "save", "share", "$split", "new-document", "edit-ink", "edit-text"];
viewer.toolbarLayout.formEditor.default = ["open", "save", "share", "$split", "edit-widget-tx-field", "edit-widget-tx-password"];
viewer.applyToolbarLayout();

// Show only Open and Redact buttons:
var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' });
// Add annotation editor panel:
viewer.addAnnotationEditorPanel();
// Change toolbar layout:
viewer.toolbarLayout = { viewer: { default: ["open", 'show-edit-tools']},
              annotationEditor: { default: ["open", 'edit-redact', 'edit-redact-apply']} };
// Activate 'Annotation Editor' layout mode:
viewer.layoutMode = 1;

// Make square, circle and line buttons sticky:
viewer.toolbarLayout.stickyBehavior = ["edit-square", "edit-circle", "edit-line"];
viewer.applyToolbarLayout();

Returns

PdfToolbarLayout

Set Signature

set toolbarLayout(toolbarLayout): void

Defines the layout of the toolbar for different viewer modes: viewer, annotationEditor, formEditor.

Description

The full list of the viewer specific toolbar items:

'text-selection', 'pan', 'open', 'save-as', 'share', 'download', 'print', 'rotate', 'theme-change', 'doc-title', 'page-display', 'single-page', 'continuous-view',
'$navigation' '$refresh', '$history', '$mousemode', 'zoom', '$fullscreen', '$split', 'show-edit-tools', 'show-form-editor'

The full list of the annotationEditor specific toolbar items:

 'edit-select', 'save-as', 'share',  'edit-text', 'edit-free-text', 'edit-ink', 'edit-square',
 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'edit-file-attachment', 'edit-richmedia', 'edit-sound', 'edit-link', 'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out'.
 'edit-redact', 'edit-redact-apply', 'edit-erase',  'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'

The full list of the formEditor specific toolbar items:

 'edit-select-field', 'save-as', 'share',
 'edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio',
 'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset',
 'edit-erase-field', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'

Examples

// Customize the toolbar layout:
viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
viewer.toolbarLayout.annotationEditor.default = ["open", "save", "share", "$split", "new-document", "edit-ink", "edit-text"];
viewer.toolbarLayout.formEditor.default = ["open", "save", "share", "$split", "edit-widget-tx-field", "edit-widget-tx-password"];
viewer.applyToolbarLayout();

// Show only Open and Redact buttons:
var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' });
// Add annotation editor panel:
viewer.addAnnotationEditorPanel();
// Change toolbar layout:
viewer.toolbarLayout = { viewer: { default: ["open", 'show-edit-tools']},
              annotationEditor: { default: ["open", 'edit-redact', 'edit-redact-apply']} };
// Activate 'Annotation Editor' layout mode:
viewer.layoutMode = 1;

Parameters

toolbarLayout

PdfToolbarLayout

Returns

void

---

undoCount

Get Signature

get undoCount(): number

Gets the number of levels(commands) on the undo stack. Requires SupportApi.

Example

alert("Undo levels count is " + viewer.undoCount);

Returns

number

---

undoIndex

Get Signature

get undoIndex(): number

Gets the index of the current Undo level (command). This is the Undo command that will be executed on the next call to redoChanges(). Requires SupportApi.

Example

alert("The current Undo level index is " + viewer.undoIndex);

Returns

number

---

undoState

Get Signature

get undoState(): (0 | { changeName: UndoChangeName; data: any; selectedAnnotation: { annotation: AnnotationBase; pageIndex: number; }; })[]

The current state of the undo store. Note that this property is read-only, do not programmatically change the elements of the collection. Use the Undo API methods to change the viewer's editor state. Undo API properties: hasUndoChanges, hasRedoChanges, undoIndex, undoCount Undo API methods: undoChanges(), redoChanges()

Returns

(0 | { changeName: UndoChangeName; data: any; selectedAnnotation: { annotation: AnnotationBase; pageIndex: number; }; })[]

---

version

Get Signature

get version(): string

Returns the current version of the GcDocs PDF viewer.

Example

alert("The DsPdfViewer version is " + viewer.version);

Returns

string

---

viewerPreferences

Get Signature

get viewerPreferences(): Promise<ViewerPreferences>

Gets initial viewer preferences.

Returns

Promise<ViewerPreferences>

---

zoomMode

Get Signature

get zoomMode(): ZoomMode

Gets/sets the current zoom node. Accepted values are: 0 - Value, 1 - PageWidth, 2 - WholePage.

// Set zoom mode to 'WholePage'
viewer.zoomMode = 2;

Returns

ZoomMode

Set Signature

set zoomMode(val): void

Gets/sets the current zoom node. Accepted values are: 0 - Value, 1 - PageWidth, 2 - WholePage.

Example

// Set zoom mode to 'WholePage'
viewer.zoomMode = 2;

Parameters

val

ZoomMode

Returns

void

---

zoomValue

Get Signature

get zoomValue(): number

Gets/sets the current zoom percentage level.

Example

// Set zoom value to 150%
viewer.zoomValue = 150;

Returns

number

Set Signature

set zoomValue(val): void

Gets/sets the current zoom percentage level.

Example

// Set zoom value to 150%
viewer.zoomValue = 150;

Parameters

val

number

Returns

void

Methods

findControl()

static findControl(selector): GcPdfViewer

Gets the viewer instance using the host element or host element selector

Parameters

selector

string | HTMLElement

Returns

GcPdfViewer

Example

var viewer = DsPdfViewer.findControl("#root");

---

addAnnotation()

addAnnotation(pageIndex, annotation, args?): Promise<{ annotation: AnnotationBase; pageIndex: number; }>

Adds an annotation to a specified page.

• This method uses a lock to ensure that the annotation is added synchronously preventing concurrent modifications.
• Requires SupportApi.

Parameters

pageIndex

number

The index of the page to which the annotation should be added. Alternatively, an object with a property pageIndex specifying the page index. This supports the override: addAnnotation({ pageIndex: 1 }, annotation, args).

annotation

AnnotationBase

The annotation object to be added.

args?

Additional optional arguments, such as skipping page refresh.

skipPageRefresh?

boolean

Returns

Promise<{ annotation: AnnotationBase; pageIndex: number; }>

• A promise resolving to an object containing the page index and the added annotation.

Examples

// Add the Square annotation to the first page when you open the document:
viewer.onAfterOpen.register(function() {
   viewer.addAnnotation(0, {
       annotationType: 5, // AnnotationTypeCode.SQUARE
       subtype: "Square",
       borderStyle: { width: 5, style: 1 },
       color: [0, 0, 0],
       interiorColor: [255, 0, 0],
       rect: [0, 0, 200, 200]
    });
});

// Below is the sample how to copy field with name "field1" and put it to the second page programmatically:
// Find field widget with name field1:
var resultData = await viewer.findAnnotation("field1", {findField: 'fieldName'});
// Clone field:
var clonedField = viewer.cloneAnnotation(resultData[0].annotation);
// Change field name property:
clonedField.fieldName = "field1Copy";
// Add cloned field to the second page.
viewer.addAnnotation(1, clonedField);

// Add the FileAttachment annotation to the first page when you open the document:
viewer.onAfterOpen.register(function() {
   viewer.addAnnotation(0, {
       annotationType: 17, // AnnotationTypeCode.FILEATTACHMENT
       subtype: "FileAttachment",
       file: {
         filename: 'attachment.png',
         content: new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,45,0,0,0,32,8,6,0,0,0,134,132,241,68,0,0,0,4,103,65,77,65,0,0,177,143,11,252,97,5,0,0,7,56,73,68,65,84,88,9,205,88,11,112,92,85,25,254,255,115,179,129,148,36,155,190,147,187,91,228,49,64,25,99,181,105,169,117,176,149,34,99,113,80,65,165,162,118,168,15,44,3,42,99,55,125,8,29,59,221,90,29,132,38,187,43,56,162,22,5,161,206,240,24,64,40,130,15,156,138,226,3,147,14,118,74,219,41,157,102,138,238,166,155,180,105,246,238,210,144,108,238,158,223,239,44,189,233,110,186,217,172,54,64,239,204,206,61,143,255,241,157,255,156,255,251,207,93,166,183,243,185,185,211,55,125,246,69,239,177,136,166,176,150,92,86,185,201,190,244,238,30,10,47,113,79,199,45,159,142,114,41,221,192,93,125,65,62,203,183,92,136,174,99,226,185,144,57,171,80,14,227,57,22,249,155,102,218,46,110,238,177,195,107,38,191,94,56,95,73,123,194,64,207,220,146,156,81,229,171,217,196,164,110,130,99,31,145,116,144,208,14,210,178,155,20,245,137,102,75,20,53,50,211,249,36,124,53,49,205,133,115,87,72,111,29,146,236,247,142,134,166,31,174,4,176,145,153,16,208,118,52,213,194,108,61,13,144,141,48,248,184,43,58,150,108,245,255,179,28,8,187,189,111,150,178,170,215,65,231,102,44])
       },
       rect: [0, 0, 20, 20]
    });
});

---

addAnnotationEditorPanel()

addAnnotationEditorPanel(): PanelHandle

Add annotation editor panel. Requires SupportApi.

Returns

PanelHandle

Example

viewer.addAnnotationEditorPanel();

---

addArticlesPanel()

addArticlesPanel(): PanelHandle

Add articles panel.

Returns

PanelHandle

Example

viewer.addArticlesPanel();

---

addAttachmentsPanel()

addAttachmentsPanel(): PanelHandle

Add attachments panel.

Returns

PanelHandle

Example

viewer.addAttachmentsPanel();

---

addDefaultPanels()

addDefaultPanels(): PanelHandle[]

Add default set of sidebar panels with default order: 'Thumbnails', 'Search', 'Outline', 'Layers', 'StructureTree', 'Attachments'

Returns

PanelHandle[]

Example

viewer.addDefaultPanels();

---

addDocumentListPanel()

addDocumentListPanel(documentListUrl?): PanelHandle

Adds document list panel to the Viewer with available document array specified in documentslist.json file (URL specified by documentListUrl option), located in the root directory of your application. You can specify service at the end point for documentListUrl option. The service should return JSON string with available documents array, e.g.: ["pdf1.pdf", "pdf2.pdf"]

Parameters

documentListUrl?

Optional. Document list service URL or predefined list of document list items.

string | DocumentListItem[]

Returns

PanelHandle

Examples

Example content for the documentslist.json file:

["file1.pdf", "file2.pdf"].

var viewer = new DsPdfViewer("#root", { documentListUrl: "/documentslist.json" });
viewer.addDocumentListPanel();

var viewer = new DsPdfViewer("#root");
// Add document list panel and specify documentListUrl option:
viewer.addDocumentListPanel('/documentslist.json');

var viewer = new DsPdfViewer("#root");
// Add document list panel and specify documentListUrl option using DATA URI:
viewer.addDocumentListPanel('data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "Hello doc 2", "title": "title 2"}]');

---

addFormEditorPanel()

addFormEditorPanel(): PanelHandle

Add form editor panel. Requires SupportApi.

Returns

PanelHandle

Example

 var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
 viewer.addDefaultPanels();
 viewer.addFormEditorPanel();

---

addLayersPanel()

addLayersPanel(): PanelHandle

Add optional content layers panel.

Returns

PanelHandle

Example

viewer.addLayersPanel();

---

addOutlinePanel()

addOutlinePanel(): PanelHandle

Add outline panel.

Returns

PanelHandle

Example

viewer.addOutlinePanel();

---

addReplyTool()

addReplyTool(sidebarState?): void

Enable the Text Annotation Reply Tool. Note, in order to enable ability to edit/remove or add existing replies you need to configure SupportApi, otherwise the Reply Tool will be in read-only mode.

Parameters

sidebarState?

GcRightSidebarState

pass 'expanded' value if you wish the Reply tool to be expanded initially. Default value is collapsed.

Returns

void

Example

viewer.addReplyTool('expanded');

---

addSearchPanel()

addSearchPanel(): PanelHandle

Add Search panel.

Returns

PanelHandle

Example

viewer.addSearchPanel();

---

addSharedDocumentsPanel()

addSharedDocumentsPanel(): PanelHandle

Add a panel with a list of shared documents.

Returns

PanelHandle

Example

var viewer = new DsPdfViewer("#root");
viewer.addSharedDocumentsPanel();

---

addStamp()

addStamp(imageData, args): Promise<{ annotation: AnnotationBase; pageIndex: number; }>

Add stamp annotation.

Parameters

imageData

Uint8Array<ArrayBuffer>

Uint8Array, binary image data.

args

convertToContent?

boolean

fileId

string

fileName?

string

pageIndex

number

rect

number[]

rotate?

number

select?

boolean

subject?

string

Returns

Promise<{ annotation: AnnotationBase; pageIndex: number; }>

Example

// Add Graphical signature to the PDF using external image
function addStampFromUrl(imageUrl, viewer) {
 * fetch(imageUrl)
 .then(response => response.blob())
 .then(blob => blob.arrayBuffer())
 .then(arrayBuffer => {
       const fileId = new Date().getTime() + ".png";
       const fileName = fileId;
       const pageIndex = 0;
       const imageData = new Uint8Array(arrayBuffer);
       const rect = [0, 0, 200, 200];

       viewer.storage.setItem(fileId, imageData);
       viewer.addStamp(
                   imageData,
                   {
                       fileId,
                       fileName,
                       pageIndex,
                       rect,
                       select: false,
                       subject: "",
                       rotate: 0,
                       convertToContent: false
                   });
 });
}
// Usage:
addStampFromUrl("http://localhost/image.png", viewer);

---

addStickyNote()

addStickyNote(position): void

Add sticky note to the document. Requires SupportApi.

Parameters

position

GcSelectionPoint

page relative point. Origin is top/left. Note, pageIndex must be specified.

Returns

void

Example

viewer.addStickyNote(viewer.toViewPortPoint({x: 50, y: 50, pageIndex: 0}));

---

addThumbnailsPanel()

addThumbnailsPanel(): PanelHandle

Add Thumbnails panel

Returns

PanelHandle

Example

viewer.addThumbnailsPanel();

---

addViewAreaStyle()

addViewAreaStyle(cssText): string

Adds a css style to the view area.

Parameters

cssText

string

Returns

string

style element identifier.

Example

// Enable RTL text direction:
viewer.addViewAreaStyle(".gc-text-content, p, h1 { direction: rtl !important }");

---

applyOptions()

applyOptions(): void

Call this method in order to apply changed options.

Returns

void

Example

viewer.options.zoomByMouseWheel = { always: false, ctrlKey: true, metaKey: true };
viewer.applyOptions();

---

applyToolbarLayout()

applyToolbarLayout(): void

Call this method in order to apply changes in toolbarLayout.

Returns

void

Examples

viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
viewer.applyToolbarLayout();

   var viewer = new DsPdfViewer(document.querySelector("#viewer"));
   viewer.addDefaultPanels();
   var toolbar = viewer.toolbar;
   var toolbarLayout = viewer.toolbarLayout;
   toolbar.addItem({
       key: 'custom-add-stamp',
       icon: { type: "svg", content: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path style="fill: #205F78;" d="M20.25 12l-2.25 2.25 2.25 2.25-3.75 3.75-2.25-2.25-2.25 2.25-2.25-2.25-2.25 2.25-3.75-3.75 2.25-2.25-2.25-2.25 2.25-2.25-2.25-2.25 3.75-3.75 2.25 2.25 2.25-2.25 2.25 2.25 2.25-2.25 3.75 3.75-2.25 2.25 2.25 2.25z"></path></svg>' },
       title: 'Open your document to add a stamp',
       checked: false, enabled: false,
       action: function () {
         alert("Implement your action here.");
       },
       onUpdate: function (args) {
           var hasDoc = viewer.hasDocument && args.state.session.pageCount > 0;
           return {
               enabled: hasDoc,
               checked: false,
               title: hasDoc ? 'Add stamp' : 'Open your document to add a stamp'
           }
       }
   });
   toolbarLayout.viewer.default.splice(0, 0, "custom-add-stamp");
   viewer.applyToolbarLayout();

---

applyViewPortScale()

applyViewPortScale(rectOrCoords, pageIndex, srcOrigin?): IGcRect | [number, number, number, number]

Scales the provided rectangle or coordinate array based on the current viewport scale.

This method accepts either an IGcRect object or an array of coordinates [x1, y1, x2, y2]. It returns the scaled coordinates in the same format as the input.

Note: This method changes the origin of the coordinates from "BottomLeft" (PDF default) to "TopLeft" (canvas default). This transformation makes the coordinates ready for use in drawing on a canvas, for example, in custom highlight rendering.

Parameters

rectOrCoords

The rectangle object or array of coordinates to scale.

number[] | IGcRect | [number, number, number, number]

pageIndex

number

The index of the page for which the viewport scale should be applied.

srcOrigin?

The origin of the source coordinates. "BottomLeft" origin is the PDF default, "TopLeft" is the canvas default.

"TopLeft" | "BottomLeft"

Returns

IGcRect | [number, number, number, number]

• The scaled rectangle or coordinate array, with origin set to "TopLeft".

Examples

// Using an IGcRect object
const rect = { x: 100, y: 150, w: 200, h: 100 };
const scaledRect = viewer.applyViewPortScale(rect, 0);
console.log(scaledRect); // { x: scaledX, y: scaledY, w: scaledW, h: scaledH }

// Using an array of coordinates [x1, y1, x2, y2]
const coords = [100, 150, 300, 250];
const scaledCoords = viewer.applyViewPortScale(coords, 0);
console.log(scaledCoords); // [scaledX1, scaledY1, scaledX2, scaledY2]

---

changeBoundsOrigin()

changeBoundsOrigin(pageIndex, bounds, srcOrigin, destOrigin, normalize?): number[]

This method changes coordinate system origin for rectangle given by parameter bounds and returns converted rectangle value;

Parameters

pageIndex

number

Page index (Zero based).

bounds

number[]

bounds array: [x1, y1, x2, y2]

srcOrigin

Source coordinate system origin. Possible values are: 'TopLeft' or 'BottomLeft'.

"TopLeft" | "BottomLeft"

destOrigin

Destination coordinate system origin. Possible values are: 'TopLeft' or 'BottomLeft'.

"TopLeft" | "BottomLeft"

normalize?

boolean

Optional. Default is true. Normalize rectangle [x1, y1, x2, y2] so that (x1,y1) < (x2,y2).

Returns

number[]

Examples

var pageIndex = 0;
var topLeftBounds = [0, 0, 200, 40];
// Convert the topLeftBounds from TopLeft origin to BottomLeft origin
// taking into account the viewport from the first page and store
// the result in the bottomLeftBounds variable:
var bottomLeftBounds = viewer.changeBoundsOrigin(pageIndex, topLeftBounds, 'TopLeft', 'BottomLeft');

// Gets the bounds of the annotation relative to the viewport:
const pageIndex = 0;
const viewPort = viewer.getViewPort(pageIndex);
const annotationRect = (await viewer.findAnnotation('10R'))[0].annotation.rect;
const invertedRect = viewer.changeBoundsOrigin(pageIndex, annotationRect, 'BottomLeft', 'TopLeft');
const annotationX1 = invertedRect[0] * viewPort.scale;
const annotationY1 = invertedRect[1] * viewPort.scale;
const annotationX2 = invertedRect[2] * viewPort.scale;
const annotationY2 = invertedRect[3] * viewPort.scale;

---

changeOrigin()

changeOrigin(pageIndex, y, srcOrigin, destOrigin): number

This method changes coordinate system origin for y coordinate given by parameter y and returns converted value.

Parameters

pageIndex

number

y

number

srcOrigin

"TopLeft" | "BottomLeft"

destOrigin

"TopLeft" | "BottomLeft"

Returns

number

Example

var pageIndex = 0;
var y = 0;
// Convert from TopLeft origin to BottomLeft origin
// taking into account the viewport from the first page:
var yBottom = viewer.changeOrigin(pageIndex, y, 'TopLeft', 'BottomLeft');

---

changeOriginToBottom()

changeOriginToBottom(pageIndex, y): number

Converts the origin of the Y coordinate to the bottom.

Parameters

pageIndex

any

y

any

Returns

number

Example

var pageIndex = 0;
var y = 0;
// Convert y value from TopLeft origin to BottomLeft origin
// taking into account the viewport from the first page:
var yBottom = viewer.changeOriginToBottom(pageIndex, y);

---

changeOriginToTop()

changeOriginToTop(pageIndex, y): number

Converts the origin of the Y coordinate to the top.

Parameters

pageIndex

any

y

any

Returns

number

Example

var pageIndex = 0;
var y = 0;
// Convert y value from BottomLeft origin to TopLeft origin
// taking into account the viewport from the first page:
var yTop = viewer.changeOriginToTop(pageIndex, y);

---

clearHighlightedSegments()

clearHighlightedSegments(pageIndex, args?): void

Clears all highlights from one or more specific pages.

This method removes all custom highlights from the specified pages. You can pass either a single page index or an array of page indices.

Parameters

pageIndex

The index of the page or an array of page indices from which to clear highlights.

number | number[]

args?

HighlightBehaviorArgs

Optional behavior arguments, such as whether to skip repainting the text layer after clearing highlights.

Returns

void

Examples

// Clear highlights from page 2:
viewer.clearHighlightedSegments(2);

// Clear highlights from pages 1, 3, and 5:
viewer.clearHighlightedSegments([1, 3, 5]);

---

cloneAnnotation()

cloneAnnotation(annotation): AnnotationBase

Clone annotation or field given by parameter annotation. Requires SupportApi.

Parameters

annotation

AnnotationBase

Annotation to clone.

Returns

AnnotationBase

Example

// Below is the sample how to copy field with name "field1" and put it to the second page programmatically:
// Find field widget with name field1:
var resultData = await viewer.findAnnotation("field1", {findField: 'fieldName'});
// Clone field:
var clonedField = viewer.cloneAnnotation(resultData[0].annotation);
// Change field name property:
clonedField.fieldName = "field1Copy";
// Add cloned field to the second page.
viewer.addAnnotation(1, clonedField);

---

close()

close(): Promise<void>

Closes the currently open document.

Returns

Promise<void>

Example

await viewer.close();

---

closePanel()

closePanel(panelHandleOrId?): void

Closes the side panel.

Parameters

panelHandleOrId?

any

Optional. Panel handle or panel id to close.

Returns

void

Example

viewer.closePanel();

---

collectQuadPoints()

collectQuadPoints(paintedBoxes): TextPartsQuadPoints

Collects quadrilateral points based on the provided PaintedBoxInfo array.

Parameters

paintedBoxes

PaintedBoxInfo[]

An array of PaintedBoxInfo objects representing painted boxes on a PDF page.

Returns

TextPartsQuadPoints

• Information about selected or highlighted text fragments, including the page index, outer rectangle coordinates, and quadrilateral points.

Description

This method takes an array of PaintedBoxInfo objects, where each object contains information about a painted box on a PDF page. It calculates the outer rectangle coordinates and quadrilateral points for the selected or highlighted text fragments. The coordinates have their origin at the bottom-left corner as per PDF specifications.

The quadPoints array is sorted as follows: [{ x: minX, y: maxY }, { x: maxX, y: maxY }, { x: minX, y: minY }, { x: maxX, y: minY }]

---

confirm()

confirm(confirmationText?, level?, title?, buttons?): Promise<boolean | ConfirmButton>

Display confirmation dialog.

Parameters

confirmationText?

string | Element

level?

"info" | "warning" | "error"

title?

string

buttons?

ConfirmButton[]

Returns

Promise<boolean | ConfirmButton>

Example

const confirmResult = await viewer.confirm("Apply changes?", "info", "Confirm action", ["Yes", "No", "Cancel"]);
if (confirmResult === "Yes") {
  // put your code here
} else if (confirmResult === "No") {
  // put your code here
} else {
  // put your code here
}

---

convertPdfRectToWindowCoordinates()

convertPdfRectToWindowCoordinates(pageIndex, rect): number[]

Converts PDF rectangle or PDF point coordinates to absolute window coordinates.

Parameters

pageIndex

number

Index of the PDF page.

rect

Array of coordinates [x1, y1, x2, y2] or [x, y], where (x1, y1) represents the bottom-left corner, and (x2, y2) represents the top-right corner.

number[] | Rect

Returns

number[]

Array of window coordinates corresponding to the given PDF coordinates.

Throws

Error if the coordinates format is incorrect. Expected either [x, y] or [x1, y1, x2, y2].

---

dateToPdfString()

dateToPdfString(input): string

Convert a JavaScript Date object, string, Moment object, or timestamp to a PDF date string. The PDF date string format is described in section 7.9.4 of the official PDF 32000-1:2008 specification. The output includes optional time zone information.

Parameters

input

any

The date to convert, which can be a Date object, date string, Moment object, or timestamp.

Returns

string

• The formatted PDF date string, or null if the input is invalid.

Example

// Convert a Date object to a PDF date string
const date = new Date();
const pdfDateString = viewer.dateToPdfString(date);
console.log(pdfDateString); // Outputs: 'D:20240924045508Z'

// Convert a timestamp to a PDF date string
const timestamp = Date.now();
const pdfDateStringFromTimestamp = viewer.dateToPdfString(timestamp);
console.log(pdfDateStringFromTimestamp); // Outputs: 'D:20240924045508Z'

---

deletePage()

deletePage(pageIndex?): Promise<void>

Delete page. Requires SupportApi.

Parameters

pageIndex?

number

page index to delete.

Returns

Promise<void>

Example

// Delete page with index 3.
viewer.deletePage(3);

---

dispose()

dispose(): void

Use this method to close and release resources occupied by the DsPdfViewer.

Returns

void

---

download()

download(fileName?): void

Downloads the PDF document loaded in the Viewer to the local disk.

Parameters

fileName?

string

the destination file name.

Returns

void

Example

viewer.download();

---

execCopyAction()

execCopyAction(buffer?): Promise<boolean>

Execute Copy action (Ctrl + C shortcut). Requires SupportApi.

Parameters

buffer?

CopyBufferData

data to copy.

Returns

Promise<boolean>

Example

viewer.execCopyAction();

---

execCutAction()

execCutAction(buffer?): Promise<boolean>

Execute Cut action (Ctrl + X shortcut). Requires SupportApi.

Parameters

buffer?

CopyBufferData

data to cut.

Returns

Promise<boolean>

Example

viewer.execCutAction();

---

execDeleteAction()

execDeleteAction(buffer?): Promise<boolean>

Execute Delete action (DEL shortcut). Requires SupportApi.

Parameters

buffer?

CopyBufferData

data to delete.

Returns

Promise<boolean>

Example

viewer.execDeleteAction();

---

execPasteAction()

execPasteAction(point?): Promise<boolean>

Execute Paste action (Ctrl + V shortcut). Requires SupportApi.

Parameters

point?

GcSelectionPoint

insert position.

Returns

Promise<boolean>

Example

if(viewer.hasCopyData) {
  viewer.execPasteAction({x: 10, y: 10, pageIndex: 0});
}

---

findAnnotations()

findAnnotations(findString, findParams?): Promise<object[]>

Find annotation(s) within opened document. Returns promise which will be resolved with search results.

Parameters

findString

Find query.

string | number

findParams?

Find parameters. By default annotation will be searched by id without page index constraint.

findAll?

boolean

findField?

string

pageIndexConstraint?

number

Returns

Promise<object[]>

Examples

// Find annotation with id '2R':
viewer.findAnnotations("2R").then(function(dataArray) {
  if(dataArray[0])
    alert(`Annotation ${dataArray[0].annotation.id} found on page with index ${dataArray[0].pageIndex}.`);
  else
    alert('Annotation not found.');
});

// find all fields with name field1:
viewer.findAnnotations("field1", {findField: 'fieldName', findAll: true}).then(function(dataArray) {

});

---

getDocumentInformation()

getDocumentInformation(): Promise<DocumentInformation>

Gets meta data information for the current document.

Returns

Promise<DocumentInformation>

Example

const docMetaInfo = await viewer.getDocumentInformation();

---

getDocumentSecurity()

getDocumentSecurity(): Promise<DocumentSecuritySummary>

Gets security information for the current document.

Returns

Promise<DocumentSecuritySummary>

Example

const docSecurityInfo = await viewer.getDocumentSecurity();

---

getEvent()

getEvent(eventName): EventFan<any>

Get event object.

Parameters

eventName

EventName

Returns

EventFan<any>

Example

viewer.getEvent("BeforeAddAnnotation").register(function(args) {
  console.log(args);
});
viewer.getEvent("AfterAddAnnotation").register(function(args) {
    console.log(args);
});

---

getPageLocation()

getPageLocation(pageIndex): object

Returns position of the page view relative to the browser window.

Parameters

pageIndex

number

Returns

object

x

x: number

y

y: number

Examples

var pageLocation = viewer.getPageLocation(0);
console.log('The first page location is ' + location.x + ', ' + location.y);

// Draws a red rectangle over the annotation with id "10R".
(async function(viewer, annotationId) {
  const pageLocation = viewer.getPageLocation(0), viewPort = viewer.getViewPort(0),
    scale = viewPort.scale, viewBox = viewPort.viewBox;
  const rect = (await viewer.findAnnotation(annotationId))[0].annotation.rect;
  const x1 = rect[0] * scale + pageLocation.x, x2 = rect[2] * scale + pageLocation.x,
    y1 = (viewBox[3] - rect[3]) * scale + pageLocation.y, y2 = (viewBox[3] - rect[1]) * scale + pageLocation.y;
  const div = document.createElement('div');
  div.style.position = 'absolute';
  div.style.left = `${x1}px`; div.style.top = `${y1}px`;
  div.style.width = `${x2 - x1}px`; div.style.height = `${y2 - y1}px`;
  div.style.border = '1px solid red';
  document.body.appendChild(div);
})(viewer, "10R");

// Add text annotation on mouse click
document.addEventListener("click", (e) => {
  const target = (e["path"] || (e["composedPath"] && e["composedPath"]()) || [])[0] || e.target, page = target.closest(".page");
  if(target.closest(".gc-annotation"))
    return;
  if(page) {
    const pageIndex = page.getAttribute("data-index") * 1, pageLoc = viewer.getPageLocation(pageIndex), scale = viewer.getViewPort(pageIndex).scale;
    const x = (e.clientX - pageLoc.x) / scale, y = (e.clientY - pageLoc.y) / scale;
    const rect = viewer.changeBoundsOrigin(pageIndex, [x, y, x + 20, y + 20], "TopLeft", "BottomLeft");
    viewer.addAnnotation(pageIndex, { annotationType: 1 , contents: "Text annotation content", rect });
  }
});

---

getPageRotation()

getPageRotation(pageIndex, includeViewRotation?): number

Get the page rotation value.

Parameters

pageIndex

number

includeViewRotation?

boolean

Include view rotation, default is true.

Returns

number

Example

// Get the first page rotation value:
var rotation = viewer.getPageRotation(0);

---

getPageSize()

getPageSize(pageIndex, includeScale?): object

Returns the page size. By default, return size without scale, pass true for the includeScale argument if you want to get the scaled value.

Parameters

pageIndex

number

Page index (Zero based).

includeScale?

boolean

Optional. If true, the method will return scaled value.

Returns

object

height

height: number

width

width: number

Example

// Get first page size:
var pageSize = viewer.getPageSize(0);

---

getPageTabs()

getPageTabs(pageIndex): "S" | "R" | "C" | "A" | "W"

Get page annotations tabs order. A name specifying the tab order that shall be used for annotations on the page. Possible values are: R - Row order. C - Column order. S - Structure order (not supported by DsPdfViewer). A - Annotations order. This order refers to the order of annotation in the annotations collection. W - Widgets order . This order uses the same ordering as "Annotations" order, but two passes are made, the first only picking the widget annotations and the second picking all other annotations.

Parameters

pageIndex

number

Returns

"S" | "R" | "C" | "A" | "W"

---

getSelectedText()

getSelectedText(): string

Returns the contents of the text selection.

Returns

string

Example

alert("Text selected by the user: " + viewer.getSelectedText());

---

getSharedDocuments()

getSharedDocuments(): Promise<SharedDocumentInfo[]>

Returns a list of shared documents available to the current user.

Returns

Promise<SharedDocumentInfo[]>

Example

var sharedDocuments = await viewer.getSharedDocuments();

---

getSignatureInfo()

getSignatureInfo(): Promise<SignatureInformation>

Get information about signature used in document.

Returns

Promise<SignatureInformation>

Example

// Example: check if the current document is signed and show information about signature:
var viewer = DsPdfViewer.findControl("#root");
const signatureInfo = await viewer.getSignatureInfo();
if(signatureInfo.signed) {
  const signatureValue = signatureInfo.signedByFields[0].signatureValue;
  const signerName = signatureValue.name;
  const location = signatureValue.location;
  const signDate = viewer.pdfStringToDate(signatureValue.modificationDate);
  alert("The document was signed using digital signature. Signed by: " + signerName + ", location: " + location + ", sign date: " + signDate.toString());
} else {
  alert("The document is not signed.");
}

---

getViewPort()

getViewPort(pageIndex): PageViewport

Returns PDF page view port information.

Parameters

pageIndex

number

Page index (Zero based).

Returns

PageViewport

Object containing following fields: { viewBox: // Original page bounds: [x1, y1, x2, y2]. // If you want to know original page's width/height, you can get it using viewBox values: // var pageWidth = viewBox[2] - viewBox[0]; // var pageHeight = viewBox[3] - viewBox[1]; width: // Current width of the page in user space (scale and rotation values are applied), height: // Current height of the page in user space (scale and rotation values are applied) scale: // Active scale value rotation: // Active rotation value }

Example

// Get the viewport object for the first page:
var viewPort = viewer.getViewPort(0);

---

goBack()

goBack(): void

Move back in the document history.

Returns

void

---

goForward()

goForward(): void

Move forward in the document history.

Returns

void

---

goToFirstPage()

goToFirstPage(): void

Go to the first page.

Returns

void

Example

viewer.goToFirstPage();

---

goToLastPage()

goToLastPage(): void

Go to the last page.

Returns

void

Example

viewer.goToLastPage();

---

goToNextPage()

goToNextPage(): void

Go to the next page.

Returns

void

Example

viewer.goToNextPage();

---

goToPage()

goToPage(pageIndex): void

Go to the page with the specific page index.

Parameters

pageIndex

number

Returns

void

Since

2.3.1

Example

// Go to the first page:
viewer.goToPage(0);

---

goToPageNumber()

goToPageNumber(pageNumber): void

Go to the page with the specific page number (numbering starts at 1).

Parameters

pageNumber

number

Returns

void

Deprecated

Method goToPageNumber deprecated since version 2.3.1, use goToPage method or pageIndex property instead.

Example

// Go to the second page:
viewer.goToPageNumber(2);

---

goToPrevPage()

goToPrevPage(): void

Go to the previous page.

Returns

void

Example

viewer.goToPrevPage();

---

hideSecondToolbar()

hideSecondToolbar(): void

Hide second toolbar.

Returns

void

Example

viewer.hideSecondToolbar();

---

highlightTextSegment()

highlightTextSegment(pageIndex, startCharIndex, endCharIndex, args?): Promise<boolean>

Highlights a portion of text on a specified page.

This method creates a highlight for a segment of text on a page, with customizable properties. Optionally, it can clear previous highlights before adding the new one and skip the immediate repainting of the text layer.

Parameters

pageIndex

number

The index of the page where the text segment is located (0-based).

startCharIndex

number

The starting character index (0-based) of the text segment to highlight.

endCharIndex

number

The ending character index (0-based) of the text segment to highlight.

args?

HighlightArgs

Optional parameters to customize the appearance and behavior of the highlight.

Returns

Promise<boolean>

A promise that resolves once the highlight has been added and optionally the text layer has been repainted.

Examples

// Add a highlight for a text segment from index 10 to 20 on page 0, with custom color and border, and clear existing highlights:
await viewer.highlightTextSegment(0, 10, 20, { color: 'rgba(255, 255, 0, 0.5)', borderColor: 'rgba(255, 0, 0, 0.75)', borderWidth: 3, clearPrevious: true });

// Add a highlight and skip the immediate repaint of the text layer:
await viewer.highlightTextSegment(0, 10, 20, { color: '#00FF00', skipPaint: true });
// Repaint the text layer manually:
viewer.repaintTextLayer(0);

---

invalidate()

invalidate(): void

Ensures that all visual child elements of the viewer are properly updated for layout. Call this method to update the size of the inner content when the viewer is dynamically resized.

Returns

void

Example

viewer.eventBus.on("viewersizechanged", function() {
  // Make viewer height equal to content height of inner pages, including the margins:
  document.querySelector("#root").style.height = viewer.pageCount * 50 + viewer.pageCount * viewer.getPageSize(0, true).height + "px";
  // Invalidate layout:
  viewer.invalidate();
});

---

isFontUrlRegistered()

isFontUrlRegistered(url): boolean

Checks if a font with the given URL is registered.

Parameters

url

any

The URL of the font to check.

Returns

boolean

• Returns true if a font with the given URL is registered, false otherwise.

---

loadAndScrollPageIntoView()

loadAndScrollPageIntoView(pageIndex, destArray?, scrollIntoViewOptions?): Promise<boolean>

The method loads the page at the index specified by the pageIndex parameter, and scrolls the page into the view.

Parameters

pageIndex

number

Destination page index.

destArray?

any[]

Array with destination information. destArray[0] // not used, can be null, pdf page reference (for internal use only). destArray[1] // contains destination view fit type name: { name: 'XYZ' } - Destination specified as top-left corner point and a zoom factor (the lower-left corner of the page is the origin of the coordinate system (0, 0)). { name: 'Fit' } - Fits the page into the window { name: 'FitH' } - Fits the widths of the page into the window { name: 'FitV' } - Fits the height of the page into a window. { name: 'FitR' } - Fits the rectangle specified by its top-left and bottom-right corner points into the window. { name: 'FitB' } - Fits the rectangle containing all visible elements on the page into the window. { name: 'FitBH' } - Fits the width of the bounding box into the window. { name: 'FitBV' } - Fits the height of the bounding box into the window. destArray[2] // x position offset destArray[3] // y position offset (note, the lower-left corner of the page is the origin of the coordinate system (0, 0)) destArray[4] // can be null, contains bounding box width when view name is FitR, contains scale when view name is XYZ, destArray[5] // can be null, contains bounding box height when view name is FitR

scrollIntoViewOptions?

Optional scroll options. Used when the destArray parameter is not specified. If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value. If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"}.

boolean | ScrollPageIntoViewOptions

Returns

Promise<boolean>

Returns the boolean promise that resolves when the page is fully loaded (including text and annotation layers) and scrolled. A promise is resolved with false value when the page does not exist or an error occurs, otherwise the promise is resolved with true value.

Example

// Load and display the first page:
viewer.loadAndScrollPageIntoView(0);

---

loadDocumentList()

loadDocumentList(documentListUrl?): void

Load an updated document list into document list panel.

Parameters

documentListUrl?

Optional. Document list service URL or array with the document list items.

string | DocumentListItem[]

Returns

void

Examples

viewer.loadDocumentList();

// Load document list using DATA URI:
viewer.loadDocumentList('data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "doc 2", "title": "title 2"}]');

---

loadSharedDocuments()

loadSharedDocuments(): void

Loads the updated list of shared documents into the shared documents panel.

Returns

void

Example

viewer.loadSharedDocuments();

---

lockAnnotation()

lockAnnotation(id): Promise<AnnotationBase>

Lock annotation for editing.

Parameters

id

annotation id

string | AnnotationBase

Returns

Promise<AnnotationBase>

---

markAnnotationLayerDirty()

markAnnotationLayerDirty(pageIndex): any

Marks the annotation layer as dirty for specific page index or indices. This method triggers the need for re-rendering the annotation layer in the page view due to changes in annotation data for the specified page index or indices.

Parameters

pageIndex

The index or indices of the page(s) for which the annotation layer is marked as dirty.

number | number[]

Returns

any

Example

// Example: Mark annotation layers for the first and third pages as dirty:
viewer.markAnnotationLayerDirty([0, 2]);

---

newDocument()

newDocument(params?): Promise<any>

Creates and opens a new blank document. Requires SupportApi.

Parameters

params?

Parameters object: fileName - name of the file for a new document, confirm - show confirmation dialog if there are changes in the document.

string | { confirm: boolean; fileName: string; }

Returns

Promise<any>

Example

// Create a new blank document, name the file "test.pdf",
// display a confirmation dialog if the active document has been modified.
viewer.newDocument({ fileName: "test.pdf", confirm: true});

---

newPage()

newPage(params?): Promise<void>

Adds a blank page to the document. Requires SupportApi.

Parameters

params?

parameters object: width - page width in points, height - page height in points, pageIndex - target page index.

height?

number

pageIndex?

number

width?

number

Returns

Promise<void>

Example

// Create a new blank page and insert it in the second position.
viewer.newPage({pageIndex: 1});

---

open()

open(file?, openParameters?): Promise<LoadResult>

Opens a document for viewing.

This method allows loading a PDF document or its binary data for rendering and interaction. The document can be provided as a URL string, a Uint8Array, or an array of bytes. Additionally, you can specify loading parameters such as headers or authentication details.

Parameters

file?

any

The source of the document to open. This can be:

• A URL string or a URL object pointing to the PDF document.
• Binary data of the document as a Uint8Array or an array of bytes.

openParameters?

OpenParameters

An optional object specifying parameters for loading the document. For example:

• headers: An object containing HTTP headers for requests (e.g., authentication, custom headers).
• password: A password for encrypted PDF files.
• Other custom loading options.

Returns

Promise<LoadResult>

A promise resolving to the result of loading the document.

Examples

// Open a PDF document from a URL
viewer.open("Documents/HelloWorld.pdf");

// Open a PDF document from binary data (Uint8Array)
const binaryData = new Uint8Array([37, 80, 68, 70, 45, ...]); // PDF file bytes
viewer.open(binaryData);

// Open a PDF document from a URL with authentication headers
viewer.open("http://localhost:5005/api/pdf-viewer/GetPdf?file=HelloWorld.pdf", {
  headers: {
     "Authorization": "Basic " + btoa(unescape(encodeURIComponent("USERNAME:PASSWORD"))),
     "CustomHeader": "Custom header value"
  }
});

// Open a PDF document from an array of bytes
const byteArray = [37, 80, 68, 70, 45, ...]; // Array representation of PDF bytes
viewer.open(byteArray);

---

openLocalFile()

openLocalFile(): any

Show the file open dialog where the user can select the PDF file.

Returns

any

Example

viewer.openLocalFile();

---

openPanel()

openPanel(panelHandleOrId): void

Opens the side panel.

Parameters

panelHandleOrId

any

Panel handle or panel id to open.

Returns

void

Example

const layersPanelHandle = viewer.addLayersPanel();
viewer.open("house-plan.pdf").then(()=> {
  viewer.openPanel(layersPanelHandle);
});

---

openSharedDocument()

openSharedDocument(sharedDocumentId): Promise<OpenDocumentInfo>

Open shared document by it's id.

Parameters

sharedDocumentId

string

unique shared document identifier.

Returns

Promise<OpenDocumentInfo>

Examples

Open shared document using document index:

async function openSharedDocByIndex(viewer, sharedDocIndex) {
  const sharedDocuments = await viewer.getSharedDocuments();
  viewer.openSharedDocument(sharedDocuments[sharedDocIndex].documentId);
}
// Open first shared document:
openSharedDocByIndex(DsPdfViewer.findControl("#viewer"), 0);

Open shared document using document’s file name. Note, a document with the same name can be shared multiple times. In the example below, we open the first found document with the given fileName.

async function openSharedDocByName(viewer, fileName) {
  const sharedDocuments = await viewer.getSharedDocuments();
  const index = sharedDocuments.findIndex(d=>d.fileName === fileName);
  if(index !== -1)
    viewer.openSharedDocument(sharedDocuments[index].documentId);
}
// Open the first available shared document named "financial-report.pdf":
openSharedDocByName(DsPdfViewer.findControl("#viewer"), "financial-report.pdf");

---

openSharedDocumentByIndex()

openSharedDocumentByIndex(sharedDocIndex): Promise<OpenDocumentInfo>

Open shared document using document index.

Parameters

sharedDocIndex

number

Returns

Promise<OpenDocumentInfo>

Example

Open second shared document:

viewer.openSharedDocumentByIndex(1);

---

openSharedDocumentByName()

openSharedDocumentByName(fileName): Promise<OpenDocumentInfo>

Open shared document using document’s file name. Note, a document with the same name can be shared multiple times. The openSharedDocumentByName opens the first found document with the given fileName.

Parameters

fileName

string

Returns

Promise<OpenDocumentInfo>

Example

// Open the first available shared document named "sample.pdf":
viewer.openSharedDocumentByName("sample.pdf");

---

pdfStringToDate()

pdfStringToDate(input?): Date

Convert a PDF date string to a JavaScript Date object. The PDF date string format is described in section 7.9.4 of the official PDF 32000-1:2008 specification. The function handles optional apostrophes and time zone offsets.

Parameters

input?

The PDF date string to convert.

string | Date

Returns

Date

• The corresponding JavaScript Date object, or null if the input is invalid.

Example

const pdfDateString = 'D:20230919123045Z'; // A PDF date string in UTC
const date = viewer.pdfStringToDate(pdfDateString);
console.log(date); // Outputs: Tue Sep 19 2023 12:30:45 GMT+0000 (Coordinated Universal Time)

---

print()

print(): void

Opens the browser's print document dialog box.

Returns

void

Example

viewer.print();

---

redoChanges()

redoChanges(): void

Redo document changes. Requires SupportApi.

Returns

void

Example

if(viewer.hasRedoChanges) {
  viewer.redoChanges();
}

---

redrawTouchedAnnotations()

redrawTouchedAnnotations(): Promise<void>

Redraws all annotations marked as "touched" by the editor. This method iterates over all elements with the class touched-by-editor, retrieves their associated annotation data, and redraws them on their respective pages. If an error occurs during the process, it is logged to the console.

Returns

Promise<void>

A promise that resolves when all touched annotations have been processed.

Async

Throws

If an error occurs while fetching or redrawing an annotation, it is caught and logged.

---

registerFallbackFont()

registerFallbackFont(fontNameOrUrl, url?, args?): void

Registers a fallback font with the given font name and URL. The fallback font will not be added to the UI for selection. Use this method to register a font that SupportApi will utilize when searching for fallback fonts. This method supports font collections in "ttc" format. The complete list of supported font formats includes "ttf", "otf", "woff", and "ttc".

Parameters

fontNameOrUrl

string

The name of the fallback font to register or the URL of the font file.

url?

string

The URL of the fallback font file.

args?

Optional parameters for font registration.

FontFormat |

{ clientOnly: boolean; displayName: string; format: FontFormat; }

Optional parameters for font registration.

clientOnly?

boolean

If true, the font data will not be sent to the SupportApi server. This is useful if the font is already registered on the server.

displayName?

string

A user-friendly name for the font.

format?

FontFormat

The format of the font file ("truetype", "opentype", "woff", or "woff2"). If not provided, the function will attempt to determine the format from the URL.

Returns

void

Examples

// Registering a fallback font URL
viewer.registerFallbackFont('https://example.com/fonts/fallbackfont.woff');

// Registering a fallback font with name and URL
viewer.registerFallbackFont('SampleFont1', 'https://example.com/fonts/SampleFont1.woff');

// Registering a fallback font with name, URL, and format
viewer.registerFallbackFont('SampleFont2', 'https://example.com/fonts/SampleFont2.ttf', { format: 'truetype' });

Throws

Throws an error if the provided fallback font URL is already registered.

---

registerFont()

registerFont(fontNameOrUrl, url?, args?): void

Registers a new @font-face style with the given font name and URL. The registered font will appear in the list of available fonts in the UI property grid unless the addToUI parameter is set to false. When the document is saved, the registered font will be uploaded to the SupportApi service unless the clientOnly parameter is set to true. If the serverOnly parameter is set to true, the font will not be registered on the client but will be sent to the SupportApi server. Supported font formats include "ttf", "otf", and "woff". Please note that "woff2" is not supported by the Wasm version of the SupportApi.

Parameters

fontNameOrUrl

string

The name of the font to register or the URL of the font file.

url?

string

The URL of the font file.

args?

Optional parameters for font registration.

FontFormat |

{ addToUI: boolean; clientOnly: boolean; displayName: string; format: FontFormat; serverOnly: boolean; }

Optional parameters for font registration.

addToUI?

boolean

If true, the font will be added to the UI for selection. Default is true.

clientOnly?

boolean

If true, the font data will not be sent to the SupportApi server. This is useful if the font is already registered on the server.

displayName?

string

A user-friendly name for the font to be displayed in the UI.

format?

FontFormat

The format of the font file ("truetype", "opentype", "woff", or "woff2"). If not provided, the function will attempt to determine the format from the URL.

serverOnly?

boolean

If true, the font will not be registered on the client but will be sent to the SupportApi server.

Returns

void

Examples

// Registering a font with name and URL
viewer.registerFont('SampleFont3', 'https://example.com/fonts/SampleFont3.woff');

// Registering a font with name, URL, and format
viewer.registerFont('SampleFont4', 'https://example.com/fonts/SampleFont4.ttf', 'ttf');

// Registering a font without adding it to the UI for selection
viewer.registerFont('SampleFont5', 'https://example.com/fonts/SampleFont5.ttf', { format: 'ttf', addToUI: false });

// Registering a client-only font without sending it to the SupportApi server
viewer.registerFont('SampleFont6', 'https://example.com/fonts/SampleFont6.ttf', { format: 'ttf', clientOnly: true });

// Registering a server-only font without registering it on the client
viewer.registerFont('SampleFont7', 'https://example.com/fonts/SampleFont7.ttf', { format: 'ttf', serverOnly: true });

Throws

Throws an error if the provided font name is already registered.

---

removeAnnotation()

removeAnnotation(pageIndex, annotationId, args?): Promise<boolean>

Remove annotation from document. Requires SupportApi.

Parameters

pageIndex

number

annotationId

string

args?

skipPageRefresh?

boolean

Returns

Promise<boolean>

Example

// Remove annotation with id '2R' located on the first page:
viewer.removeAnnotation(0, '2R');

---

removeViewAreaStyle()

removeViewAreaStyle(id): boolean

Removes a css style from the view area by its id.

Parameters

id

string

style element identifier.

Returns

boolean

Example

const id = viewer.addViewAreaStyle(".gc-text-content { font-size: 20px !important; }");
viewer.removeViewAreaStyle(id);

---

repaint()

repaint(indicesToRepaint?, options?): void

Repaints pages and redraws their annotations.

This method ensures that content and annotations are redrawn for the specified pages. If no indices are specified, the visible pages will be repainted by default. Optionally, you can ensure that invisible pages are repainted when they become visible.

Parameters

indicesToRepaint?

number[]

(Optional) An array of page indices to repaint. If omitted, the method repaints visible pages.

options?

(Optional) Additional options for repaint behavior.

repaintOnVisible?

boolean

If true, ensures that invisible pages will be repainted when they become visible. Defaults to true.

Returns

void

Throws

Will throw an error if indicesToRepaint is not an array of numbers.

Examples

// Redraw content and annotations for visible pages:
viewer.repaint();

// Redraw content and annotations for specific pages (0 and 3):
viewer.repaint([0, 3]);

// Ensure that invisible pages will be repainted as soon as they become visible:
viewer.repaint([1, 2], { repaintOnVisible: true });

---

repaintTextLayer()

repaintTextLayer(indicesToRepaint?): void

Repaints the text layer for the visible pages if the text layer is available. This primarily involves repainting text selection and highlighting elements.

Parameters

indicesToRepaint?

number[]

If specified, an array of page indices for which the text layer should be repainted. If not specified, the method repaints the text layer for all visible pages.

Returns

void

Remarks

This method is useful when the text layer needs to be updated after changes to page content or visibility. It is particularly beneficial for improving performance when you want to repaint only text selection and highlighting elements without redrawing the entire PDF page and annotations.

Examples

// Repaint the text layer for all visible pages:
viewer.repaintTextLayer();

// Repaint the text layer for pages with indices 0 and 3:
viewer.repaintTextLayer([0, 3]);

---

resetForm()

resetForm(): void

Reset form values.

Returns

void

---

resolvePageIndex()

resolvePageIndex(pageRef): Promise<number>

Resolve page index using PDF page reference.

Parameters

pageRef

any

Returns

Promise<number>

Example

const openAction = (await viewer.viewerPreferences).openAction;
if(openAction && openAction.dest) {
  const pageRef = openAction.dest[0];
  const targetPageIndex = await viewer.resolvePageIndex(pageRef);
}

---

resolveRegisteredFonts()

resolveRegisteredFonts(): Promise<string[]>

Resolves registered fonts by downloading their data and storing it.

This method iterates over the registered fonts, downloads the font data if it hasn't been resolved yet, and stores the data in the local storage. It returns a list of keys for the resolved font data.

Returns

Promise<string[]>

• A promise that resolves to an array of keys for the resolved font data.

---

save()

save(fileName?, settings?): Promise<boolean>

Save the modified PDF document to the local disk. Requires SupportApi.

Parameters

fileName?

string

Destination file name.

settings?

SaveSettings

Additional save settings.

Returns

Promise<boolean>

Example

Specify destination file name

viewer.save('Test.pdf');

---

saveAsImages()

saveAsImages(fileName?, settings?): Promise<boolean>

Saves the pages of the current PDF document as PNG images, zips the result images, and downloads the result zip archive. Requires SupportApi.

Parameters

fileName?

string

optional, destination zip archive file name.

settings?

SaveSettings

Additional save settings.

Returns

Promise<boolean>

Examples

// Save the pages of the current PDF document as PNG images and specify destination zip file name:
viewer.saveAsImages('Test.zip');

// Save the pages of the current PDF document as PNG images,
// and specify destination view zoom factor:
viewer.saveAsImages("sample.pdf", { zoomFactor: 1.5 });

---

saveChanges()

saveChanges(): Promise<boolean>

Upload local changes to server. Requires SupportApi.

Returns

Promise<boolean>

Example

viewer.saveChanges().then(function(result) {
  if(result) {
    alert("The document saved on the server.");
  } else {
    alert("Cannot save the document on the server.");
  }
});

---

scrollAnnotationIntoView()

scrollAnnotationIntoView(pageIndexOrId, annotationOrScrollOptions?, scrollOptions?): Promise<void>

Scroll annotation into view.

Parameters

pageIndexOrId

string | number

annotationOrScrollOptions?

string | AnnotationBase | ScrollPageIntoViewOptions

scrollOptions?

ScrollPageIntoViewOptions | ScrollBehavior

Returns

Promise<void>

Examples

// Scroll the annotation located on the second page into view.
viewer.scrollAnnotationIntoView(1, annotation);

// Scroll annotation into view by id.
viewer.scrollAnnotationIntoView("2R");

// Scroll annotation into view by id using smooth scroll behavior.
viewer.scrollAnnotationIntoView("2R", { behavior: "smooth" });

---

scrollPageIntoView()

scrollPageIntoView(params): void

Scroll page into view.

Parameters

params

object. Scroll parameters: pageNumber - number. Page number. destArray - Array with destination information: destArray[0] // not used, can be null, pdf page reference (for internal use only). destArray[1] // contains destination view fit type name: { name: 'XYZ' } - Destination specified as top-left corner point and a zoom factor (the lower-left corner of the page is the origin of the coordinate system (0, 0)). { name: 'Fit' } - Fits the page into the window { name: 'FitH' } - Fits the widths of the page into the window { name: 'FitV' } - Fits the height of the page into a window. { name: 'FitR' } - Fits the rectangle specified by its top-left and bottom-right corner points into the window. { name: 'FitB' } - Fits the rectangle containing all visible elements on the page into the window. { name: 'FitBH' } - Fits the width of the bounding box into the window. { name: 'FitBV' } - Fits the height of the bounding box into the window.

• destArray[2] // x position offset
• destArray[3] // y position offset (note, the lower-left corner of the page is the origin of the coordinate system (0, 0))
• destArray[4] // can be null, contains bounding box width when view name is FitR,

•                                    contains scale when view name is XYZ,
  

• destArray[5] // can be null, contains bounding box height when view name is FitR

allowNegativeOffset?

boolean

destArray?

any[]

pageNumber

number

Returns

void

Deprecated

Method scrollPageIntoView deprecated since v2.3.1 use methods goToPage, scrollAnnotationIntoView instead.

Examples

• // Scroll to page 10.

• viewer.scrollPageIntoView( { pageNumber: 10 } )

• // Scroll the annotation bounds rectangle into view:

• var rectangle = annotation.rect;

• var pagePosX = rectangle[0];

• var pagePosY = rectangle[1] + Math.abs(rectangle[3] - rectangle[1]);

• viewer.scrollPageIntoView({ pageNumber: pageIndex + 1, destArray: [null, { name: "XYZ" }, pagePosX, pagePosY, viewer.zoomValue / 100.0] });

---

selectAnnotation()

selectAnnotation(pageIndex, annotation?): Promise<boolean>

Select the annotation to edit. Requires SupportApi.

Parameters

pageIndex

Page index (zero based) or annotation id.

string | number

annotation?

Annotation id or annotation object itself.

string | AnnotationBase

Returns

Promise<boolean>

Examples

// Select an annotation with id 2R:
viewer.selectAnnotation("2R");

// Select an annotation with id 9R located on the last page:
viewer.selectAnnotation(viewer.pageCount - 1, "9R");

---

setAnnotationBounds()

setAnnotationBounds(annotationId, bounds, origin?, select?): Promise<void>

Use the setAnnotationBounds method to set the position and / or size of the annotation.

Parameters

annotationId

string

annotation object or annotation id.

bounds

Destination bounds - x, y, width and height are optional.

h

number

w

number

x

number

y

number

origin?

Source coordinate system origin. Default is TopLeft

"TopLeft" | "BottomLeft"

select?

boolean

Select annotation after editing. Default is false.

Returns

Promise<void>

Example

// Set the location of the annotation to the top / left corner:
viewer.setAnnotationBounds('1R', {x: 0, y: 0});
// Set the location of the annotation to the bottom / left corner:
viewer.setAnnotationBounds('1R', {x: 0, y: 0}, 'BottomLeft');
// Set the annotation size to 40 x 40 points:
viewer.setAnnotationBounds('1R', {w: 40, h: 40});
// Set the annotation position to x=50, y=50 (origin top / left) and size to 40 x 40 points:
viewer.setAnnotationBounds('1R', {x: 50, y: 50, w: 40, h: 40});

---

setPageRotation()

setPageRotation(pageIndex, rotation, viewRotationIncluded?): Promise<boolean>

Set the absolute page rotation in degrees. Valid values are 0, 90, 180, and 270 degrees. Requires SupportApi.

Parameters

pageIndex

number

rotation

number

viewRotationIncluded?

boolean

Returns

Promise<boolean>

Example

// Set the first page rotation to 180 degrees:
await viewer.setPageRotation(0, 180);

---

setPageSize()

setPageSize(pageIndex, size): Promise<boolean>

Set page size. Requires SupportApi.

Parameters

pageIndex

number

size

height

number

width

number

Returns

Promise<boolean>

Example

// Set new page size for the first page:
viewer.setPageSize(0, { width: 300, height: 500 } );

---

setPageTabs()

setPageTabs(pageIndex, tabs): void

Set page annotations tabs order. A name specifying the tab order that shall be used for annotations on the page. Possible values are: R - Row order. C - Column order. S - Structure order (not supported by DsPdfViewer). A - Annotations order. This order refers to the order of annotation in the annotations collection. W - Widgets order . This order uses the same ordering as "Annotations" order, but two passes are made, the first only picking the widget annotations and the second picking all other annotations.

Parameters

pageIndex

number

tabs

"S" | "R" | "C" | "A" | "W"

Returns

void

---

setTheme()

setTheme(theme?): void

Set active viewer theme.

Parameters

theme?

string

theme name, specified in themes option.

Returns

void

Example

viewer.setTheme("themes/light-blue");

---

showAnnotationFocusOutline()

showAnnotationFocusOutline(annotationId, animationDelay?, color?): void

Show animated highlight for a specific annotation and then hide it with animation.

Parameters

annotationId

any

The ID or annotation object for which to show the highlight.

animationDelay?

number

Optional. The delay (in milliseconds) before hiding the animation. Minimum value is 1000 milliseconds (1 second).

color?

string

Returns

void

---

showFormFiller()

showFormFiller(): void

Displays 'Form filler' dialog.

Returns

void

Example

if(viewer.hasForm) {
  viewer.showFormFiller();
}

---

showMessage()

showMessage(message, details?, severity?): void

Shows the message for the user.

Parameters

message

string

details?

string

severity?

"info" | "error" | "warn" | "debug"

Returns

void

Example

 // Show warning message
 viewer.showMessage("Warning message text", "", "warn");

---

showPdfOrganizer()

showPdfOrganizer(): PdfOrganizerDialog

Show PDF Organizer dialog.

Returns

PdfOrganizerDialog

Example

viewer.showPdfOrganizer();

---

showSecondToolbar()

showSecondToolbar(toolbarKey): Promise<void>

Show a second toolbar with a key specified by the toolbarKey argument.

Parameters

toolbarKey

string

Returns

Promise<void>

Example

viewer.showSecondToolbar("draw-tools");

---

showSignTool()

showSignTool(preferredSettings?): void

Displays the 'Add Signature' dialog. Requires SupportApi.

Parameters

preferredSettings?

SignToolSettings

Optional. These settings will take priority over signSettings option.

Returns

void

Example

viewer.showSignTool();

---

submitForm()

submitForm(submitUrl, options?): Promise<void>

Executes "Submit A Form action" to send filled form data to a web server or email. Form data is submitted as HTML form using HTML submit method.

Parameters

submitUrl

string

Destination URI.

options?

SubmitFormOptions

Optional, submit form options.

Returns

Promise<void>

Examples

Submit form to a web server using absolute URL:

viewer.submitForm("http://myhost.local/AcceptHtmlForm");

Submit form to a web server using relative URL:

viewer.submitForm("/CustomFormHandler");

Submit form to an email address:

viewer.submitForm("mailto:myform@example.com");

---

toggleSearchUI()

toggleSearchUI(expand?, replaceMode?): void

Toggles the visibility of the Search UI, which includes both the search bar and search panel. Allows switching between Search and Replace modes, and optionally expanding or collapsing the UI.

Parameters

expand?

boolean

Whether to expand (true) or collapse (false) the Search UI. Default is true.

replaceMode?

boolean

Whether to enable Replace mode in the Search UI. Default is false.

Returns

void

Examples

// Example 1: Default behavior (expand the Search UI and disable Replace mode)
viewer.toggleSearchUI();
// The Search UI expands and displays in Search mode.

// Example 2: Expand the Search UI and enable Replace mode
viewer.toggleSearchUI(true, true);
// The Search UI expands and displays the Replace mode.

// Example 3: Collapse the Search UI
viewer.toggleSearchUI(false);
// The Search UI collapses, hiding the search components.

// Example 4: Expand the Search UI without enabling Replace mode
viewer.toggleSearchUI(true, false);
// The Search UI expands but remains in Search mode.

---

triggerEvent()

triggerEvent(eventName, args?): void

Trigger event.

Parameters

eventName

EventName

args?

EventArgs | BeforeOpenEventArgs | ThemeChangedEventArgs

Returns

void

Example

// Listen CustomEvent:
viewer.getEvent("CustomEvent").register(function(args) {
  console.log(args);
});
// Trigger CustomEvent:
viewer.triggerEvent("CustomEvent", { arg1: 1, arg2: 2});

---

undoChanges()

undoChanges(): void

Undo document changes. Requires SupportApi.

Returns

void

Example

if(viewer.hasUndoChanges) {
  viewer.undoChanges();
}

---

unlockAnnotation()

unlockAnnotation(id): Promise<AnnotationBase>

Unlock annotation for editing.

Parameters

id

annotation id

string | AnnotationBase

Returns

Promise<AnnotationBase>

---

unselectAnnotation()

unselectAnnotation(): any

Reset annotation selection. Requires SupportApi.

Returns

any

Example

viewer.unselectAnnotation();

---

updateAnnotation()

updateAnnotation(pageIndex, annotation, args?): Promise<{ annotation: AnnotationBase; pageIndex: number; }>

Update annotation. Requires SupportApi.

Parameters

pageIndex

number

annotation

AnnotationBase

args?

changedPageIndex?

number

prevPageIndex?

number

skipPageRefresh?

boolean

Returns

Promise<{ annotation: AnnotationBase; pageIndex: number; }>

Promise, resolved by updated annotation object.

Example

// Update annotation on the first page (page index is 0):
viewer.updateAnnotation(0, annotation1);

---

updateAnnotations()

updateAnnotations(pageIndex, annotations, args?): Promise<{ annotations: AnnotationBase[]; pageIndex: number; }>

Update multiple annotations at the same time. Requires SupportApi.

Parameters

pageIndex

number

annotations

AnnotationBase | AnnotationBase[]

args?

skipPageRefresh?

boolean

Returns

Promise<{ annotations: AnnotationBase[]; pageIndex: number; }>

Promise, resolved by updated annotation objects.

Example

// Update annotations on the second page (page index is 1):
var annotationsToUpdate = [annotation1, annotation2];
viewer.updateAnnotations(1, annotationsToUpdate);

---

updateGroupFieldValue()

updateGroupFieldValue(fieldName, newValue, args?): Promise<boolean>

Update radio buttons group given by parameter fieldName with new field value.

Parameters

fieldName

string

Grouped radio buttons field name

newValue

string

New fieldValue

args?

skipPageRefresh boolean - set to true if you don't need to update page display. Default is false. propertyName string - property name to update. Default is "fieldValue".

propertyName?

string

skipPageRefresh?

boolean

Returns

Promise<boolean>

Promise resolved by boolean value, true - radio buttons updated, false - an error occurred.

Examples

viewer.updateGroupFieldValue("radiogroup1", "3", { skipPageRefresh: true } );

viewer.updateGroupFieldValue("radiogroup1", "3", { propertyName: "alternativeText", skipPageRefresh: true } );

---

validateForm()

validateForm(validator?, silent?, ignoreValidationAttrs?): string | boolean

Use this method to validate an active form and get the validation result.

Parameters

validator?

(fieldValue, field) => string | boolean

Optional. The validator function which will be called for each field in the form. You can return a string value with message about validation error, this message will be shown in UI. Return true or null for success result.

silent?

boolean

Optional. Pass true if you don't want to display any messages to the user, but just want to get the final validation result.

ignoreValidationAttrs?

boolean

Optional. Pass true to skip validation using field attributes such as required, min, max, minLength, maxLength, email and pattern, these attributes will be ignored.

Returns

string | boolean

Returns true if validation was successful, false, or a string with a validation error message when validation is failed.

Example

// Validate all form fields, each field must have the value "YES" or "NO".
viewer.validateForm((fieldValue, field) => { return (fieldValue === "YES" || fieldValue === "NO") ? true : "Possible value is YES or NO."; });