# DsPdfViewer
## Content
# Class: DsPdfViewer
Document Solutions PDF Viewer (DsPdfViewer) is a fast JavaScript based client-side PDF Viewer that runs in all major browsers.
## Example
```javascript
var viewer = new DsPdfViewer("#root");
viewer.addDefaultPanels();
```
## Extends
- [`GcPdfViewer`](GcPdfViewer)
## Constructors
### Constructor
```ts
new DsPdfViewer(element, options?): DsPdfViewer;
```
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`](ViewerOptions)>
Viewer options. See [ViewerOptions](ViewerOptions) for further information.
#### Returns
`DsPdfViewer`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`constructor`](GcPdfViewer#constructor)
## Properties
### registeredFonts
```ts
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
```ts
[fontName: string]: object
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`registeredFonts`](GcPdfViewer#registeredfonts)
## Accessors
### i18n
#### Get Signature
```ts
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
```javascript
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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`i18n`](GcPdfViewer#i18n)
***
### LicenseKey
#### Get Signature
```ts
get static LicenseKey(): string;
```
Product license key.
##### Example
```
```
##### Returns
`string`
#### Set Signature
```ts
set static LicenseKey(val): void;
```
Product license key.
##### Example
```
```
##### Parameters
###### val
`string`
##### Returns
`void`
Product license key.
#### Example
```
```
#### Overrides
[`GcPdfViewer`](GcPdfViewer).[`LicenseKey`](GcPdfViewer#licensekey)
***
### activatedEditorMode
#### Get Signature
```ts
get activatedEditorMode(): "" | "SecondBar" | "FormEditor" | "AnnotationEdtor" | "Any";
```
Activated editor mode name.
##### Returns
`""` \| `"SecondBar"` \| `"FormEditor"` \| `"AnnotationEdtor"` \| `"Any"`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`activatedEditorMode`](GcPdfViewer#activatededitormode)
***
### annotations
#### Get Signature
```ts
get annotations(): Promise;
```
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
```javascript
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');
```
```javascript
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)`);
});
});
```
```javascript
viewer.annotations.then(function(data) {
data.forEach(pageData => {
pageData.annotations.forEach(annotation => {
console.log(`Annotation ID: ${annotation.id}, Type: ${annotation.subtype}, Contents: ${annotation.contents}`);
});
});
});
```
```javascript
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.
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`annotations`](GcPdfViewer#annotations)
***
### beforeUnloadConfirmation
#### Get Signature
```ts
get beforeUnloadConfirmation(): boolean;
```
Ask the user if he want to leave the page when document is modified.
Requires SupportApi.
##### Example
```javascript
var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
viewer.addDefaultPanels();
viewer.addAnnotationEditorPanel();
viewer.addFormEditorPanel();
viewer.beforeUnloadConfirmation = true;
```
##### Returns
`boolean`
#### Set Signature
```ts
set beforeUnloadConfirmation(enable): void;
```
Ask the user if he want to leave the page when document is modified.
Requires SupportApi.
##### Example
```javascript
var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
viewer.addDefaultPanels();
viewer.addAnnotationEditorPanel();
viewer.addFormEditorPanel();
viewer.beforeUnloadConfirmation = true;
```
##### Parameters
###### enable
`boolean`
##### Returns
`void`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`beforeUnloadConfirmation`](GcPdfViewer#beforeunloadconfirmation)
***
### canEditDocument
#### Get Signature
```ts
get canEditDocument(): boolean;
```
Indicates whether the open document can be edited using SupportApi.
Requires SupportApi.
##### Example
```javascript
if(viewer.canEditDocument) {
alert("Document editing features enabled.");
} else {
alert("Document editing features disabled.");
}
```
##### Returns
`boolean`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`canEditDocument`](GcPdfViewer#caneditdocument)
***
### currentUserName
#### Get Signature
```ts
get currentUserName(): string;
```
Specifies the current user name.
The property is used by Annotation Editor as default value for 'author' field.
##### Examples
```javascript
viewer.currentUserName = "John";
```
```javascript
alert("The current user name is " + viewer.currentUserName);
```
##### Returns
`string`
#### Set Signature
```ts
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
```javascript
viewer.currentUserName = "John";
```
```javascript
alert("The current user name is " + viewer.currentUserName);
```
##### Parameters
###### userName
`string`
##### Returns
`void`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`currentUserName`](GcPdfViewer#currentusername)
***
### dataLoader
#### Get Signature
```ts
get dataLoader(): GcPdfViewerDataLoader;
```
PDF document meta data loader. Used by some sidebar panels.
##### Returns
`GcPdfViewerDataLoader`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`dataLoader`](GcPdfViewer#dataloader)
***
### editMode
#### Get Signature
```ts
get editMode(): EditMode;
```
Indicates the selected editing tool for the Annotation editor or Form editor.
Requires SupportApi.
##### Example
```javascript
// Set the layout mode to "Annotation editor"
viewer.layoutMode = 1;
// Set the edit mode to "Square".
viewer.editMode = 4;
```
##### Returns
`EditMode`
#### Set Signature
```ts
set editMode(mode): void;
```
Indicates the selected editing tool for the Annotation editor or Form editor.
Requires SupportApi.
##### Example
```javascript
// Set the layout mode to "Annotation editor"
viewer.layoutMode = 1;
// Set the edit mode to "Square".
viewer.editMode = 4;
```
##### Parameters
###### mode
`EditMode`
##### Returns
`void`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`editMode`](GcPdfViewer#editmode)
***
### eventBus
#### Get Signature
```ts
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
```javascript
// 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`](../interfaces/IGCEventBus)
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`eventBus`](GcPdfViewer#eventbus)
***
### fileData
#### Get Signature
```ts
get fileData(): Uint8Array;
```
Gets the file data. Available when keepFileData option is set to true.
##### Example
```javascript
var viewer = new DsPdfViewer('#root', { keepFileData: true });
viewer.open('Test.pdf');
viewer.onAfterOpen.register(function() {
var pdfFileData = viewer.fileData;
});
```
##### Returns
`Uint8Array`<`ArrayBuffer`>
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`fileData`](GcPdfViewer#filedata)
***
### fileName
#### Get Signature
```ts
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
```javascript
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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`fileName`](GcPdfViewer#filename)
***
### fileSize
#### Get Signature
```ts
get fileSize(): Promise;
```
Gets the PDF document file size in bytes.
##### Example
```javascript
const fileSizeBytes = await viewer.fileSize;
```
##### Returns
`Promise`<`number`>
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`fileSize`](GcPdfViewer#filesize)
***
### fileUrl
#### Get Signature
```ts
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
```javascript
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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`fileUrl`](GcPdfViewer#fileurl)
***
### fingerprint
#### Get Signature
```ts
get fingerprint(): string;
```
An unique document identifier.
##### Example
```javascript
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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`fingerprint`](GcPdfViewer#fingerprint)
***
### gcPdfVersion
#### Get Signature
```ts
get gcPdfVersion(): string;
```
Gets the GcPdf library version used by the SupportApi, if available.
##### Returns
`string`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`gcPdfVersion`](GcPdfViewer#gcpdfversion)
***
### hasChanges
#### Get Signature
```ts
get hasChanges(): boolean;
```
Indicates whether the document has been modified by the user.
##### Example
```javascript
if(viewer.hasChanges) {
alert("The document has been changed.");
}
```
##### Returns
`boolean`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`hasChanges`](GcPdfViewer#haschanges)
***
### hasCopyData
#### Get Signature
```ts
get hasCopyData(): boolean;
```
Indicates whether the copy buffer contains any data.
##### Example
```javascript
if(viewer.hasCopyData) {
viewer.execPasteAction();
}
```
##### Returns
`boolean`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`hasCopyData`](GcPdfViewer#hascopydata)
***
### hasDocument
#### Get Signature
```ts
get hasDocument(): boolean;
```
Indicates whether the document is loaded into view.
##### Example
```javascript
if(!viewer.hasDocument) {
viewer.open("sample.pdf");
}
```
##### Returns
`boolean`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`hasDocument`](GcPdfViewer#hasdocument)
***
### hasForm
#### Get Signature
```ts
get hasForm(): boolean;
```
Gets a value indicating whether the active document has any form fields.
##### Example
```javascript
if(viewer.hasForm) {
viewer.showFormFiller();
}
```
##### Returns
`boolean`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`hasForm`](GcPdfViewer#hasform)
***
### hasPersistentConnection
#### Get Signature
```ts
get hasPersistentConnection(): boolean;
```
Gets a value indicating whether the viewer has a persistent connection to the server.
* ```javascript
* if(viewer.hasPersistentConnection) {
* viewer.getSharedDocuments().then(function(result) {
*
* });
* }
* ```
##### Returns
`boolean`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`hasPersistentConnection`](GcPdfViewer#haspersistentconnection)
***
### hasRedoChanges
#### Get Signature
```ts
get hasRedoChanges(): boolean;
```
Gets a value indicating whether the pdf viewer can redo document changes.
Requires SupportApi.
##### Example
```javascript
if(viewer.hasRedoChanges) {
viewer.redoChanges();
}
```
##### Returns
`boolean`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`hasRedoChanges`](GcPdfViewer#hasredochanges)
***
### hasReplyTool
#### Get Signature
```ts
get hasReplyTool(): boolean;
```
Indicates whether the Reply Tool has been added.
##### Example
```javascript
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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`hasReplyTool`](GcPdfViewer#hasreplytool)
***
### hasUndoChanges
#### Get Signature
```ts
get hasUndoChanges(): boolean;
```
Gets a value indicating whether the pdf viewer can undo document changes.
Requires SupportApi.
##### Example
```javascript
if(viewer.hasUndoChanges) {
viewer.undoChanges();
}
```
##### Returns
`boolean`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`hasUndoChanges`](GcPdfViewer#hasundochanges)
***
### hideAnnotations
#### Get Signature
```ts
get hideAnnotations(): boolean;
```
Determines whether the annotation layer is hidden.
##### Example
```javascript
// Hide annotations:
viewer.hideAnnotations = true;
```
##### Returns
`boolean`
#### Set Signature
```ts
set hideAnnotations(hide): void;
```
Determines whether the annotation layer is hidden.
##### Example
```javascript
// Hide annotations:
viewer.hideAnnotations = true;
```
##### Parameters
###### hide
`boolean`
##### Returns
`void`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`hideAnnotations`](GcPdfViewer#hideannotations)
***
### highlightManager
#### Get Signature
```ts
get highlightManager(): IHighlightManager;
```
Returns the instance of the `IHighlightManager` for managing text highlights in the document.
This property provides access to the `IHighlightManager` 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
```ts
// 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
[`IHighlightManager`](../interfaces/IHighlightManager)
The `IHighlightManager` instance for the document.
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`highlightManager`](GcPdfViewer#highlightmanager)
***
### isDocumentShared
#### Get Signature
```ts
get isDocumentShared(): boolean;
```
Gets a value indicating whether the active document is open in shared mode.
Requires SupportApi.
##### Example
```javascript
if(viewer.isDocumentShared) {
alert("The document is open in shared mode.");
}
```
##### Returns
`boolean`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`isDocumentShared`](GcPdfViewer#isdocumentshared)
***
### isEditModeSticked
#### Get Signature
```ts
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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`isEditModeSticked`](GcPdfViewer#iseditmodesticked)
***
### isInEditorMode
#### Get Signature
```ts
get isInEditorMode(): boolean;
```
Gets a value indicating whether the editor mode is currently active.
##### Examples
```javascript
let isInEditorMode = viewer.isInEditorMode;
```
```javascript
// 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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`isInEditorMode`](GcPdfViewer#isineditormode)
***
### jsFormatFunctions
#### Get Signature
```ts
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
```javascript
// 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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`jsFormatFunctions`](GcPdfViewer#jsformatfunctions)
***
### language
#### Get Signature
```ts
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').
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`language`](GcPdfViewer#language)
***
### layoutMode
#### Get Signature
```ts
get layoutMode(): LayoutMode;
```
Gets or sets the layout mode (0 - Viewer, 1 - AnnotationEditor or 2 - FormEditor).
##### Default
```ts
0
```
##### Example
```javascript
// Set the layout mode to "Form editor"
viewer.layoutMode = 2;
```
##### Returns
`LayoutMode`
#### Set Signature
```ts
set layoutMode(mode): void;
```
Gets or sets the layout mode (0 - Viewer, 1 - AnnotationEditor or 2 - FormEditor).
##### Default
```ts
0
```
##### Example
```javascript
// Set the layout mode to "Form editor"
viewer.layoutMode = 2;
```
##### Parameters
###### mode
`LayoutMode`
##### Returns
`void`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`layoutMode`](GcPdfViewer#layoutmode)
***
### leftSidebar
#### Get Signature
```ts
get leftSidebar(): LeftSidebar;
```
Left sidebar API.
##### Example
```javascript
viewer.leftSidebar.hide();
```
##### Returns
`LeftSidebar`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`leftSidebar`](GcPdfViewer#leftsidebar)
***
### logLevel
#### Get Signature
```ts
get logLevel(): LogLevel;
```
Gets current log level. Available log levels are: 'None', 'Critical', 'Error', 'Warning', 'Information', 'Debug', 'Trace'. Default level is 'None'.
##### Returns
[`LogLevel`](../type-aliases/LogLevel)
#### Set Signature
```ts
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`](../type-aliases/LogLevel)
##### Returns
`void`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`logLevel`](GcPdfViewer#loglevel)
***
### modificationsState
#### Get Signature
```ts
get modificationsState(): ModificationsState;
```
Gets modifications state for active document. Requires SupportApi.
##### Example
```javascript
var modificationsState = viewer.modificationsState;
console.log(modificationsState);
```
##### Returns
[`ModificationsState`](../type-aliases/ModificationsState)
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`modificationsState`](GcPdfViewer#modificationsstate)
***
### onAfterAddAnnotation
#### Get Signature
```ts
get onAfterAddAnnotation(): EventFan;
```
After add annotation event.
##### Example
```javascript
viewer.onAfterAddAnnotation.register(function(args) {
console.log(args); // Log the event arguments to the console
});
```
##### Returns
`EventFan`<`AfterAddAnnotationEventArgs`>
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`onAfterAddAnnotation`](GcPdfViewer#onafteraddannotation)
***
### onAfterOpen
#### Get Signature
```ts
get onAfterOpen(): EventFan;
```
The event raised when the user changes the viewer theme.
##### Example
```javascript
var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
alert("The document opened.");
});
viewer.open('Test.pdf');
```
##### Returns
`EventFan`<`EventArgs`>
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`onAfterOpen`](GcPdfViewer#onafteropen)
***
### onAfterRemoveAnnotation
#### Get Signature
```ts
get onAfterRemoveAnnotation(): EventFan;
```
After remove annotation event.
##### Example
```javascript
viewer.onAfterRemoveAnnotation.register(function(args) {
console.log(args);
});
```
##### Returns
`EventFan`<`AfterRemoveAnnotationEventArgs`>
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`onAfterRemoveAnnotation`](GcPdfViewer#onafterremoveannotation)
***
### onAfterUpdateAnnotation
#### Get Signature
```ts
get onAfterUpdateAnnotation(): EventFan;
```
After update annotation event.
##### Example
```javascript
viewer.onAfterUpdateAnnotation.register(function(args) {
console.log(args);
});
```
##### Returns
`EventFan`<`AfterUpdateAnnotationEventArgs`>
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`onAfterUpdateAnnotation`](GcPdfViewer#onafterupdateannotation)
***
### onBeforeAddAnnotation
#### Get Signature
```ts
get onBeforeAddAnnotation(): EventFan;
```
Before add annotation event. The event is cancelable.
##### Examples
```javascript
// 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
});
```
```javascript
// 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`>
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`onBeforeAddAnnotation`](GcPdfViewer#onbeforeaddannotation)
***
### onBeforeOpen
#### Get Signature
```ts
get onBeforeOpen(): EventFan;
```
Occurs immediately before the document opens.
##### Example
```javascript
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`>
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`onBeforeOpen`](GcPdfViewer#onbeforeopen)
***
### onBeforeRemoveAnnotation
#### Get Signature
```ts
get onBeforeRemoveAnnotation(): EventFan;
```
Before remove annotation event. The event is cancelable.
```javascript
viewer.onBeforeRemoveAnnotation.register(function(args) {
console.log(args);
args.cancel = true; // set the cancel flag to cancel event.
});
```
##### Returns
`EventFan`<`BeforeRemoveAnnotationEventArgs`>
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`onBeforeRemoveAnnotation`](GcPdfViewer#onbeforeremoveannotation)
***
### onBeforeUpdateAnnotation
#### Get Signature
```ts
get onBeforeUpdateAnnotation(): EventFan;
```
Before update annotation event. The event is cancelable.
```javascript
// 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`>
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`onBeforeUpdateAnnotation`](GcPdfViewer#onbeforeupdateannotation)
***
### onError
#### Get Signature
```ts
get onError(): EventFan;
```
The event indicating error.
##### Example
```javascript
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`>
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`onError`](GcPdfViewer#onerror)
***
### onThemeChanged
#### Get Signature
```ts
get onThemeChanged(): EventFan;
```
Occurs when the viewer theme changed by user.
##### Example
```javascript
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`>
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`onThemeChanged`](GcPdfViewer#onthemechanged)
***
### optionalContentConfig
#### Get Signature
```ts
get optionalContentConfig(): Promise;
```
Default optional content config.
An optional content is a collection of graphics that can be made visible or invisible dynamically.
##### Examples
```javascript
// Use the optionalContentConfig property to print information about all available layers
const config = await viewer.optionalContentConfig;
console.table(config.getGroups());
```
```javascript
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`](../type-aliases/OptionalContentConfig)>
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`optionalContentConfig`](GcPdfViewer#optionalcontentconfig)
***
### options
#### Get Signature
```ts
get options(): Partial;
```
The viewer options.
##### Example
```javascript
viewer.options.zoomByMouseWheel = { always: true };
viewer.applyOptions();
```
##### Returns
`Partial`<[`ViewerOptions`](ViewerOptions)>
#### Set Signature
```ts
set options(options): void;
```
PDF viewer options.
##### Parameters
###### options
`Partial`<[`ViewerOptions`](ViewerOptions)>
##### Returns
`void`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`options`](GcPdfViewer#options)
***
### pageCount
#### Get Signature
```ts
get pageCount(): number;
```
Gets pages count.
##### Example
```javascript
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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`pageCount`](GcPdfViewer#pagecount)
***
### pageDisplay
#### Get Signature
```ts
get pageDisplay(): PageDisplayType;
```
Page display mode.
##### Returns
`PageDisplayType`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`pageDisplay`](GcPdfViewer#pagedisplay)
***
### pageIndex
#### Get Signature
```ts
get pageIndex(): number;
```
Gets/sets the active page index.
##### Example
```javascript
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
```ts
set pageIndex(val): void;
```
Gets/sets the active page index.
##### Example
```javascript
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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`pageIndex`](GcPdfViewer#pageindex)
***
### requiredSupportApiVersion
#### Get Signature
```ts
get requiredSupportApiVersion(): string;
```
Gets the required SupportApi version that is compatible with the current version of the DsPdfViewer.
##### Returns
`string`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`requiredSupportApiVersion`](GcPdfViewer#requiredsupportapiversion)
***
### rightSidebar
#### Get Signature
```ts
get rightSidebar(): GcRightSidebar;
```
Gets right sidebar object.
Use this object if you want to manipulate the right sidebar.
##### Example
```javascript
viewer.rightSidebar.show('expanded', 'reply-tool');
viewer.rightSidebar.toggle();
viewer.rightSidebar.hide();
viewer.rightSidebar.expand();
viewer.rightSidebar.collapse();
```
##### Returns
`GcRightSidebar`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`rightSidebar`](GcPdfViewer#rightsidebar)
***
### rotation
#### Get Signature
```ts
get rotation(): number;
```
Specifies the rotation in degrees.
##### Example
```javascript
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
```ts
set rotation(degrees): void;
```
Specifies the rotation in degrees.
##### Example
```javascript
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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`rotation`](GcPdfViewer#rotation)
***
### scrollView
#### Get Signature
```ts
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
```javascript
// Scroll to the top of the document:
viewer.scrollView.scrollTop = 0;
```
##### Returns
`HTMLElement`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`scrollView`](GcPdfViewer#scrollview)
***
### searcher
#### Get Signature
```ts
get searcher(): GcPdfSearcher;
```
Document search worker instance.
Searches currently opened document for a text.
##### Examples
```javascript
// Highlight all search results without opening SearchPanel.
const searchIterator = viewer.searcher.search({ Text: "test", MatchCase: true, HighlightAll: true });
searchIterator.next();
searcher.applyHighlight();
```
```javascript
// 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"));
```
```javascript
// 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:
```javascript
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`](GcPdfSearcher)
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`searcher`](GcPdfViewer#searcher)
***
### secondToolbar
#### Get Signature
```ts
get secondToolbar(): SecondToolbar;
```
Second toolbar API.
##### Returns
`SecondToolbar`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`secondToolbar`](GcPdfViewer#secondtoolbar)
***
### secondToolbarLayout
#### Get Signature
```ts
get secondToolbarLayout(): SecondToolbarLayout;
```
Second toolbar layout.
Use the secondToolbarLayout property to configure available tools.
##### Default
```ts
{
* "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
```ts
set secondToolbarLayout(layout): void;
```
Second toolbar layout.
Use the secondToolbarLayout property to configure available tools.
##### Default
```ts
{
* "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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`secondToolbarLayout`](GcPdfViewer#secondtoolbarlayout)
***
### signToolStorage
#### Get Signature
```ts
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](GcPdfViewer#currentusername) property
##### Returns
`SignToolStorage`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`signToolStorage`](GcPdfViewer#signtoolstorage)
***
### storage
#### Get Signature
```ts
get storage(): DataStorage;
```
Data storage for the active document.
##### Examples
```javascript
const fileData = viewer.storage.getItem(annotation.fileId);
```
```javascript
viewer.storage.setItem(fileId, bytes);
```
Add Stamp annotation programatically using storage API
```javascript
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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`storage`](GcPdfViewer#storage)
***
### structureTree
#### Get Signature
```ts
get structureTree(): Promise;
```
Structure tree data.
##### Example
```javascript
const viewer = new DsPdfViewer(selector);
await viewer.open("sample.pdf");
const structureTree = await viewer.structureTree;
if(structureTree) {
console.log(structureTree);
}
```
##### Returns
`Promise`<[`StructTreeNode`](../type-aliases/StructTreeNode)[]>
A promise that is resolved with a
[\[\]](../type-aliases/StructTreeNode.md) objects that represents the page's structure tree,
or `null` when no structure tree is present for the page.
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`structureTree`](GcPdfViewer#structuretree)
***
### supportApi
#### Get Signature
```ts
get supportApi(): ISupportApi;
```
Gets the SupportApi client.
Requires SupportApi.
##### Example
```javascript
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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`supportApi`](GcPdfViewer#supportapi)
***
### supportApiVersion
#### Get Signature
```ts
get supportApiVersion(): string;
```
Gets the connected version of the SupportApi, if available.
##### Returns
`string`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`supportApiVersion`](GcPdfViewer#supportapiversion)
***
### tableDataExtractor
#### Get Signature
```ts
get tableDataExtractor(): TableDataExtractor;
```
Provides an instance of `TableDataExtractor` for extracting table data from the document.
If the instance does not exist, it is created and cached.
##### Returns
`TableDataExtractor`
The `TableDataExtractor` instance associated with this document.
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`tableDataExtractor`](GcPdfViewer#tabledataextractor)
***
### toolbarLayout
#### Get Signature
```ts
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:
```javascript
'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', '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:
```javascript
'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:
```javascript
'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
```javascript
// 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();
```
```javascript
// 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;
```
```javascript
// Make square, circle and line buttons sticky:
viewer.toolbarLayout.stickyBehavior = ["edit-square", "edit-circle", "edit-line"];
viewer.applyToolbarLayout();
```
##### Returns
`PdfToolbarLayout`
#### Set Signature
```ts
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:
```javascript
'text-selection', 'pan', 'open', 'save-as', 'share', '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:
```javascript
'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:
```javascript
'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
```javascript
// 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();
```
```javascript
// 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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`toolbarLayout`](GcPdfViewer#toolbarlayout)
***
### undoCount
#### Get Signature
```ts
get undoCount(): number;
```
Gets the number of levels(commands) on the undo stack.
Requires SupportApi.
##### Example
```javascript
alert("Undo levels count is " + viewer.undoCount);
```
##### Returns
`number`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`undoCount`](GcPdfViewer#undocount)
***
### undoIndex
#### Get Signature
```ts
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
```javascript
alert("The current Undo level index is " + viewer.undoIndex);
```
##### Returns
`number`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`undoIndex`](GcPdfViewer#undoindex)
***
### undoState
#### Get Signature
```ts
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`](../type-aliases/UndoChangeName);
`data`: `any`;
`selectedAnnotation`: \{
`annotation`: [`AnnotationBase`](AnnotationBase);
`pageIndex`: `number`;
\};
\})[]
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`undoState`](GcPdfViewer#undostate)
***
### version
#### Get Signature
```ts
get version(): string;
```
Returns the current version of the GcDocs PDF viewer.
##### Example
```javascript
alert("The DsPdfViewer version is " + viewer.version);
```
##### Returns
`string`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`version`](GcPdfViewer#version)
***
### viewerPreferences
#### Get Signature
```ts
get viewerPreferences(): Promise;
```
Gets initial viewer preferences.
##### Returns
`Promise`<[`ViewerPreferences`](../type-aliases/ViewerPreferences)>
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`viewerPreferences`](GcPdfViewer#viewerpreferences)
***
### xfdfManager
#### Get Signature
```ts
get xfdfManager(): XFDFAnnotationHandler;
```
Provides access to the XFDF manager, which handles importing and exporting annotation data in XFDF format.
##### Returns
`XFDFAnnotationHandler`
The instance of AnnotationXFDFHandler.
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`xfdfManager`](GcPdfViewer#xfdfmanager)
***
### zoomMode
#### Get Signature
```ts
get zoomMode(): ZoomMode;
```
Gets/sets the current zoom node.
Accepted values are: 0 - Value, 1 - PageWidth, 2 - WholePage.
```javascript
// Set zoom mode to 'WholePage'
viewer.zoomMode = 2;
```
##### Returns
`ZoomMode`
#### Set Signature
```ts
set zoomMode(val): void;
```
Gets/sets the current zoom node.
Accepted values are: 0 - Value, 1 - PageWidth, 2 - WholePage.
##### Example
```javascript
// Set zoom mode to 'WholePage'
viewer.zoomMode = 2;
```
##### Parameters
###### val
`ZoomMode`
##### Returns
`void`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`zoomMode`](GcPdfViewer#zoommode)
***
### zoomValue
#### Get Signature
```ts
get zoomValue(): number;
```
Gets/sets the current zoom percentage level.
##### Example
```javascript
// Set zoom value to 150%
viewer.zoomValue = 150;
```
##### Returns
`number`
#### Set Signature
```ts
set zoomValue(val): void;
```
Gets/sets the current zoom percentage level.
##### Example
```javascript
// Set zoom value to 150%
viewer.zoomValue = 150;
```
##### Parameters
###### val
`number`
##### Returns
`void`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`zoomValue`](GcPdfViewer#zoomvalue)
## Methods
### findControl()
```ts
static findControl(selector): GcPdfViewer;
```
Gets the viewer instance using the host element or host element selector
#### Parameters
##### selector
`string` | `HTMLElement`
#### Returns
[`GcPdfViewer`](GcPdfViewer)
#### Example
```javascript
var viewer = DsPdfViewer.findControl("#root");
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`findControl`](GcPdfViewer#findcontrol)
***
### activatePageRegionSelection()
```ts
activatePageRegionSelection(onRegionSelected, args?): IPageRegionSelector;
```
Activates the page region selection mode.
If the region selector is not already initialized, it creates a new instance and activates it.
The selection mode allows users to define a specific region on the page, triggering the callback upon selection.
#### Parameters
##### onRegionSelected
`PageRegionSelectedCallback`
The callback function invoked when a region is selected.
##### args?
Optional configuration parameters.
###### enableAutoScroll?
`boolean`
Whether to enable automatic scrolling when the cursor reaches the edges of the viewport.
#### Returns
`IPageRegionSelector`
The instance of the page region selector.
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`activatePageRegionSelection`](GcPdfViewer#activatepageregionselection)
***
### addAnnotation()
```ts
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`](AnnotationBase)
The annotation object to be added.
##### args?
Additional optional arguments, such as skipping page refresh.
###### skipPageRefresh?
`boolean`
#### Returns
`Promise`<\{
`annotation`: [`AnnotationBase`](AnnotationBase);
`pageIndex`: `number`;
\}>
- A promise resolving to an object
containing the page index and the added annotation.
#### Examples
```javascript
// 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]
});
});
```
```javascript
// 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);
```
```javascript
// 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]
});
});
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addAnnotation`](GcPdfViewer#addannotation)
***
### addAnnotationEditorPanel()
```ts
addAnnotationEditorPanel(): PanelHandle;
```
Add annotation editor panel.
Requires SupportApi.
#### Returns
`PanelHandle`
#### Example
```javascript
viewer.addAnnotationEditorPanel();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addAnnotationEditorPanel`](GcPdfViewer#addannotationeditorpanel)
***
### addArticlesPanel()
```ts
addArticlesPanel(): PanelHandle;
```
Add articles panel.
#### Returns
`PanelHandle`
#### Example
```javascript
viewer.addArticlesPanel();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addArticlesPanel`](GcPdfViewer#addarticlespanel)
***
### addAttachmentsPanel()
```ts
addAttachmentsPanel(): PanelHandle;
```
Add attachments panel.
#### Returns
`PanelHandle`
#### Example
```javascript
viewer.addAttachmentsPanel();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addAttachmentsPanel`](GcPdfViewer#addattachmentspanel)
***
### addDefaultPanels()
```ts
addDefaultPanels(): PanelHandle[];
```
Add default set of sidebar panels with default order:
'Thumbnails', 'Outline', 'StructureTree', 'Layers', 'Attachments', 'ExtractTable'.
#### Returns
`PanelHandle`[]
#### Example
```javascript
viewer.addDefaultPanels();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addDefaultPanels`](GcPdfViewer#adddefaultpanels)
***
### addDocumentListPanel()
```ts
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`](../type-aliases/DocumentListItem)[]
#### Returns
`PanelHandle`
#### Examples
Example content for the documentslist.json file:
```javascript
["file1.pdf", "file2.pdf"].
```
```javascript
var viewer = new DsPdfViewer("#root", { documentListUrl: "/documentslist.json" });
viewer.addDocumentListPanel();
```
```javascript
var viewer = new DsPdfViewer("#root");
// Add document list panel and specify documentListUrl option:
viewer.addDocumentListPanel('/documentslist.json');
```
```javascript
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"}]');
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addDocumentListPanel`](GcPdfViewer#adddocumentlistpanel)
***
### addFormEditorPanel()
```ts
addFormEditorPanel(): PanelHandle;
```
Add form editor panel.
Requires SupportApi.
#### Returns
`PanelHandle`
#### Example
```javascript
var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
viewer.addDefaultPanels();
viewer.addFormEditorPanel();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addFormEditorPanel`](GcPdfViewer#addformeditorpanel)
***
### addLayersPanel()
```ts
addLayersPanel(): PanelHandle;
```
Add optional content layers panel.
#### Returns
`PanelHandle`
#### Example
```javascript
viewer.addLayersPanel();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addLayersPanel`](GcPdfViewer#addlayerspanel)
***
### addOutlinePanel()
```ts
addOutlinePanel(): PanelHandle;
```
Add outline panel.
#### Returns
`PanelHandle`
#### Example
```javascript
viewer.addOutlinePanel();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addOutlinePanel`](GcPdfViewer#addoutlinepanel)
***
### addReplyTool()
```ts
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
```javascript
viewer.addReplyTool('expanded');
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addReplyTool`](GcPdfViewer#addreplytool)
***
### addSearchPanel()
```ts
addSearchPanel(): PanelHandle;
```
Add Search panel.
#### Returns
`PanelHandle`
#### Example
```javascript
viewer.addSearchPanel();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addSearchPanel`](GcPdfViewer#addsearchpanel)
***
### addSharedDocumentsPanel()
```ts
addSharedDocumentsPanel(): PanelHandle;
```
Add a panel with a list of shared documents.
#### Returns
`PanelHandle`
#### Example
```javascript
var viewer = new DsPdfViewer("#root");
viewer.addSharedDocumentsPanel();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addSharedDocumentsPanel`](GcPdfViewer#addshareddocumentspanel)
***
### addStamp()
```ts
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`](AnnotationBase);
`pageIndex`: `number`;
\}>
#### Example
```javascript
// 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);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addStamp`](GcPdfViewer#addstamp)
***
### addStickyNote()
```ts
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
```ts
viewer.addStickyNote(viewer.toViewPortPoint({x: 50, y: 50, pageIndex: 0}));
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addStickyNote`](GcPdfViewer#addstickynote)
***
### addTableExtractionPanel()
```ts
addTableExtractionPanel(): PanelHandle;
```
Adds the table extraction panel to the viewer and switches to region selection mode,
allowing users to select area on the page for table data extraction.
#### Returns
`PanelHandle`
A handle to the created panel.
#### Example
```javascript
viewer.addTableExtractionPanel();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addTableExtractionPanel`](GcPdfViewer#addtableextractionpanel)
***
### addThumbnailsPanel()
```ts
addThumbnailsPanel(): PanelHandle;
```
Add Thumbnails panel
#### Returns
`PanelHandle`
#### Example
```javascript
viewer.addThumbnailsPanel();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addThumbnailsPanel`](GcPdfViewer#addthumbnailspanel)
***
### addViewAreaStyle()
```ts
addViewAreaStyle(cssText, styleId?): string;
```
Adds a css style to the view area.
#### Parameters
##### cssText
`string`
##### styleId?
`string`
#### Returns
`string`
style element identifier.
#### Example
```javascript
// Enable RTL text direction:
viewer.addViewAreaStyle(".gc-text-content, p, h1 { direction: rtl !important }");
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`addViewAreaStyle`](GcPdfViewer#addviewareastyle)
***
### applyOptions()
```ts
applyOptions(): void;
```
Call this method in order to apply changed options.
#### Returns
`void`
#### Example
```javascript
viewer.options.zoomByMouseWheel = { always: false, ctrlKey: true, metaKey: true };
viewer.applyOptions();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`applyOptions`](GcPdfViewer#applyoptions)
***
### applyToolbarLayout()
```ts
applyToolbarLayout(): void;
```
Call this method in order to apply changes in [toolbarLayout](GcPdfViewer#toolbarlayout).
#### Returns
`void`
#### Examples
```javascript
viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
viewer.applyToolbarLayout();
```
```javascript
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: '' },
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();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`applyToolbarLayout`](GcPdfViewer#applytoolbarlayout)
***
### applyViewPortScale()
```ts
applyViewPortScale(
rectOrCoords,
pageIndex,
srcOrigin?): number | 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` | `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
`number` \| `IGcRect` \| \[`number`, `number`, `number`, `number`\]
- The scaled rectangle or coordinate array, with origin set to "TopLeft".
#### Examples
```ts
// 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 }
```
```ts
// 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]
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`applyViewPortScale`](GcPdfViewer#applyviewportscale)
***
### changeBoundsOrigin()
```ts
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
```javascript
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');
```
```javascript
// 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;
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`changeBoundsOrigin`](GcPdfViewer#changeboundsorigin)
***
### changeOrigin()
```ts
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
```javascript
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');
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`changeOrigin`](GcPdfViewer#changeorigin)
***
### changeOriginToBottom()
```ts
changeOriginToBottom(pageIndex, y): number;
```
Converts the origin of the Y coordinate to the bottom.
#### Parameters
##### pageIndex
`any`
##### y
`any`
#### Returns
`number`
#### Example
```javascript
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);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`changeOriginToBottom`](GcPdfViewer#changeorigintobottom)
***
### changeOriginToTop()
```ts
changeOriginToTop(pageIndex, y): number;
```
Converts the origin of the Y coordinate to the top.
#### Parameters
##### pageIndex
`any`
##### y
`any`
#### Returns
`number`
#### Example
```javascript
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);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`changeOriginToTop`](GcPdfViewer#changeorigintotop)
***
### clearHighlightedSegments()
```ts
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`](../type-aliases/HighlightBehaviorArgs)
Optional behavior arguments, such as whether to skip repainting the text layer after clearing highlights.
#### Returns
`void`
#### Examples
```ts
// Clear highlights from page 2:
viewer.clearHighlightedSegments(2);
```
```ts
// Clear highlights from pages 1, 3, and 5:
viewer.clearHighlightedSegments([1, 3, 5]);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`clearHighlightedSegments`](GcPdfViewer#clearhighlightedsegments)
***
### cloneAnnotation()
```ts
cloneAnnotation(annotation): AnnotationBase;
```
Clone annotation or field given by parameter annotation.
Requires SupportApi.
#### Parameters
##### annotation
[`AnnotationBase`](AnnotationBase)
Annotation to clone.
#### Returns
[`AnnotationBase`](AnnotationBase)
#### Example
```javascript
// 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);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`cloneAnnotation`](GcPdfViewer#cloneannotation)
***
### close()
```ts
close(): Promise;
```
Closes the currently open document.
#### Returns
`Promise`<`void`>
#### Example
```javascript
await viewer.close();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`close`](GcPdfViewer#close)
***
### closePanel()
```ts
closePanel(panelHandleOrId?): void;
```
Closes the side panel.
#### Parameters
##### panelHandleOrId?
`any`
Optional. Panel handle or panel id to close.
#### Returns
`void`
#### Example
```javascript
viewer.closePanel();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`closePanel`](GcPdfViewer#closepanel)
***
### collectQuadPoints()
```ts
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 }]
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`collectQuadPoints`](GcPdfViewer#collectquadpoints)
***
### confirm()
```ts
confirm(
confirmationText?,
level?,
title?,
buttons?): Promise;
```
Display confirmation dialog.
#### Parameters
##### confirmationText?
`any`
##### level?
`"info"` | `"warning"` | `"error"`
##### title?
`string`
##### buttons?
`ConfirmButton`[]
#### Returns
`Promise`<`boolean` \| `ConfirmButton`>
#### Example
```javascript
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
}
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`confirm`](GcPdfViewer#confirm)
***
### convertPdfRectToWindowCoordinates()
```ts
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].
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`convertPdfRectToWindowCoordinates`](GcPdfViewer#convertpdfrecttowindowcoordinates)
***
### dateToPdfString()
```ts
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
```javascript
// 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'
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`dateToPdfString`](GcPdfViewer#datetopdfstring)
***
### deactivatePageRegionSelection()
```ts
deactivatePageRegionSelection(): void;
```
Deactivates the page region selection mode.
#### Returns
`void`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`deactivatePageRegionSelection`](GcPdfViewer#deactivatepageregionselection)
***
### deletePage()
```ts
deletePage(pageIndex?): Promise;
```
Delete page.
Requires SupportApi.
#### Parameters
##### pageIndex?
`number`
page index to delete.
#### Returns
`Promise`<`void`>
#### Example
```javascript
// Delete page with index 3.
viewer.deletePage(3);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`deletePage`](GcPdfViewer#deletepage)
***
### dispose()
```ts
dispose(): void;
```
Use this method to close and release resources occupied by the DsPdfViewer.
#### Returns
`void`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`dispose`](GcPdfViewer#dispose)
***
### download()
```ts
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
```javascript
viewer.download();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`download`](GcPdfViewer#download)
***
### execCopyAction()
```ts
execCopyAction(buffer?): Promise;
```
Execute Copy action (Ctrl + C shortcut).
Requires SupportApi.
#### Parameters
##### buffer?
`CopyBufferData`
data to copy.
#### Returns
`Promise`<`boolean`>
#### Example
```javascript
viewer.execCopyAction();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`execCopyAction`](GcPdfViewer#execcopyaction)
***
### execCutAction()
```ts
execCutAction(buffer?): Promise;
```
Execute Cut action (Ctrl + X shortcut).
Requires SupportApi.
#### Parameters
##### buffer?
`CopyBufferData`
data to cut.
#### Returns
`Promise`<`boolean`>
#### Example
```javascript
viewer.execCutAction();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`execCutAction`](GcPdfViewer#execcutaction)
***
### execDeleteAction()
```ts
execDeleteAction(buffer?): Promise;
```
Execute Delete action (DEL shortcut).
Requires SupportApi.
#### Parameters
##### buffer?
`CopyBufferData`
data to delete.
#### Returns
`Promise`<`boolean`>
#### Example
```javascript
viewer.execDeleteAction();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`execDeleteAction`](GcPdfViewer#execdeleteaction)
***
### execPasteAction()
```ts
execPasteAction(point?): Promise;
```
Execute Paste action (Ctrl + V shortcut).
Requires SupportApi.
#### Parameters
##### point?
`GcSelectionPoint`
insert position.
#### Returns
`Promise`<`boolean`>
#### Example
```javascript
if(viewer.hasCopyData) {
viewer.execPasteAction({x: 10, y: 10, pageIndex: 0});
}
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`execPasteAction`](GcPdfViewer#execpasteaction)
***
### findAnnotations()
```ts
findAnnotations(findString, findParams?): Promise;
```
Find annotation(s) within opened document. Returns promise which will be resolved with search results.
#### Parameters
##### findString
The search query string or number to find
`string` | `number`
##### findParams?
Search parameters. Default searches by 'id' without page constraint.
###### findAll?
`boolean`
Whether to find all matches or just the first one
###### findField?
`string`
Field to search in: 'id', 'title', 'contents', 'fieldName', or custom string
###### pageIndexConstraint?
`number`
Zero-based page index to constrain search to specific page
#### Returns
`Promise`<`object`[]>
Promise resolving to array of objects with pageIndex and annotation
#### Examples
```javascript
// 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.');
});
```
```javascript
// find all fields with name field1:
viewer.findAnnotations("field1", {findField: 'fieldName', findAll: true}).then(function(dataArray) {
});
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`findAnnotations`](GcPdfViewer#findannotations)
***
### findField()
```ts
findField(fieldName): Promise;
```
Finds a specific form field by its field name.
This is particularly useful for retrieving current field values that may not be updated
in other methods like validateForm (e.g., checkbox states).
#### Parameters
##### fieldName
`string`
The name of the form field to find
#### Returns
`Promise`<[`WidgetAnnotation`](WidgetAnnotation)>
Promise resolving to WidgetAnnotation with pageIndex property, or null if not found
#### Example
```ts
// Get current checkbox value workaround with page info
const field = await viewer.findField("myCheckbox");
if (field) {
console.log("Current checkbox value:", field.fieldValue);
console.log("Located on page:", field.pageIndex);
}
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`findField`](GcPdfViewer#findfield)
***
### findFields()
```ts
findFields(fieldName): Promise;
```
Finds all form fields matching the specified field name.
Useful for fields that appear multiple times (like radio buttons in a group).
#### Parameters
##### fieldName
`string`
The name of the form field(s) to find
#### Returns
`Promise`<[`WidgetAnnotation`](WidgetAnnotation)[]>
Promise resolving to array of WidgetAnnotations with pageIndex property
#### Examples
```ts
// Get all radio buttons in a group with page information
const radioButtons = await viewer.findFields("radioGroup");
radioButtons.forEach((field, index) => {
console.log(`Radio ${index} on page ${field.pageIndex}:`, field.fieldValue);
});
```
```ts
// Check fields on specific page
const fields = await viewer.findFields("myField");
const fieldsOnPage2 = fields.filter(field => field.pageIndex === 1);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`findFields`](GcPdfViewer#findfields)
***
### getDocumentInformation()
```ts
getDocumentInformation(): Promise;
```
Gets meta data information for the current document.
#### Returns
`Promise`<`DocumentInformation`>
#### Example
```javascript
const docMetaInfo = await viewer.getDocumentInformation();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`getDocumentInformation`](GcPdfViewer#getdocumentinformation)
***
### getDocumentSecurity()
```ts
getDocumentSecurity(): Promise;
```
Gets security information for the current document.
#### Returns
`Promise`<`DocumentSecuritySummary`>
#### Example
```javascript
const docSecurityInfo = await viewer.getDocumentSecurity();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`getDocumentSecurity`](GcPdfViewer#getdocumentsecurity)
***
### getEvent()
```ts
getEvent(eventName): EventFan;
```
Get event object.
#### Parameters
##### eventName
`EventName`
#### Returns
`EventFan`<`any`>
#### Example
```javascript
viewer.getEvent("BeforeAddAnnotation").register(function(args) {
console.log(args);
});
viewer.getEvent("AfterAddAnnotation").register(function(args) {
console.log(args);
});
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`getEvent`](GcPdfViewer#getevent)
***
### getPageLocation()
```ts
getPageLocation(pageIndex): object;
```
Returns position of the page view relative to the browser window.
#### Parameters
##### pageIndex
`number`
#### Returns
`object`
##### x
```ts
x: number;
```
##### y
```ts
y: number;
```
#### Examples
```javascript
var pageLocation = viewer.getPageLocation(0);
console.log('The first page location is ' + location.x + ', ' + location.y);
```
```javascript
// 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");
```
```javascript
// 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 });
}
});
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`getPageLocation`](GcPdfViewer#getpagelocation)
***
### getPageRotation()
```ts
getPageRotation(pageIndex, includeViewRotation?): number;
```
Get the page rotation value.
#### Parameters
##### pageIndex
`number`
##### includeViewRotation?
`boolean`
Include view rotation, default is true.
#### Returns
`number`
#### Example
```javascript
// Get the first page rotation value:
var rotation = viewer.getPageRotation(0);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`getPageRotation`](GcPdfViewer#getpagerotation)
***
### getPageSize()
```ts
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
```ts
height: number;
```
##### width
```ts
width: number;
```
#### Example
```javascript
// Get first page size:
var pageSize = viewer.getPageSize(0);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`getPageSize`](GcPdfViewer#getpagesize)
***
### getPageTabs()
```ts
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"`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`getPageTabs`](GcPdfViewer#getpagetabs)
***
### getSelectedText()
```ts
getSelectedText(): string;
```
Returns the contents of the text selection.
#### Returns
`string`
#### Example
```javascript
alert("Text selected by the user: " + viewer.getSelectedText());
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`getSelectedText`](GcPdfViewer#getselectedtext)
***
### getSharedDocuments()
```ts
getSharedDocuments(): Promise;
```
Returns a list of shared documents available to the current user.
#### Returns
`Promise`<[`SharedDocumentInfo`](../type-aliases/SharedDocumentInfo)[]>
#### Example
```javascript
var sharedDocuments = await viewer.getSharedDocuments();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`getSharedDocuments`](GcPdfViewer#getshareddocuments)
***
### getSignatureInfo()
```ts
getSignatureInfo(): Promise;
```
Get information about signature used in document.
#### Returns
`Promise`<[`SignatureInformation`](../type-aliases/SignatureInformation)>
#### Example
```javascript
// 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.");
}
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`getSignatureInfo`](GcPdfViewer#getsignatureinfo)
***
### getViewPort()
```ts
getViewPort(pageIndex): PageViewport;
```
Returns PDF page view port information.
#### Parameters
##### pageIndex
`number`
Page index (Zero based).
#### Returns
[`PageViewport`](../type-aliases/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
```javascript
// Get the viewport object for the first page:
var viewPort = viewer.getViewPort(0);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`getViewPort`](GcPdfViewer#getviewport)
***
### goBack()
```ts
goBack(): void;
```
Move back in the document history.
#### Returns
`void`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`goBack`](GcPdfViewer#goback)
***
### goForward()
```ts
goForward(): void;
```
Move forward in the document history.
#### Returns
`void`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`goForward`](GcPdfViewer#goforward)
***
### goToFirstPage()
```ts
goToFirstPage(): void;
```
Go to the first page.
#### Returns
`void`
#### Example
```javascript
viewer.goToFirstPage();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`goToFirstPage`](GcPdfViewer#gotofirstpage)
***
### goToLastPage()
```ts
goToLastPage(): void;
```
Go to the last page.
#### Returns
`void`
#### Example
```javascript
viewer.goToLastPage();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`goToLastPage`](GcPdfViewer#gotolastpage)
***
### goToNextPage()
```ts
goToNextPage(): void;
```
Go to the next page.
#### Returns
`void`
#### Example
```javascript
viewer.goToNextPage();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`goToNextPage`](GcPdfViewer#gotonextpage)
***
### goToPage()
```ts
goToPage(pageIndex): void;
```
Go to the page with the specific page index.
#### Parameters
##### pageIndex
`number`
#### Returns
`void`
#### Since
2.3.1
#### Example
```javascript
// Go to the first page:
viewer.goToPage(0);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`goToPage`](GcPdfViewer#gotopage)
***
### ~~goToPageNumber()~~
```ts
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
```javascript
// Go to the second page:
viewer.goToPageNumber(2);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`goToPageNumber`](GcPdfViewer#gotopagenumber)
***
### goToPrevPage()
```ts
goToPrevPage(): void;
```
Go to the previous page.
#### Returns
`void`
#### Example
```javascript
viewer.goToPrevPage();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`goToPrevPage`](GcPdfViewer#gotoprevpage)
***
### hideSecondToolbar()
```ts
hideSecondToolbar(): void;
```
Hide second toolbar.
#### Returns
`void`
#### Example
```javascript
viewer.hideSecondToolbar();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`hideSecondToolbar`](GcPdfViewer#hidesecondtoolbar)
***
### highlightTextSegment()
```ts
highlightTextSegment(
pageIndex,
startCharIndex,
endCharIndex,
args?): Promise;
```
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`](../type-aliases/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
```ts
// 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 });
```
```ts
// 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);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`highlightTextSegment`](GcPdfViewer#highlighttextsegment)
***
### invalidate()
```ts
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
```javascript
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();
});
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`invalidate`](GcPdfViewer#invalidate)
***
### isFontUrlRegistered()
```ts
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.
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`isFontUrlRegistered`](GcPdfViewer#isfonturlregistered)
***
### loadAndScrollPageIntoView()
```ts
loadAndScrollPageIntoView(
pageIndex,
destArray?,
scrollIntoViewOptions?): Promise;
```
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`](../type-aliases/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
```javascript
// Load and display the first page:
viewer.loadAndScrollPageIntoView(0);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`loadAndScrollPageIntoView`](GcPdfViewer#loadandscrollpageintoview)
***
### loadDocumentList()
```ts
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`](../type-aliases/DocumentListItem)[]
#### Returns
`void`
#### Examples
```javascript
viewer.loadDocumentList();
```
```javascript
// Load document list using DATA URI:
viewer.loadDocumentList('data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "doc 2", "title": "title 2"}]');
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`loadDocumentList`](GcPdfViewer#loaddocumentlist)
***
### loadSharedDocuments()
```ts
loadSharedDocuments(): void;
```
Loads the updated list of shared documents into the shared documents panel.
#### Returns
`void`
#### Example
```javascript
viewer.loadSharedDocuments();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`loadSharedDocuments`](GcPdfViewer#loadshareddocuments)
***
### lockAnnotation()
```ts
lockAnnotation(id): Promise;
```
Lock annotation for editing.
#### Parameters
##### id
annotation id
`string` | [`AnnotationBase`](AnnotationBase)
#### Returns
`Promise`<[`AnnotationBase`](AnnotationBase)>
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`lockAnnotation`](GcPdfViewer#lockannotation)
***
### markAnnotationLayerDirty()
```ts
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
```javascript
// Example: Mark annotation layers for the first and third pages as dirty:
viewer.markAnnotationLayerDirty([0, 2]);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`markAnnotationLayerDirty`](GcPdfViewer#markannotationlayerdirty)
***
### newDocument()
```ts
newDocument(params?): Promise;
```
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
```javascript
// 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});
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`newDocument`](GcPdfViewer#newdocument)
***
### newPage()
```ts
newPage(params?): Promise;
```
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
```javascript
// Create a new blank page and insert it in the second position.
viewer.newPage({pageIndex: 1});
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`newPage`](GcPdfViewer#newpage)
***
### open()
```ts
open(file?, openParameters?): Promise;
```
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`](../type-aliases/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
```javascript
// Open a PDF document from a URL
viewer.open("Documents/HelloWorld.pdf");
```
```javascript
// Open a PDF document from binary data (Uint8Array)
const binaryData = new Uint8Array([37, 80, 68, 70, 45, ...]); // PDF file bytes
viewer.open(binaryData);
```
```javascript
// 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"
}
});
```
```javascript
// Open a PDF document from an array of bytes
const byteArray = [37, 80, 68, 70, 45, ...]; // Array representation of PDF bytes
viewer.open(byteArray);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`open`](GcPdfViewer#open)
***
### openLocalFile()
```ts
openLocalFile(): any;
```
Show the file open dialog where the user can select the PDF file.
#### Returns
`any`
#### Example
```javascript
viewer.openLocalFile();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`openLocalFile`](GcPdfViewer#openlocalfile)
***
### openPanel()
```ts
openPanel(panelHandleOrId): void;
```
Opens the side panel.
#### Parameters
##### panelHandleOrId
`any`
Panel handle or panel id to open.
#### Returns
`void`
#### Example
```javascript
const layersPanelHandle = viewer.addLayersPanel();
viewer.open("house-plan.pdf").then(()=> {
viewer.openPanel(layersPanelHandle);
});
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`openPanel`](GcPdfViewer#openpanel)
***
### openSharedDocument()
```ts
openSharedDocument(sharedDocumentId): Promise;
```
Open shared document by it's id.
#### Parameters
##### sharedDocumentId
`string`
unique shared document identifier.
#### Returns
`Promise`<`OpenDocumentInfo`>
#### Examples
Open shared document using document index:
```javascript
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.
```javascript
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");
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`openSharedDocument`](GcPdfViewer#openshareddocument)
***
### openSharedDocumentByIndex()
```ts
openSharedDocumentByIndex(sharedDocIndex): Promise;
```
Open shared document using document index.
#### Parameters
##### sharedDocIndex
`number`
#### Returns
`Promise`<`OpenDocumentInfo`>
#### Example
Open second shared document:
```javascript
viewer.openSharedDocumentByIndex(1);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`openSharedDocumentByIndex`](GcPdfViewer#openshareddocumentbyindex)
***
### openSharedDocumentByName()
```ts
openSharedDocumentByName(fileName): Promise;
```
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
```javascript
// Open the first available shared document named "sample.pdf":
viewer.openSharedDocumentByName("sample.pdf");
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`openSharedDocumentByName`](GcPdfViewer#openshareddocumentbyname)
***
### pdfStringToDate()
```ts
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
```javascript
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)
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`pdfStringToDate`](GcPdfViewer#pdfstringtodate)
***
### print()
```ts
print(): void;
```
Opens the browser's print document dialog box.
#### Returns
`void`
#### Example
```javascript
viewer.print();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`print`](GcPdfViewer#print)
***
### redoChanges()
```ts
redoChanges(): void;
```
Redo document changes.
Requires SupportApi.
#### Returns
`void`
#### Example
```javascript
if(viewer.hasRedoChanges) {
viewer.redoChanges();
}
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`redoChanges`](GcPdfViewer#redochanges)
***
### redrawTouchedAnnotations()
```ts
redrawTouchedAnnotations(): Promise;
```
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.
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`redrawTouchedAnnotations`](GcPdfViewer#redrawtouchedannotations)
***
### registerFallbackFont()
```ts
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`](../type-aliases/FontFormat) |
\{
`clientOnly?`: `boolean`;
`displayName?`: `string`;
`format?`: [`FontFormat`](../type-aliases/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`](../type-aliases/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
```javascript
// Registering a fallback font URL
viewer.registerFallbackFont('https://example.com/fonts/fallbackfont.woff');
```
```javascript
// Registering a fallback font with name and URL
viewer.registerFallbackFont('SampleFont1', 'https://example.com/fonts/SampleFont1.woff');
```
```javascript
// 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.
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`registerFallbackFont`](GcPdfViewer#registerfallbackfont)
***
### registerFont()
```ts
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`](../type-aliases/FontFormat) | [`FontRegistrationOptions`](../interfaces/FontRegistrationOptions)
#### Returns
`void`
#### Examples
```javascript
// Registering a font with name and URL
viewer.registerFont('SampleFont3', 'https://example.com/fonts/SampleFont3.woff');
```
```javascript
// Registering a font with name, URL, and format
viewer.registerFont('SampleFont4', 'https://example.com/fonts/SampleFont4.ttf', 'ttf');
```
```javascript
// Registering a font without adding it to the UI for selection
viewer.registerFont('SampleFont5', 'https://example.com/fonts/SampleFont5.ttf', { format: 'ttf', addToUI: false });
```
```javascript
// 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 });
```
```javascript
// Registering a server-only font without registering it on the client
viewer.registerFont('SampleFont7', 'https://example.com/fonts/SampleFont7.ttf', { format: 'ttf', serverOnly: true });
```
```javascript
// Registering a font with custom embedding mode
viewer.registerFont('SampleFont8', 'https://example.com/fonts/SampleFont8.ttf', {
embedMode: 'EmbedSubset'
});
```
#### Throws
Throws an error if the provided font name is already registered.
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`registerFont`](GcPdfViewer#registerfont)
***
### removeAnnotation()
```ts
removeAnnotation(
pageIndex,
annotationId,
args?): Promise;
```
Remove annotation from document.
Requires SupportApi.
#### Parameters
##### pageIndex
`number`
##### annotationId
`string`
##### args?
###### skipPageRefresh?
`boolean`
#### Returns
`Promise`<`boolean`>
#### Example
```javascript
// Remove annotation with id '2R' located on the first page:
viewer.removeAnnotation(0, '2R');
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`removeAnnotation`](GcPdfViewer#removeannotation)
***
### removeViewAreaStyle()
```ts
removeViewAreaStyle(id): boolean;
```
Removes a css style from the view area by its id.
#### Parameters
##### id
`string`
style element identifier.
#### Returns
`boolean`
#### Example
```javascript
const id = viewer.addViewAreaStyle(".gc-text-content { font-size: 20px !important; }");
viewer.removeViewAreaStyle(id);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`removeViewAreaStyle`](GcPdfViewer#removeviewareastyle)
***
### repaint()
```ts
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
```ts
// Redraw content and annotations for visible pages:
viewer.repaint();
```
```ts
// Redraw content and annotations for specific pages (0 and 3):
viewer.repaint([0, 3]);
```
```ts
// Ensure that invisible pages will be repainted as soon as they become visible:
viewer.repaint([1, 2], { repaintOnVisible: true });
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`repaint`](GcPdfViewer#repaint)
***
### repaintTextLayer()
```ts
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
```javascript
// Repaint the text layer for all visible pages:
viewer.repaintTextLayer();
```
```javascript
// Repaint the text layer for pages with indices 0 and 3:
viewer.repaintTextLayer([0, 3]);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`repaintTextLayer`](GcPdfViewer#repainttextlayer)
***
### resetForm()
```ts
resetForm(): void;
```
Reset form values.
#### Returns
`void`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`resetForm`](GcPdfViewer#resetform)
***
### resolvePageIndex()
```ts
resolvePageIndex(pageRef): Promise;
```
Resolve page index using PDF page reference.
#### Parameters
##### pageRef
`any`
#### Returns
`Promise`<`number`>
#### Example
```javascript
const openAction = (await viewer.viewerPreferences).openAction;
if(openAction && openAction.dest) {
const pageRef = openAction.dest[0];
const targetPageIndex = await viewer.resolvePageIndex(pageRef);
}
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`resolvePageIndex`](GcPdfViewer#resolvepageindex)
***
### resolveRegisteredFonts()
```ts
resolveRegisteredFonts(): Promise;
```
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.
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`resolveRegisteredFonts`](GcPdfViewer#resolveregisteredfonts)
***
### save()
```ts
save(fileName?, settings?): Promise;
```
Save the modified PDF document to the local disk.
Requires SupportApi.
#### Parameters
##### fileName?
`string`
Destination file name.
##### settings?
[`SaveSettings`](../type-aliases/SaveSettings)
Additional save settings.
#### Returns
`Promise`<`boolean`>
#### Example
Specify destination file name
```javascript
viewer.save('Test.pdf');
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`save`](GcPdfViewer#save)
***
### saveAsImages()
```ts
saveAsImages(fileName?, settings?): Promise;
```
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`](../type-aliases/SaveSettings)
Additional save settings.
#### Returns
`Promise`<`boolean`>
#### Examples
```javascript
// Save the pages of the current PDF document as PNG images and specify destination zip file name:
viewer.saveAsImages('Test.zip');
```
```javascript
// Save the pages of the current PDF document as PNG images,
// and specify destination view zoom factor:
viewer.saveAsImages("sample.pdf", { zoomFactor: 1.5 });
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`saveAsImages`](GcPdfViewer#saveasimages)
***
### saveChanges()
```ts
saveChanges(): Promise;
```
Upload local changes to server.
Requires SupportApi.
#### Returns
`Promise`<`boolean`>
#### Example
```javascript
viewer.saveChanges().then(function(result) {
if(result) {
alert("The document saved on the server.");
} else {
alert("Cannot save the document on the server.");
}
});
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`saveChanges`](GcPdfViewer#savechanges)
***
### scrollAnnotationIntoView()
```ts
scrollAnnotationIntoView(
pageIndexOrId,
annotationOrScrollOptions?,
scrollOptions?): Promise;
```
Scroll annotation into view.
#### Parameters
##### pageIndexOrId
`string` | `number`
##### annotationOrScrollOptions?
`string` | [`AnnotationBase`](AnnotationBase) | [`ScrollPageIntoViewOptions`](../type-aliases/ScrollPageIntoViewOptions)
##### scrollOptions?
[`ScrollPageIntoViewOptions`](../type-aliases/ScrollPageIntoViewOptions) | `ScrollBehavior`
#### Returns
`Promise`<`void`>
#### Examples
```javascript
// Scroll the annotation located on the second page into view.
viewer.scrollAnnotationIntoView(1, annotation);
```
```javascript
// Scroll annotation into view by id.
viewer.scrollAnnotationIntoView("2R");
```
```javascript
// Scroll annotation into view by id using smooth scroll behavior.
viewer.scrollAnnotationIntoView("2R", { behavior: "smooth" });
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`scrollAnnotationIntoView`](GcPdfViewer#scrollannotationintoview)
***
### ~~scrollPageIntoView()~~
```ts
scrollPageIntoView(params): void;
```
Scrolls a page into view.
#### Parameters
##### params
The scroll parameters.
###### allowNegativeOffset?
`boolean`
Whether to allow negative page offsets.
###### destArray?
`any`[]
An array specifying the destination view.
The `destArray` may contain the following values:
- `destArray[0]` *(optional)* - Not used, can be `null`. It may contain a PDF page reference (for internal use).
- `destArray[1]` - An object specifying the destination view fit type:
- `{ name: 'XYZ' }` - The destination is defined by the top-left corner coordinates and a zoom factor.
- `{ name: 'Fit' }` - Fits the entire page into the viewport.
- `{ name: 'FitH' }` - Fits the page width into the viewport.
- `{ name: 'FitV' }` - Fits the page height into the viewport.
- `{ name: 'FitR' }` - Fits a specific rectangle (defined by its top-left and bottom-right points) into the viewport.
- `{ name: 'FitB' }` - Fits the bounding box of all visible elements on the page into the viewport.
- `{ name: 'FitBH' }` - Fits the bounding box width into the viewport.
- `{ name: 'FitBV' }` - Fits the bounding box height into the viewport.
- `destArray[2]` *(optional)* - The x-coordinate offset.
- `destArray[3]` *(optional)* - The y-coordinate offset.
- **Note:** The coordinate system origin `(0, 0)` is at the lower-left corner of the page.
- `destArray[4]` *(optional)* - May be `null`. Represents:
- The bounding box width if the view type is `FitR`.
- The zoom scale if the view type is `XYZ`.
- `destArray[5]` *(optional)* - May be `null`. Represents the bounding box height when the view type is `FitR`.
###### pageNumber
`number`
The page number to scroll to.
#### Returns
`void`
#### Deprecated
This method has been deprecated since v2.3.1.
Use [goToPage](GcPdfViewer#gotopage) or [scrollAnnotationIntoView](GcPdfViewer#scrollannotationintoview) instead.
#### Examples
```javascript
// Scroll to page 10.
viewer.scrollPageIntoView({ pageNumber: 10 });
```
```javascript
// Scroll an annotation's bounding rectangle into view.
const rectangle = annotation.rect;
const pagePosX = rectangle[0];
const pagePosY = rectangle[1] + Math.abs(rectangle[3] - rectangle[1]);
viewer.scrollPageIntoView({
pageNumber: pageIndex + 1,
destArray: [null, { name: "XYZ" }, pagePosX, pagePosY, viewer.zoomValue / 100.0]
});
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`scrollPageIntoView`](GcPdfViewer#scrollpageintoview)
***
### selectAnnotation()
```ts
selectAnnotation(pageIndex, annotation?): Promise;
```
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`](AnnotationBase)
#### Returns
`Promise`<`boolean`>
#### Examples
```javascript
// Select an annotation with id 2R:
viewer.selectAnnotation("2R");
```
```javascript
// Select an annotation with id 9R located on the last page:
viewer.selectAnnotation(viewer.pageCount - 1, "9R");
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`selectAnnotation`](GcPdfViewer#selectannotation)
***
### setAnnotationBounds()
```ts
setAnnotationBounds(
annotationId,
bounds,
origin?,
select?): Promise;
```
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
```javascript
// 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});
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`setAnnotationBounds`](GcPdfViewer#setannotationbounds)
***
### setPageRotation()
```ts
setPageRotation(
pageIndex,
rotation,
viewRotationIncluded?): Promise;
```
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
```javascript
// Set the first page rotation to 180 degrees:
await viewer.setPageRotation(0, 180);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`setPageRotation`](GcPdfViewer#setpagerotation)
***
### setPageSize()
```ts
setPageSize(pageIndex, size): Promise;
```
Set page size.
Requires SupportApi.
#### Parameters
##### pageIndex
`number`
##### size
###### height
`number`
###### width
`number`
#### Returns
`Promise`<`boolean`>
#### Example
```javascript
// Set new page size for the first page:
viewer.setPageSize(0, { width: 300, height: 500 } );
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`setPageSize`](GcPdfViewer#setpagesize)
***
### setPageTabs()
```ts
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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`setPageTabs`](GcPdfViewer#setpagetabs)
***
### setTheme()
```ts
setTheme(theme?): void;
```
Set active viewer theme.
#### Parameters
##### theme?
`string`
theme name, specified in themes option.
#### Returns
`void`
#### Example
```javascript
viewer.setTheme("themes/light-blue");
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`setTheme`](GcPdfViewer#settheme)
***
### showAnnotationFocusOutline()
```ts
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`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`showAnnotationFocusOutline`](GcPdfViewer#showannotationfocusoutline)
***
### showFormFiller()
```ts
showFormFiller(): void;
```
Displays 'Form filler' dialog.
#### Returns
`void`
#### Example
```javascript
if(viewer.hasForm) {
viewer.showFormFiller();
}
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`showFormFiller`](GcPdfViewer#showformfiller)
***
### showMessage()
```ts
showMessage(
message,
details?,
severity?,
autoHideTimeout?): void;
```
Shows the message for the user.
#### Parameters
##### message
`string`
##### details?
`string`
##### severity?
`"info"` | `"error"` | `"warn"` | `"debug"`
##### autoHideTimeout?
`number`
#### Returns
`void`
#### Example
```javascript
// Show warning message
viewer.showMessage("Warning message text", "", "warn");
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`showMessage`](GcPdfViewer#showmessage)
***
### showPdfOrganizer()
```ts
showPdfOrganizer(): PdfOrganizerDialog;
```
Show PDF Organizer dialog.
#### Returns
`PdfOrganizerDialog`
#### Example
```javascript
viewer.showPdfOrganizer();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`showPdfOrganizer`](GcPdfViewer#showpdforganizer)
***
### showSecondToolbar()
```ts
showSecondToolbar(toolbarKey): Promise;
```
Show a second toolbar with a key specified by the toolbarKey argument.
#### Parameters
##### toolbarKey
`string`
#### Returns
`Promise`<`void`>
#### Example
```javascript
viewer.showSecondToolbar("draw-tools");
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`showSecondToolbar`](GcPdfViewer#showsecondtoolbar)
***
### showSignTool()
```ts
showSignTool(preferredSettings?): void;
```
Displays the 'Add Signature' dialog.
Requires SupportApi.
#### Parameters
##### preferredSettings?
[`SignToolSettings`](../type-aliases/SignToolSettings)
Optional. These settings will take priority over signSettings option.
#### Returns
`void`
#### Example
```javascript
viewer.showSignTool();
```
*
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`showSignTool`](GcPdfViewer#showsigntool)
***
### submitForm()
```ts
submitForm(submitUrl, options?): Promise;
```
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](https://www.w3schools.com/jsref/met_form_submit.asp) 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:
```javascript
viewer.submitForm("http://myhost.local/AcceptHtmlForm");
```
Submit form to a web server using relative URL:
```javascript
viewer.submitForm("/CustomFormHandler");
```
Submit form to an email address:
```javascript
viewer.submitForm("mailto:myform@example.com");
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`submitForm`](GcPdfViewer#submitform)
***
### togglePanel()
```ts
togglePanel(handle?): void;
```
Toggles the visibility of a panel. If no handle is provided, it toggles the currently active sidebar panel.
If a handle is provided, it expands the panel if it is collapsed or collapses it if it is active.
#### Parameters
##### handle?
`any`
The panel handle or panel ID to toggle.
#### Returns
`void`
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`togglePanel`](GcPdfViewer#togglepanel)
***
### toggleSearchUI()
```ts
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
```javascript
// Example 1: Default behavior (expand the Search UI and disable Replace mode)
viewer.toggleSearchUI();
// The Search UI expands and displays in Search mode.
```
```javascript
// Example 2: Expand the Search UI and enable Replace mode
viewer.toggleSearchUI(true, true);
// The Search UI expands and displays the Replace mode.
```
```javascript
// Example 3: Collapse the Search UI
viewer.toggleSearchUI(false);
// The Search UI collapses, hiding the search components.
```
```javascript
// Example 4: Expand the Search UI without enabling Replace mode
viewer.toggleSearchUI(true, false);
// The Search UI expands but remains in Search mode.
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`toggleSearchUI`](GcPdfViewer#togglesearchui)
***
### triggerEvent()
```ts
triggerEvent(eventName, args?): void;
```
Trigger event.
#### Parameters
##### eventName
`EventName`
##### args?
`EventArgs` | `BeforeOpenEventArgs` | `ThemeChangedEventArgs`
#### Returns
`void`
#### Example
```javascript
// Listen CustomEvent:
viewer.getEvent("CustomEvent").register(function(args) {
console.log(args);
});
// Trigger CustomEvent:
viewer.triggerEvent("CustomEvent", { arg1: 1, arg2: 2});
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`triggerEvent`](GcPdfViewer#triggerevent)
***
### undoChanges()
```ts
undoChanges(): void;
```
Undo document changes.
Requires SupportApi.
#### Returns
`void`
#### Example
```javascript
if(viewer.hasUndoChanges) {
viewer.undoChanges();
}
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`undoChanges`](GcPdfViewer#undochanges)
***
### unlockAnnotation()
```ts
unlockAnnotation(id): Promise;
```
Unlock annotation for editing.
#### Parameters
##### id
annotation id
`string` | [`AnnotationBase`](AnnotationBase)
#### Returns
`Promise`<[`AnnotationBase`](AnnotationBase)>
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`unlockAnnotation`](GcPdfViewer#unlockannotation)
***
### unselectAnnotation()
```ts
unselectAnnotation(): any;
```
Reset annotation selection.
Requires SupportApi.
#### Returns
`any`
#### Example
```javascript
viewer.unselectAnnotation();
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`unselectAnnotation`](GcPdfViewer#unselectannotation)
***
### updateAnnotation()
```ts
updateAnnotation(
pageIndex,
annotation,
args?): Promise<{
annotation: AnnotationBase;
pageIndex: number;
}>;
```
Update annotation.
Requires SupportApi.
#### Parameters
##### pageIndex
`number`
##### annotation
[`AnnotationBase`](AnnotationBase)
##### args?
###### changedPageIndex?
`number`
###### prevPageIndex?
`number`
###### skipPageRefresh?
`boolean`
#### Returns
`Promise`<\{
`annotation`: [`AnnotationBase`](AnnotationBase);
`pageIndex`: `number`;
\}>
Promise, resolved by updated annotation object.
#### Example
```javascript
// Update annotation on the first page (page index is 0):
viewer.updateAnnotation(0, annotation1);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`updateAnnotation`](GcPdfViewer#updateannotation)
***
### updateAnnotations()
```ts
updateAnnotations(
pageIndex,
annotations,
args?): Promise<{
annotations: AnnotationBase[];
pageIndex: number;
}>;
```
Update multiple annotations at the same time.
Requires SupportApi.
#### Parameters
##### pageIndex
`number`
##### annotations
[`AnnotationBase`](AnnotationBase) | [`AnnotationBase`](AnnotationBase)[]
##### args?
###### skipPageRefresh?
`boolean`
#### Returns
`Promise`<\{
`annotations`: [`AnnotationBase`](AnnotationBase)[];
`pageIndex`: `number`;
\}>
Promise, resolved by updated annotation objects.
#### Example
```javascript
// Update annotations on the second page (page index is 1):
var annotationsToUpdate = [annotation1, annotation2];
viewer.updateAnnotations(1, annotationsToUpdate);
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`updateAnnotations`](GcPdfViewer#updateannotations)
***
### updateGroupFieldValue()
```ts
updateGroupFieldValue(
fieldName,
newValue,
args?): Promise;
```
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
```javascript
viewer.updateGroupFieldValue("radiogroup1", "3", { skipPageRefresh: true } );
```
```javascript
viewer.updateGroupFieldValue("radiogroup1", "3", { propertyName: "alternativeText", skipPageRefresh: true } );
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`updateGroupFieldValue`](GcPdfViewer#updategroupfieldvalue)
***
### validateForm()
```ts
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.
#### Important
Note about field parameter: The `field` parameter passed to the validator function
may not reflect dynamic user changes because `validateForm` is synchronous, while `fieldValue`
is retrieved directly from the user input. To get the current field state with all properties
(including dynamic changes like checkbox states), use `findField()` or `findFields()` methods.
#### Examples
```javascript
// Basic validation
viewer.validateForm((fieldValue, field) => {
return (fieldValue === "YES" || fieldValue === "NO") ? true : "Possible value is YES or NO.";
});
```
```javascript
// Get current field state for accurate validation (especially for checkboxes)
viewer.validateForm(async (value, field) => {
const currentField = await viewer.findField(field.fieldName);
if (field.fieldName === "fld1") {
console.log(currentField.fieldValue === "Yes" ? "Validation passed." : "Checkbox fld1 must be checked");
}
});
```
#### Inherited from
[`GcPdfViewer`](GcPdfViewer).[`validateForm`](GcPdfViewer#validateform)