# Class GcPdfViewer

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

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

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

#### Hierarchy

- ReportViewer
  - GcPdfViewer
    - DsPdfViewer

#####
Index

### Properties

LicenseKey
registeredFonts
toggleSidebar

### Methods

findControl
activatePageRegionSelection
addAnnotation
addAnnotationEditorPanel
addArticlesPanel
addAttachmentsPanel
addDefaultPanels
addDocumentListPanel
addFormEditorPanel
addLayersPanel
addOutlinePanel
addReplyTool
addSearchPanel
addSharedDocumentsPanel
addStamp
addStickyNote
addTableExtractionPanel
addThumbnailsPanel
addViewAreaStyle
applyOptions
applyToolbarLayout
applyViewPortScale
bringPanelToFront
changeBoundsOrigin
changeOrigin
changeOriginToBottom
changeOriginToTop
clearHighlightedSegments
cloneAnnotation
close
closePanel
collectQuadPoints
confirm
convertPdfRectToWindowCoordinates
dateToPdfString
deactivatePageRegionSelection
deletePage
dispose
download
execCopyAction
execCutAction
execDeleteAction
execPasteAction
executeTask
findAnnotations
findField
findFields
getDocumentInformation
getDocumentSecurity
getEvent
getPageLocation
getPageRotation
getPageSize
getPageTabs
getPanelState
getSelectedText
getSharedDocuments
getSignatureInfo
getViewPort
goBack
goForward
goToFirstPage
goToLastPage
goToNextPage
goToPage
goToPageNumber
goToPrevPage
hideSecondToolbar
highlight
highlightTextSegment
invalidate
isFontUrlRegistered
layoutPanels
load
loadAndScrollPageIntoView
loadDocumentList
loadSharedDocuments
lockAnnotation
markAnnotationLayerDirty
newDocument
newPage
open
openLocalFile
openPanel
openSharedDocument
openSharedDocumentByIndex
openSharedDocumentByName
pdfStringToDate
print
redoChanges
redrawTouchedAnnotations
registerFallbackFont
registerFont
removeAnnotation
removeViewAreaStyle
repaint
repaintTextLayer
resetDocument
resetForm
resolvePageIndex
resolveRegisteredFonts
save
saveAsImages
saveChanges
scrollAnnotationIntoView
scrollPageIntoView
search
selectAnnotation
setActiveBottomPanel
setActiveTopPanel
setAnnotationBounds
setPageRotation
setPageSize
setPageTabs
setTheme
showAnnotationFocusOutline
showFormFiller
showMessage
showPanel
showPdfOrganizer
showSecondToolbar
showSignTool
submitForm
togglePanel
toggleSearchUI
triggerEvent
undoChanges
unlockAnnotation
unselectAnnotation
updateAnnotation
updateAnnotations
updateGroupFieldValue
updatePanel
validateForm

### Accessors

i18n
activatedEditorMode
annotations
backgroundColor
beforeUnloadConfirmation
canEditDocument
currentUserName
dataLoader
document
editMode
errorHandler
eventBus
fileData
fileName
fileSize
fileUrl
fingerprint
gcPdfVersion
hasChanges
hasCopyData
hasDocument
hasForm
hasPersistentConnection
hasRedoChanges
hasReplyTool
hasUndoChanges
hideAnnotations
highlightManager
hostElement
isDocumentShared
isEditModeSticked
isInEditorMode
jsFormatFunctions
language
layoutMode
leftSidebar
logLevel
modificationsState
onAfterAddAnnotation
onAfterOpen
onAfterRemoveAnnotation
onAfterUpdateAnnotation
onBeforeAddAnnotation
onBeforeOpen
onBeforeRemoveAnnotation
onBeforeUpdateAnnotation
onDocumentOpen
onDocumentProgress
onDocumentViewOpen
onError
onThemeChanged
onViewerStateChange
optionalContentConfig
options
pageCount
pageDecoration
pageDisplay
pageIndex
requiredSupportApiVersion
rightSidebar
rotation
scrollView
searcher
secondToolbar
secondToolbarLayout
signToolStorage
storage
structureTree
supportApi
supportApiVersion
tableDataExtractor
tempOnPanelChange
toolbarLayout
undoCount
undoIndex
undoState
version
viewMode
viewerPreferences
viewerState
xfdfManager
zoomMode
zoomTarget
zoomValue

### Constructors

constructor

## Properties

### `Static` LicenseKey

LicenseKey: string

Product license key.

### Example

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

### registeredFonts

registeredFonts: { [fontName: string]: { clientOnly?: boolean; embedMode?: FontEmbedMode; format: FontFormat | undefined; resolved?: boolean; url: string } } = {}

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.

#### Type declaration

- ##### [fontName: string]: { clientOnly?: boolean; embedMode?: FontEmbedMode; format: FontFormat | undefined; resolved?: boolean; url: string }

  - ##### `Optional` clientOnly?: boolean

  - ##### `Optional` embedMode?: FontEmbedMode

  - ##### format: FontFormat | undefined

  - ##### `Optional` resolved?: boolean

  - ##### url: string

### toggleSidebar

toggleSidebar: ((show?: boolean) => void)

#### Type declaration

- - (show?: boolean): void

  - Sets of toggles sidebar's panels visibility

    #### Parameters

    - ##### `Optional` show: boolean

    #### Returns void

Inherited from ReportViewer.toggleSidebar

## Methods

### `Static` findControl

- findControl(selector: string | HTMLElement): undefined | GcPdfViewer

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

  ### Example

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

  #### Parameters

  - ##### selector: string | HTMLElement

  #### Returns undefined | GcPdfViewer

### activatePageRegionSelection

- activatePageRegionSelection(onRegionSelected: PageRegionSelectedCallback, args?: { enableAutoScroll?: boolean }): 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.

  ### Returns

  The instance of the page region selector.

  #### Parameters

  - ##### onRegionSelected: PageRegionSelectedCallback

    The callback function invoked when a region is selected.

  - ##### `Optional` args: { enableAutoScroll?: boolean }

    Optional configuration parameters.

    - ##### `Optional` enableAutoScroll?: boolean

      Whether to enable automatic scrolling when the cursor reaches the edges of the viewport.

  #### Returns IPageRegionSelector

### addAnnotation

- addAnnotation(pageIndex: number, annotation: AnnotationBase, args?: { skipPageRefresh?: boolean }): 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.

  ### Returns

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

  ### Example

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

  ### Example

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

  ### Example

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

  #### Parameters

  - ##### pageIndex: number

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

  - ##### annotation: AnnotationBase

    The annotation object to be added.

  - ##### `Optional` args: { skipPageRefresh?: boolean }

    Additional optional arguments, such as skipping page refresh.

    - ##### `Optional` skipPageRefresh?: boolean

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

### addAnnotationEditorPanel

- addAnnotationEditorPanel(): PanelHandle

- Add annotation editor panel. Requires SupportApi.

  ### Example

      viewer.addAnnotationEditorPanel();

  #### Returns PanelHandle

### addArticlesPanel

- addArticlesPanel(): PanelHandle

- Add articles panel.

  ### Example

      viewer.addArticlesPanel();

  #### Returns PanelHandle

### addAttachmentsPanel

- addAttachmentsPanel(): PanelHandle

- Add attachments panel.

  ### Example

      viewer.addAttachmentsPanel();

  #### Returns PanelHandle

### addDefaultPanels

- addDefaultPanels(): PanelHandle[]

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

  ### Example

      viewer.addDefaultPanels();

  #### Returns PanelHandle[]

### addDocumentListPanel

- addDocumentListPanel(documentListUrl?: string | DocumentListItem[]): 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"]

  ### Example

  Example content for the documentslist.json file:

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

  ### Example

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

  ### Example

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

  ### Example

      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"}]');

  #### Parameters

  - ##### `Optional` documentListUrl: string | DocumentListItem[]

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

  #### Returns PanelHandle

### addFormEditorPanel

- addFormEditorPanel(): PanelHandle

- Add form editor panel. Requires SupportApi.

  ### Example

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

  #### Returns PanelHandle

### addLayersPanel

- addLayersPanel(): PanelHandle

- Add optional content layers panel.

  ### Example

      viewer.addLayersPanel();

  #### Returns PanelHandle

### addOutlinePanel

- addOutlinePanel(): PanelHandle

- Add outline panel.

  ### Example

      viewer.addOutlinePanel();

  #### Returns PanelHandle

### addReplyTool

- addReplyTool(sidebarState?: GcRightSidebarState): 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.

  ### Example

      viewer.addReplyTool('expanded');

  #### Parameters

  - ##### sidebarState: GcRightSidebarState = 'collapsed'

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

  #### Returns void

### addSearchPanel

- addSearchPanel(): PanelHandle

- Add Search panel.

  ### Example

      viewer.addSearchPanel();

  #### Returns PanelHandle

### addSharedDocumentsPanel

- addSharedDocumentsPanel(): PanelHandle

- Add a panel with a list of shared documents.

  ### Example

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

  #### Returns PanelHandle

### addStamp

- addStamp(imageData: null | Uint8Array, args: { convertToContent?: boolean; fileId: string; fileName?: string; pageIndex: number; rect: number[]; rotate?: number; select?: boolean; subject?: string }): Promise<{ annotation: AnnotationBase; pageIndex: number }>

- Add stamp annotation.

  ### Example

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

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

  #### Parameters

  - ##### imageData: null | Uint8Array

    Uint8Array, binary image data.

  - ##### args: { convertToContent?: boolean; fileId: string; fileName?: string; pageIndex: number; rect: number[]; rotate?: number; select?: boolean; subject?: string }

    - ##### `Optional` convertToContent?: boolean

    - ##### fileId: string

    - ##### `Optional` fileName?: string

    - ##### pageIndex: number

    - ##### rect: number[]

    - ##### `Optional` rotate?: number

    - ##### `Optional` select?: boolean

    - ##### `Optional` subject?: string

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

### addStickyNote

- addStickyNote(position: GcSelectionPoint): void

- Add sticky note to the document. Requires SupportApi.

  ### Example

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

  #### Parameters

  - ##### position: GcSelectionPoint

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

  #### Returns void

### addTableExtractionPanel

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

  ### Example

      viewer.addTableExtractionPanel();

  ### Returns

  A handle to the created panel.

  #### Returns PanelHandle

### addThumbnailsPanel

- addThumbnailsPanel(): PanelHandle

- Add Thumbnails panel

  ### Example

      viewer.addThumbnailsPanel();

  #### Returns PanelHandle

### addViewAreaStyle

- addViewAreaStyle(cssText: string, styleId?: string): string

- Adds a css style to the view area.

  ### Returns

  style element identifier.

  ### Example

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

  #### Parameters

  - ##### cssText: string

  - ##### `Optional` styleId: string

  #### Returns string

### applyOptions

- applyOptions(): void

- Call this method in order to apply changed options.

  ### Example

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

  #### Returns void

### applyToolbarLayout

- applyToolbarLayout(): void

- Call this method in order to apply changes in toolbarLayout.

  ### Example

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

  ### Example

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

  #### Returns void

### applyViewPortScale

- applyViewPortScale(rectOrCoords: number | IGcRect | number[] | [number, number, number, number], pageIndex: number, srcOrigin??: "TopLeft" | "BottomLeft"): 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.

  ### Returns

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

  ### Example

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

  ### Example

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

  #### Parameters

  - ##### rectOrCoords: number | IGcRect | number[] | [number, number, number, number]

    The rectangle object or array of coordinates to scale.

  - ##### pageIndex: number

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

  - ##### `Optional` srcOrigin: "TopLeft" | "BottomLeft" = "BottomLeft"

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

  #### Returns number | IGcRect | [number, number, number, number]

### bringPanelToFront

- bringPanelToFront(panelKey: PanelHandle): void

- ### Deprecated

  use expandPanel() instead

  #### Parameters

  - ##### panelKey: PanelHandle

  #### Returns void

  Inherited from ReportViewer.bringPanelToFront

### changeBoundsOrigin

- changeBoundsOrigin(pageIndex: number, bounds: number[], srcOrigin: "TopLeft" | "BottomLeft", destOrigin: "TopLeft" | "BottomLeft", normalize?: boolean): number[]

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

  ### Example

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

  ### Example

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

  #### Parameters

  - ##### pageIndex: number

    Page index (Zero based).

  - ##### bounds: number[]

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

  - ##### srcOrigin: "TopLeft" | "BottomLeft"

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

  - ##### destOrigin: "TopLeft" | "BottomLeft"

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

  - ##### normalize: boolean = true

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

  #### Returns number[]

### changeOrigin

- changeOrigin(pageIndex: number, y: number, srcOrigin: "TopLeft" | "BottomLeft", destOrigin: "TopLeft" | "BottomLeft"): number

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

  ### Example

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

  #### Parameters

  - ##### pageIndex: number

  - ##### y: number

  - ##### srcOrigin: "TopLeft" | "BottomLeft"

  - ##### destOrigin: "TopLeft" | "BottomLeft"

  #### Returns number

### changeOriginToBottom

- changeOriginToBottom(pageIndex: any, y: any): number

- Converts the origin of the Y coordinate to the bottom.

  ### Example

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

  #### Parameters

  - ##### pageIndex: any

  - ##### y: any

  #### Returns number

### changeOriginToTop

- changeOriginToTop(pageIndex: any, y: any): number

- Converts the origin of the Y coordinate to the top.

  ### Example

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

  #### Parameters

  - ##### pageIndex: any

  - ##### y: any

  #### Returns number

### clearHighlightedSegments

- clearHighlightedSegments(pageIndex: number | number[], args?: HighlightBehaviorArgs): 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.

  ### Example

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

  ### Example

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

  #### Parameters

  - ##### pageIndex: number | number[]

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

  - ##### `Optional` args: HighlightBehaviorArgs

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

  #### Returns void

### cloneAnnotation

- cloneAnnotation(annotation: AnnotationBase): AnnotationBase

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

  ### Example

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

  #### Parameters

  - ##### annotation: AnnotationBase

    Annotation to clone.

  #### Returns AnnotationBase

### close

- close(): Promise<void>

- Closes the currently open document.

  ### Example

      await viewer.close();

  #### Returns Promise<void>

### closePanel

- closePanel(panelHandleOrId?: string | PanelHandle): void

- Closes the side panel.

  ### Example

      viewer.closePanel();

  #### Parameters

  - ##### `Optional` panelHandleOrId: string | PanelHandle

    Optional. Panel handle or panel id to close.

  #### Returns void

### collectQuadPoints

- collectQuadPoints(paintedBoxes: PaintedBoxInfo[]): TextPartsQuadPoints

- Collects quadrilateral points based on the provided PaintedBoxInfo array.

  ### Returns

  - 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 }]

  #### Parameters

  - ##### paintedBoxes: PaintedBoxInfo[]

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

  #### Returns TextPartsQuadPoints

### confirm

- confirm(confirmationText?: string | Element, level?: "error" | "info" | "warning", title?: string, buttons?: ConfirmButton[]): Promise<boolean | ConfirmButton>

- Display confirmation dialog.

  ### Example

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

  #### Parameters

  - ##### `Optional` confirmationText: string | Element

  - ##### `Optional` level: "error" | "info" | "warning"

  - ##### `Optional` title: string

  - ##### `Optional` buttons: ConfirmButton[]

  #### Returns Promise<boolean | ConfirmButton>

### convertPdfRectToWindowCoordinates

- convertPdfRectToWindowCoordinates(pageIndex: number, rect: number[] | Rect): number[]

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

  ### Returns

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

  #### Parameters

  - ##### pageIndex: number

    Index of the PDF page.

  - ##### rect: number[] | 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.

  #### Returns number[]

### dateToPdfString

- dateToPdfString(input: string | number | Date | Moment): null | 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.

  ### Returns

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

  ### Example

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

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

  #### Parameters

  - ##### input: string | number | Date | Moment

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

  #### Returns null | string

### deactivatePageRegionSelection

- deactivatePageRegionSelection(): void

- Deactivates the page region selection mode.

  #### Returns void

### deletePage

- deletePage(pageIndex?: number): Promise<void>

- Delete page. Requires SupportApi.

  ### Example

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

  #### Parameters

  - ##### `Optional` pageIndex: number

    page index to delete.

  #### Returns Promise<void>

### dispose

- dispose(): void

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

  #### Returns void

  Overrides ReportViewer.dispose

### download

- download(fileName?: string): void

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

  ### Example

      viewer.download();

  #### Parameters

  - ##### `Optional` fileName: string

    the destination file name.

  #### Returns void

### execCopyAction

- execCopyAction(buffer?: CopyBufferData): Promise<boolean>

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

  ### Example

      viewer.execCopyAction();

  #### Parameters

  - ##### `Optional` buffer: CopyBufferData

    data to copy.

  #### Returns Promise<boolean>

### execCutAction

- execCutAction(buffer?: CopyBufferData): Promise<boolean>

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

  ### Example

      viewer.execCutAction();

  #### Parameters

  - ##### `Optional` buffer: CopyBufferData

    data to cut.

  #### Returns Promise<boolean>

### execDeleteAction

- execDeleteAction(buffer?: CopyBufferData): Promise<boolean>

- Execute Delete action (DEL shortcut). Requires SupportApi.

  ### Example

      viewer.execDeleteAction();

  #### Parameters

  - ##### `Optional` buffer: CopyBufferData

    data to delete.

  #### Returns Promise<boolean>

### execPasteAction

- execPasteAction(point?: GcSelectionPoint): Promise<boolean>

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

  ### Example

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

  #### Parameters

  - ##### `Optional` point: GcSelectionPoint

    insert position.

  #### Returns Promise<boolean>

### executeTask

- executeTask(task: ((callbacks: TaskCallbacks) => Promise<void>), settings?: TaskSettings): Promise<void>

- Starts long-running operation and displays progress window while operation is running.

  #### Parameters

  - ##### task: ((callbacks: TaskCallbacks) => Promise<void>)

    - - (callbacks: TaskCallbacks): Promise<void>

      - #### Parameters

        - ##### callbacks: TaskCallbacks

        #### Returns Promise<void>

  - ##### `Optional` settings: TaskSettings

  #### Returns Promise<void>

  Inherited from ReportViewer.executeTask

### findAnnotations

- findAnnotations(findString: string | number, findParams?: { findAll?: boolean; findField?: string; pageIndexConstraint?: number }): Promise<{ annotation: AnnotationBase; pageIndex: number }[]>

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

  ### Example

      // 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.');
      });

  ### Example

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

      });

  ### Returns

  Promise resolving to array of objects with pageIndex and annotation

  #### Parameters

  - ##### findString: string | number

    The search query string or number to find

  - ##### `Optional` findParams: { findAll?: boolean; findField?: string; pageIndexConstraint?: number }

    Search parameters. Default searches by 'id' without page constraint.

    - ##### `Optional` findAll?: boolean

      Whether to find all matches or just the first one

    - ##### `Optional` findField?: string

      Field to search in: 'id', 'title', 'contents', 'fieldName', or custom string

    - ##### `Optional` pageIndexConstraint?: number

      Zero-based page index to constrain search to specific page

  #### Returns Promise<{ annotation: AnnotationBase; pageIndex: number }[]>

### findField

- findField(fieldName: string): Promise<null | WidgetAnnotation>

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

  ### Example

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

  ### Returns

  Promise resolving to WidgetAnnotation with pageIndex property, or null if not found

  #### Parameters

  - ##### fieldName: string

    The name of the form field to find

  #### Returns Promise<null | WidgetAnnotation>

### findFields

- findFields(fieldName: string): Promise<WidgetAnnotation[]>

- Finds all form fields matching the specified field name. Useful for fields that appear multiple times (like radio buttons in a group).

  ### Example

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

  ### Example

      // Check fields on specific page
      const fields = await viewer.findFields("myField");
      const fieldsOnPage2 = fields.filter(field => field.pageIndex === 1);

  ### Returns

  Promise resolving to array of WidgetAnnotations with pageIndex property

  #### Parameters

  - ##### fieldName: string

    The name of the form field(s) to find

  #### Returns Promise<WidgetAnnotation[]>

### getDocumentInformation

- getDocumentInformation(): Promise<DocumentInformation>

- Gets meta data information for the current document.

  ### Example

      const docMetaInfo = await viewer.getDocumentInformation();

  #### Returns Promise<DocumentInformation>

### getDocumentSecurity

- getDocumentSecurity(): Promise<DocumentSecuritySummary>

- Gets security information for the current document.

  ### Example

      const docSecurityInfo = await viewer.getDocumentSecurity();

  #### Returns Promise<DocumentSecuritySummary>

### getEvent

- getEvent(eventName: EventName): EventFan<any>

- Get event object.

  ### Example

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

  #### Parameters

  - ##### eventName: EventName

  #### Returns EventFan<any>

### getPageLocation

- getPageLocation(pageIndex: number): { x: number; y: number }

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

  ### Example

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

  ### Example

      // 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");

  ### Example

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

  #### Parameters

  - ##### pageIndex: number

  #### Returns { x: number; y: number }

  - ##### x: number

  - ##### y: number

### getPageRotation

- getPageRotation(pageIndex: number, includeViewRotation?: boolean): number

- Get the page rotation value.

  ### Example

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

  #### Parameters

  - ##### pageIndex: number

  - ##### includeViewRotation: boolean = true

    Include view rotation, default is true.

  #### Returns number

### getPageSize

- getPageSize(pageIndex: number, includeScale?: boolean): { height: number; width: number }

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

  ### Example

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

  #### Parameters

  - ##### pageIndex: number

    Page index (Zero based).

  - ##### `Optional` includeScale: boolean

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

  #### Returns { height: number; width: number }

  - ##### height: number

  - ##### width: number

### getPageTabs

- getPageTabs(pageIndex: number): undefined | "R" | "S" | "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 undefined | "R" | "S" | "C" | "A" | "W"

### getPanelState

- getPanelState(panelKey: PanelHandle): null | PanelSettings

- Gets the current panel state.

  #### Parameters

  - ##### panelKey: PanelHandle

  #### Returns null | PanelSettings

  Inherited from ReportViewer.getPanelState

### getSelectedText

- getSelectedText(): string

- Returns the contents of the text selection.

  ### Example

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

  #### Returns string

### getSharedDocuments

- getSharedDocuments(): Promise<null | SharedDocumentInfo[]>

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

  ### Example

      var sharedDocuments = await viewer.getSharedDocuments();

  #### Returns Promise<null | SharedDocumentInfo[]>

### getSignatureInfo

- getSignatureInfo(): Promise<SignatureInformation>

- Get information about signature used in document.

  ### Example

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

  #### Returns Promise<SignatureInformation>

### getViewPort

- getViewPort(pageIndex: number): PageViewport

- Returns PDF page view port information.

  ### Returns

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

  ### Example

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

  #### Parameters

  - ##### pageIndex: number

    Page index (Zero based).

  #### Returns PageViewport

### goBack

- goBack(): void

- Move back in the document history.

  #### Returns void

### goForward

- goForward(): void

- Move forward in the document history.

  #### Returns void

### goToFirstPage

- goToFirstPage(): void

- Go to the first page.

  ### Example

      viewer.goToFirstPage();

  #### Returns void

### goToLastPage

- goToLastPage(): void

- Go to the last page.

  ### Example

      viewer.goToLastPage();

  #### Returns void

### goToNextPage

- goToNextPage(): void

- Go to the next page.

  ### Example

      viewer.goToNextPage();

  #### Returns void

### goToPage

- goToPage(pageIndex: number): void

- Go to the page with the specific page index.

  ### Since

  2.3.1

  ### Example

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

  #### Parameters

  - ##### pageIndex: number

  #### Returns void

### goToPageNumber

- goToPageNumber(pageNumber: number): void

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

  ### Deprecated

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

  ### Example

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

  #### Parameters

  - ##### pageNumber: number

  #### Returns void

### goToPrevPage

- goToPrevPage(): void

- Go to the previous page.

  ### Example

      viewer.goToPrevPage();

  #### Returns void

### hideSecondToolbar

- hideSecondToolbar(): void

- Hide second toolbar.

  ### Example

      viewer.hideSecondToolbar();

  #### Returns void

### highlight

- highlight(result: SearchResult): Promise<void>

- Navigates to a page containing the result and highlights found text.

  #### Parameters

  - ##### result: SearchResult

  #### Returns Promise<void>

  Inherited from ReportViewer.highlight

### highlightTextSegment

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

- Highlights a portion of text on a specified page.

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

  ### Returns

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

  ### Example

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

  ### Example

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

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

  - ##### `Optional` args: HighlightArgs = {}

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

  #### Returns Promise<boolean>

### invalidate

- invalidate(): void

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

  ### Example

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

  #### Returns void

### isFontUrlRegistered

- isFontUrlRegistered(url: any): boolean

- Checks if a font with the given URL is registered.

  ### Returns

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

  #### Parameters

  - ##### url: any

    The URL of the font to check.

  #### Returns boolean

### layoutPanels

- layoutPanels(layout: string[]): void

- Orders and filters panel items. '*' indicates "the rest of panels". 'sep'/'separator' indicated menu separator.

  #### Parameters

  - ##### layout: string[]

  #### Returns void

  Inherited from ReportViewer.layoutPanels

### load

- load(moniker: DocumentMoniker, token?: CancellationToken): Promise<LoadResult>

- Loads the report (no UI), so caller has to process load result and report error if any.

  #### Parameters

  - ##### moniker: DocumentMoniker

  - ##### `Optional` token: CancellationToken

  #### Returns Promise<LoadResult>

  Inherited from ReportViewer.load

### loadAndScrollPageIntoView

- loadAndScrollPageIntoView(pageIndex: number, destArray?: any[], scrollIntoViewOptions?: boolean | ScrollPageIntoViewOptions): Promise<boolean>

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

  ### Returns

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

  ### Example

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

  #### Parameters

  - ##### pageIndex: number

    Destination page index.

  - ##### `Optional` 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

  - ##### `Optional` scrollIntoViewOptions: boolean | ScrollPageIntoViewOptions

    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"}.

  #### Returns Promise<boolean>

### loadDocumentList

- loadDocumentList(documentListUrl?: string | DocumentListItem[]): void

- Load an updated document list into document list panel.

  ### Example

      viewer.loadDocumentList();

  ### Example

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

  #### Parameters

  - ##### `Optional` documentListUrl: string | DocumentListItem[]

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

  #### Returns void

### loadSharedDocuments

- loadSharedDocuments(): void

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

  ### Example

      viewer.loadSharedDocuments();

  #### Returns void

### lockAnnotation

- lockAnnotation(id: string | AnnotationBase): Promise<null | AnnotationBase>

- Lock annotation for editing.

  #### Parameters

  - ##### id: string | AnnotationBase

    annotation id

  #### Returns Promise<null | AnnotationBase>

### markAnnotationLayerDirty

- markAnnotationLayerDirty(pageIndex: number | number[]): 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.

  ### Example

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

  #### Parameters

  - ##### pageIndex: number | number[]

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

  #### Returns any

### newDocument

- newDocument(params?: string | { confirm?: boolean; fileName?: string }): Promise<null | LoadResult>

- Creates and opens a new blank document. Requires SupportApi.

  ### Example

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

  #### Parameters

  - ##### `Optional` params: string | { confirm?: boolean; fileName?: string }

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

  #### Returns Promise<null | LoadResult>

### newPage

- newPage(params?: { height?: number; pageIndex?: number; width?: number }): Promise<void>

- Adds a blank page to the document. Requires SupportApi.

  ### Example

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

  #### Parameters

  - ##### `Optional` params: { height?: number; pageIndex?: number; width?: number }

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

    - ##### `Optional` height?: number

    - ##### `Optional` pageIndex?: number

    - ##### `Optional` width?: number

  #### Returns Promise<void>

### open

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

- Opens a document for viewing.

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

  ### Returns

  A promise resolving to the result of loading the document.

  ### Example

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

  ### Example

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

  ### Example

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

  ### Example

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

  #### Parameters

  - ##### `Optional` 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.

  - ##### `Optional` openParameters: OpenParameters

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

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

  #### Returns Promise<LoadResult>

  Overrides ReportViewer.open

### openLocalFile

- openLocalFile(): any

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

  ### Example

      viewer.openLocalFile();

  #### Returns any

### openPanel

- openPanel(panelHandleOrId: string | PanelHandle): void

- Opens the side panel.

  ### Example

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

  #### Parameters

  - ##### panelHandleOrId: string | PanelHandle

    Panel handle or panel id to open.

  #### Returns void

### openSharedDocument

- openSharedDocument(sharedDocumentId: string): Promise<null | OpenDocumentInfo>

- Open shared document by it's id.

  ### Example

  Open shared document using document index:

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

  ### Example

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

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

  #### Parameters

  - ##### sharedDocumentId: string

    unique shared document identifier.

  #### Returns Promise<null | OpenDocumentInfo>

### openSharedDocumentByIndex

- openSharedDocumentByIndex(sharedDocIndex: number): Promise<null | OpenDocumentInfo>

- Open shared document using document index.

  ### Example

  Open second shared document:

      viewer.openSharedDocumentByIndex(1);

  #### Parameters

  - ##### sharedDocIndex: number

  #### Returns Promise<null | OpenDocumentInfo>

### openSharedDocumentByName

- openSharedDocumentByName(fileName: string): Promise<null | OpenDocumentInfo>

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

  ### Example

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

  #### Parameters

  - ##### fileName: string

  #### Returns Promise<null | OpenDocumentInfo>

### pdfStringToDate

- pdfStringToDate(input?: string | Date): null | 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.

  ### Returns

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

  ### Example

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

  #### Parameters

  - ##### `Optional` input: string | Date

    The PDF date string to convert.

  #### Returns null | Date

### print

- print(): void

- Opens the browser's print document dialog box.

  ### Example

      viewer.print();

  #### Returns void

### redoChanges

- redoChanges(): void

- Redo document changes. Requires SupportApi.

  ### Example

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

  #### Returns void

### redrawTouchedAnnotations

- redrawTouchedAnnotations(): Promise<void>

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

  ### Async

  ### Returns

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

  ### Throws

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

  #### Returns Promise<void>

### registerFallbackFont

- registerFallbackFont(fontNameOrUrl: string, url?: string, args?: FontFormat | { clientOnly?: boolean; displayName?: string; format?: FontFormat }): 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".

  ### Example

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

  ### Example

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

  ### Example

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

  #### Parameters

  - ##### fontNameOrUrl: string

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

  - ##### `Optional` url: string

    The URL of the fallback font file.

  - ##### `Optional` args: FontFormat | { clientOnly?: boolean; displayName?: string; format?: FontFormat }

    Optional parameters for font registration.

  #### Returns void

### registerFont

- registerFont(fontNameOrUrl: string, url?: string, args?: FontFormat | FontRegistrationOptions): 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.

  ### Example

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

  ### Example

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

  ### Example

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

  ### Example

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

  ### Example

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

  ### Example

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

  #### Parameters

  - ##### fontNameOrUrl: string

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

  - ##### `Optional` url: string

    The URL of the font file.

  - ##### `Optional` args: FontFormat | FontRegistrationOptions

    Optional parameters for font registration.

  #### Returns void

### removeAnnotation

- removeAnnotation(pageIndex: number, annotationId: string, args?: { skipPageRefresh?: boolean }): Promise<boolean>

- Remove annotation from document. Requires SupportApi.

  ### Example

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

  #### Parameters

  - ##### pageIndex: number

  - ##### annotationId: string

  - ##### `Optional` args: { skipPageRefresh?: boolean }

    - ##### `Optional` skipPageRefresh?: boolean

  #### Returns Promise<boolean>

### removeViewAreaStyle

- removeViewAreaStyle(id: string): boolean

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

  ### Example

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

  #### Parameters

  - ##### id: string

    style element identifier.

  #### Returns boolean

### repaint

- repaint(indicesToRepaint?: number[], options?: { repaintOnVisible?: boolean }): 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.

  ### Throws

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

  ### Example

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

  ### Example

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

  ### Example

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

  #### Parameters

  - ##### `Optional` indicesToRepaint: number[]

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

  - ##### options: { repaintOnVisible?: boolean } = ...

    (Optional) Additional options for repaint behavior.

    - ##### `Optional` repaintOnVisible?: boolean

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

  #### Returns void

### repaintTextLayer

- repaintTextLayer(indicesToRepaint?: number[]): void

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

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

  ### Example

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

  ### Example

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

  #### Parameters

  - ##### `Optional` 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

### resetDocument

- resetDocument(): Promise<void>

- Resets report and cancel current session if any.

  #### Returns Promise<void>

  Inherited from ReportViewer.resetDocument

### resetForm

- resetForm(): void

- Reset form values.

  #### Returns void

### resolvePageIndex

- resolvePageIndex(pageRef: any): Promise<null | number>

- Resolve page index using PDF page reference.

  ### Example

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

  #### Parameters

  - ##### pageRef: any

  #### Returns Promise<null | number>

### resolveRegisteredFonts

- resolveRegisteredFonts(): Promise<string[]>

- Resolves registered fonts by downloading their data and storing it.

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

  ### Returns

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

  #### Returns Promise<string[]>

### save

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

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

  ### Example

  Specify destination file name

      viewer.save('Test.pdf');

  #### Parameters

  - ##### `Optional` fileName: string

    Destination file name.

  - ##### `Optional` settings: SaveSettings

    Additional save settings.

  #### Returns Promise<boolean>

### saveAsImages

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

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

  ### Example

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

  ### Example

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

  #### Parameters

  - ##### `Optional` fileName: string

    optional, destination zip archive file name.

  - ##### `Optional` settings: SaveSettings

    Additional save settings.

  #### Returns Promise<boolean>

### saveChanges

- saveChanges(): Promise<boolean>

- Upload local changes to server. Requires SupportApi.

  ### Example

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

  #### Returns Promise<boolean>

### scrollAnnotationIntoView

- scrollAnnotationIntoView(pageIndexOrId: string | number, annotationOrScrollOptions?: string | ScrollPageIntoViewOptions | AnnotationBase, scrollOptions?: ScrollBehavior | ScrollPageIntoViewOptions): Promise<void>

- Scroll annotation into view.

  ### Example

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

  ### Example

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

  ### Example

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

  #### Parameters

  - ##### pageIndexOrId: string | number

  - ##### `Optional` annotationOrScrollOptions: string | ScrollPageIntoViewOptions | AnnotationBase

  - ##### `Optional` scrollOptions: ScrollBehavior | ScrollPageIntoViewOptions

  #### Returns Promise<void>

### scrollPageIntoView

- scrollPageIntoView(params: { allowNegativeOffset?: boolean; destArray?: any[]; pageNumber: number }): void

- Scrolls a page into view.

  ### Deprecated

  This method has been deprecated since v2.3.1.
  Use goToPage or scrollAnnotationIntoView instead.

  ### Example

      // Scroll to page 10.
      viewer.scrollPageIntoView({ pageNumber: 10 });

  ### Example

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

  #### Parameters

  - ##### params: { allowNegativeOffset?: boolean; destArray?: any[]; pageNumber: number }

    The scroll parameters.

    - ##### `Optional` allowNegativeOffset?: boolean

      Whether to allow negative page offsets.

    - ##### `Optional` 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

### search

- search(__namedParameters: SearchOptions, resultFn: ((result: SearchResult) => void), progressFn?: ((progress: { pageCount: null | number; pageIndex: number }) => void), cancel?: CancellationToken): Promise<SearchStatus>

- Searches currently opened document for the text.

  #### Parameters

  - ##### __namedParameters: SearchOptions

  - ##### resultFn: ((result: SearchResult) => void)

    - - (result: SearchResult): void

      - #### Parameters

        - ##### result: SearchResult

        #### Returns void

  - ##### `Optional` progressFn: ((progress: { pageCount: null | number; pageIndex: number }) => void)

    - - (progress: { pageCount: null | number; pageIndex: number }): void

      - #### Parameters

        - ##### progress: { pageCount: null | number; pageIndex: number }

          - ##### pageCount: null | number

          - ##### pageIndex: number

        #### Returns void

  - ##### `Optional` cancel: CancellationToken

  #### Returns Promise<SearchStatus>

  Inherited from ReportViewer.search

### selectAnnotation

- selectAnnotation(pageIndex: string | number, annotation?: string | AnnotationBase): Promise<boolean>

- Select the annotation to edit. Requires SupportApi.

  ### Example

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

  ### Example

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

  #### Parameters

  - ##### pageIndex: string | number

    Page index (zero based) or annotation id.

  - ##### `Optional` annotation: string | AnnotationBase

    Annotation id or annotation object itself.

  #### Returns Promise<boolean>

### setActiveBottomPanel

- setActiveBottomPanel(id: null | string): void

- Updates activeBottomPanelId for to show/hide panel with setting.location = 'bottom' (id = null to hide panel)

  #### Parameters

  - ##### id: null | string

  #### Returns void

  Inherited from ReportViewer.setActiveBottomPanel

### setActiveTopPanel

- setActiveTopPanel(id: null | string): void

- Updates activeTopPanelId for to show/hide panel with setting.location = 'top' (id = null to hide panel)

  #### Parameters

  - ##### id: null | string

  #### Returns void

  Inherited from ReportViewer.setActiveTopPanel

### setAnnotationBounds

- setAnnotationBounds(annotationId: string, bounds: { h: undefined | number; w: undefined | number; x: undefined | number; y: undefined | number }, origin?: "TopLeft" | "BottomLeft", select?: boolean): Promise<void>

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

  ### Example

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

  #### Parameters

  - ##### annotationId: string

    annotation object or annotation id.

  - ##### bounds: { h: undefined | number; w: undefined | number; x: undefined | number; y: undefined | number }

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

    - ##### h: undefined | number

    - ##### w: undefined | number

    - ##### x: undefined | number

    - ##### y: undefined | number

  - ##### origin: "TopLeft" | "BottomLeft" = 'TopLeft'

    Source coordinate system origin. Default is TopLeft

  - ##### select: boolean = false

    Select annotation after editing. Default is false.

  #### Returns Promise<void>

### setPageRotation

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

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

  ### Example

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

  #### Parameters

  - ##### pageIndex: number

  - ##### rotation: number

  - ##### viewRotationIncluded: boolean = true

  #### Returns Promise<boolean>

### setPageSize

- setPageSize(pageIndex: number, size: { height: number; width: number }): Promise<boolean>

- Set page size. Requires SupportApi.

  ### Example

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

  #### Parameters

  - ##### pageIndex: number

  - ##### size: { height: number; width: number }

    - ##### height: number

    - ##### width: number

  #### Returns Promise<boolean>

### setPageTabs

- setPageTabs(pageIndex: number, tabs: undefined | "R" | "S" | "C" | "A" | "W"): 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: undefined | "R" | "S" | "C" | "A" | "W"

  #### Returns void

### setTheme

- setTheme(theme?: string): void

- Set active viewer theme.

  ### Example

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

  #### Parameters

  - ##### `Optional` theme: string

    theme name, specified in themes option.

  #### Returns void

### showAnnotationFocusOutline

- showAnnotationFocusOutline(annotationId: any, animationDelay??: number, color?: string): 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.

  - ##### `Optional` animationDelay: number = 2000

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

  - ##### `Optional` color: string

  #### Returns void

### showFormFiller

- showFormFiller(): void

- Displays 'Form filler' dialog.

  ### Example

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

  #### Returns void

### showMessage

- showMessage(message: string, details?: string, severity?: "error" | "info" | "warn" | "debug", autoHideTimeout?: number): void

- Shows the message for the user.

  ### Example

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

  #### Parameters

  - ##### message: string

  - ##### details: string = ""

  - ##### severity: "error" | "info" | "warn" | "debug" = "info"

  - ##### `Optional` autoHideTimeout: number

  #### Returns void

### showPanel

- showPanel(panelKey: PanelHandle, visible?: boolean): void

- Updates the panel visibility.

  #### Parameters

  - ##### panelKey: PanelHandle

  - ##### `Optional` visible: boolean

  #### Returns void

  Inherited from ReportViewer.showPanel

### showPdfOrganizer

- showPdfOrganizer(): PdfOrganizerDialog

- Show PDF Organizer dialog.

  ### Example

      viewer.showPdfOrganizer();

  #### Returns PdfOrganizerDialog

### showSecondToolbar

- showSecondToolbar(toolbarKey: string): Promise<void>

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

  ### Example

      viewer.showSecondToolbar("draw-tools");

  #### Parameters

  - ##### toolbarKey: string

  #### Returns Promise<void>

### showSignTool

- showSignTool(preferredSettings?: SignToolSettings): void

- Displays the 'Add Signature' dialog. Requires SupportApi.

  ### Example

      viewer.showSignTool();

  #### Parameters

  - ##### `Optional` preferredSettings: SignToolSettings

    Optional. These settings will take priority over signSettings option.

  #### Returns void

### submitForm

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

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

  ### Example

  Submit form to a web server using absolute URL:

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

  ### Example

  Submit form to a web server using relative URL:

      viewer.submitForm("/CustomFormHandler");

  ### Example

  Submit form to an email address:

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

  #### Parameters

  - ##### submitUrl: string

    Destination URI.

  - ##### `Optional` options: SubmitFormOptions

    Optional, submit form options.

  #### Returns Promise<void>

### togglePanel

- togglePanel(handle?: string | PanelHandle): 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

  - ##### `Optional` handle: string | PanelHandle

    The panel handle or panel ID to toggle.

  #### Returns void

### toggleSearchUI

- toggleSearchUI(expand?: boolean, replaceMode??: boolean): 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.

  ### Example

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

  ### Example

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

  ### Example

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

  ### Example

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

  #### Parameters

  - ##### `Optional` expand: boolean

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

  - ##### `Optional` replaceMode: boolean = false

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

  #### Returns void

### triggerEvent

- triggerEvent(eventName: EventName, args?: EventArgs | BeforeOpenEventArgs | ThemeChangedEventArgs): void

- Trigger event.

  ### Example

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

  #### Parameters

  - ##### eventName: EventName

  - ##### `Optional` args: EventArgs | BeforeOpenEventArgs | ThemeChangedEventArgs

  #### Returns void

### undoChanges

- undoChanges(): void

- Undo document changes. Requires SupportApi.

  ### Example

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

  #### Returns void

### unlockAnnotation

- unlockAnnotation(id: string | AnnotationBase): Promise<null | AnnotationBase>

- Unlock annotation for editing.

  #### Parameters

  - ##### id: string | AnnotationBase

    annotation id

  #### Returns Promise<null | AnnotationBase>

### unselectAnnotation

- unselectAnnotation(): any

- Reset annotation selection. Requires SupportApi.

  ### Example

      viewer.unselectAnnotation();

  #### Returns any

### updateAnnotation

- updateAnnotation(pageIndex: number, annotation: AnnotationBase, args?: { changedPageIndex?: number; prevPageIndex?: number; skipPageRefresh?: boolean }): Promise<{ annotation: AnnotationBase; pageIndex: number }>

- Update annotation. Requires SupportApi.

  ### Returns

  Promise, resolved by updated annotation object.

  ### Example

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

  #### Parameters

  - ##### pageIndex: number

  - ##### annotation: AnnotationBase

  - ##### args: { changedPageIndex?: number; prevPageIndex?: number; skipPageRefresh?: boolean } = {}

    - ##### `Optional` changedPageIndex?: number

    - ##### `Optional` prevPageIndex?: number

    - ##### `Optional` skipPageRefresh?: boolean

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

### updateAnnotations

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

- Update multiple annotations at the same time. Requires SupportApi.

  ### Returns

  Promise, resolved by updated annotation objects.

  ### Example

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

  #### Parameters

  - ##### pageIndex: number

  - ##### annotations: AnnotationBase | AnnotationBase[]

  - ##### `Optional` args: { skipPageRefresh?: boolean }

    - ##### `Optional` skipPageRefresh?: boolean

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

### updateGroupFieldValue

- updateGroupFieldValue(fieldName: string, newValue: string, args?: { propertyName?: string; skipPageRefresh?: boolean }): Promise<boolean>

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

  ### Returns

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

  ### Example

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

  ### Example

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

  #### Parameters

  - ##### fieldName: string

    Grouped radio buttons field name

  - ##### newValue: string

    New fieldValue

  - ##### `Optional` args: { propertyName?: string; skipPageRefresh?: boolean }

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

    - ##### `Optional` propertyName?: string

    - ##### `Optional` skipPageRefresh?: boolean

  #### Returns Promise<boolean>

### updatePanel

- updatePanel(panelKey: PanelHandle, settings: Partial<PanelSettings>): void

- Updates panel settings such as visibility, label or "enabled" status.

  #### Parameters

  - ##### panelKey: PanelHandle

  - ##### settings: Partial<PanelSettings>

  #### Returns void

  Inherited from ReportViewer.updatePanel

### validateForm

- validateForm(validator?: ((fieldValue: string | string[], field: WidgetAnnotation) => string | boolean), silent?: boolean, ignoreValidationAttrs?: boolean): string | boolean

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

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

  ### Example

      // Basic validation
      viewer.validateForm((fieldValue, field) => {
        return (fieldValue === "YES" || fieldValue === "NO") ? true : "Possible value is YES or NO.";
      });

  ### Example

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

  ### Returns

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

  #### Parameters

  - ##### `Optional` validator: ((fieldValue: string | string[], field: WidgetAnnotation) => 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.

    - - (fieldValue: string | string[], field: WidgetAnnotation): string | boolean

      - #### Parameters

        - ##### fieldValue: string | string[]

        - ##### field: WidgetAnnotation

        #### Returns string | boolean

  - ##### `Optional` 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.

  - ##### `Optional` 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

## Accessors

### `Static` i18n

- get i18n(): i18n

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

  ### Example

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

  #### Returns i18n

### activatedEditorMode

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

- Activated editor mode name.

  #### Returns undefined | "" | "SecondBar" | "FormEditor" | "AnnotationEdtor" | "Any"

### annotations

- get annotations(): Promise<{ annotations: AnnotationBase[]; pageIndex: number }[]>

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

  ### Returns

  A promise that resolves with annotations grouped by page.

  ### Example

  Basic usage:

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

  ### Example

  Filtering annotations by type:

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

  ### Example

  Accessing specific annotation properties:

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

  ### Example

  Error handling:

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

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

### backgroundColor

- get backgroundColor(): string

- Gets or sets viewer background color, default value = 'transparent'

  #### Returns string

  Inherited from ReportViewer.backgroundColor

### beforeUnloadConfirmation

- get beforeUnloadConfirmation(): boolean

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

  ### Example

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

  #### Returns boolean

- set beforeUnloadConfirmation(enable: boolean): void

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

  ### Example

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

  #### Parameters

  - ##### enable: boolean

  #### Returns void

### canEditDocument

- get canEditDocument(): boolean

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

  ### Example

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

  #### Returns boolean

### currentUserName

- get currentUserName(): string

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

  ### Example

      viewer.currentUserName = "John";

  ### Example

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

  #### Returns string

- set currentUserName(userName: string): 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.

  ### Example

      viewer.currentUserName = "John";

  ### Example

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

  #### Parameters

  - ##### userName: string

  #### Returns void

### dataLoader

- get dataLoader(): GcPdfViewerDataLoader

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

  #### Returns GcPdfViewerDataLoader

### document

- get document(): null | IDocumentView

- Gets the current document

  #### Returns null | IDocumentView

  Inherited from ReportViewer.document

### editMode

- get editMode(): EditMode

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

  ### Example

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

  #### Returns EditMode

- set editMode(mode: EditMode): void

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

  ### Example

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

  #### Parameters

  - ##### mode: EditMode

  #### Returns void

### errorHandler

- get errorHandler(): ErrorHandler

- Gets or sets callback that is invoked when an error occurs in the process of displaying the report

  #### Returns ErrorHandler

  Inherited from ReportViewer.errorHandler

### eventBus

- get eventBus(): IGCEventBus

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

  ### Example

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

  #### Returns IGCEventBus

### fileData

- get fileData(): null | Uint8Array

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

  ### Example

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

  #### Returns null | Uint8Array

### fileName

- get fileName(): string

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

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

  ### Example

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

  #### Returns string

### fileSize

- get fileSize(): Promise<number>

- Gets the PDF document file size in bytes.

  ### Example

      const fileSizeBytes = await viewer.fileSize;

  #### Returns Promise<number>

### fileUrl

- get fileUrl(): string

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

  ### Example

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

  #### Returns string

### fingerprint

- get fingerprint(): string

- An unique document identifier.

  ### Example

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

  #### Returns string

### gcPdfVersion

- get gcPdfVersion(): string

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

  #### Returns string

### hasChanges

- get hasChanges(): boolean

- Indicates whether the document has been modified by the user.

  ### Example

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

  #### Returns boolean

### hasCopyData

- get hasCopyData(): boolean

- Indicates whether the copy buffer contains any data.

  ### Example

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

  #### Returns boolean

### hasDocument

- get hasDocument(): boolean

- Indicates whether the document is loaded into view.

  ### Example

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

  #### Returns boolean

### hasForm

- get hasForm(): boolean

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

  ### Example

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

  #### Returns boolean

### hasPersistentConnection

- get hasPersistentConnection(): boolean

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

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

  #### Returns boolean

### hasRedoChanges

- get hasRedoChanges(): boolean

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

  ### Example

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

  #### Returns boolean

### hasReplyTool

- get hasReplyTool(): boolean

- Indicates whether the Reply Tool has been added.

  ### Example

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

  #### Returns boolean

### hasUndoChanges

- get hasUndoChanges(): boolean

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

  ### Example

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

  #### Returns boolean

### hideAnnotations

- get hideAnnotations(): boolean

- Determines whether the annotation layer is hidden.

  ### Example

      // Hide annotations:
      viewer.hideAnnotations = true;

  #### Returns boolean

- set hideAnnotations(hide: boolean): void

- Determines whether the annotation layer is hidden.

  ### Example

      // Hide annotations:
      viewer.hideAnnotations = true;

  #### Parameters

  - ##### hide: boolean

  #### Returns void

### highlightManager

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

  ### Returns

  The `IHighlightManager` instance for the document.

  ### Example

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

  #### Returns IHighlightManager

### hostElement

- get hostElement(): Element

- Gets the main window's host element

  #### Returns Element

  Inherited from ReportViewer.hostElement

### isDocumentShared

- get isDocumentShared(): boolean

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

  ### Example

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

  #### Returns boolean

### isEditModeSticked

- get isEditModeSticked(): boolean

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

  #### Returns boolean

### isInEditorMode

- get isInEditorMode(): boolean

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

  ### Example

      let isInEditorMode = viewer.isInEditorMode;

  ### Example

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

  #### Returns boolean

### jsFormatFunctions

- get jsFormatFunctions(): any

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

  ### Example

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

  #### Returns any

### language

- get 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

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

  #### Returns string

### layoutMode

- get layoutMode(): LayoutMode

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

  ### Default

  0

  ### Example

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

  #### Returns LayoutMode

- set layoutMode(mode: LayoutMode): void

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

  ### Default

  0

  ### Example

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

  #### Parameters

  - ##### mode: LayoutMode

  #### Returns void

### leftSidebar

- get leftSidebar(): LeftSidebar

- Left sidebar API.

  ### Example

      viewer.leftSidebar.hide();

  #### Returns LeftSidebar

### logLevel

- get logLevel(): LogLevel

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

  #### Returns LogLevel

- set logLevel(logLvel: LogLevel): void

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

  #### Parameters

  - ##### logLvel: LogLevel

  #### Returns void

### modificationsState

- get modificationsState(): ModificationsState

- Gets modifications state for active document. Requires SupportApi.

  ### Example

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

  #### Returns ModificationsState

### onAfterAddAnnotation

- get onAfterAddAnnotation(): EventFan<AfterAddAnnotationEventArgs>

- After add annotation event.

  ### Example

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

  #### Returns EventFan<AfterAddAnnotationEventArgs>

### onAfterOpen

- get onAfterOpen(): EventFan<EventArgs>

- The event raised when the user changes the viewer theme.

  ### Example

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

  #### Returns EventFan<EventArgs>

### onAfterRemoveAnnotation

- get onAfterRemoveAnnotation(): EventFan<AfterRemoveAnnotationEventArgs>

- After remove annotation event.

  ### Example

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

  #### Returns EventFan<AfterRemoveAnnotationEventArgs>

### onAfterUpdateAnnotation

- get onAfterUpdateAnnotation(): EventFan<AfterUpdateAnnotationEventArgs>

- After update annotation event.

  ### Example

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

  #### Returns EventFan<AfterUpdateAnnotationEventArgs>

### onBeforeAddAnnotation

- get onBeforeAddAnnotation(): EventFan<BeforeAddAnnotationEventArgs>

- Before add annotation event. The event is cancelable.

  ### Example

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

  ### Example

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

  #### Returns EventFan<BeforeAddAnnotationEventArgs>

### onBeforeOpen

- get onBeforeOpen(): EventFan<BeforeOpenEventArgs>

- Occurs immediately before the document opens.

  ### Example

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

  #### Returns EventFan<BeforeOpenEventArgs>

### onBeforeRemoveAnnotation

- get onBeforeRemoveAnnotation(): EventFan<BeforeRemoveAnnotationEventArgs>

- Before remove annotation event. The event is cancelable.

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

  #### Returns EventFan<BeforeRemoveAnnotationEventArgs>

### onBeforeUpdateAnnotation

- get onBeforeUpdateAnnotation(): EventFan<BeforeUpdateAnnotationEventArgs>

- Before update annotation event. The event is cancelable.

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

  #### Returns EventFan<BeforeUpdateAnnotationEventArgs>

### onDocumentOpen

- get onDocumentOpen(): EventFan<DocumentOpenedEventArgs>

- The event indicating document was changed (new document opened, drilled or "back to parent" is issued)

  #### Returns EventFan<DocumentOpenedEventArgs>

  Inherited from ReportViewer.onDocumentOpen

### onDocumentProgress

- get onDocumentProgress(): EventFan<ProgressMessage>

- The event indicating document load progress

  #### Returns EventFan<ProgressMessage>

  Inherited from ReportViewer.onDocumentProgress

### onDocumentViewOpen

- get onDocumentViewOpen(): EventFan<DocumentViewOpenedEventArgs>

- The event indicating document view was changed (new document opened, refreshed, toggled etc)

  #### Returns EventFan<DocumentViewOpenedEventArgs>

  Inherited from ReportViewer.onDocumentViewOpen

### onError

- get onError(): EventFan<ErrorEventArgs>

- The event indicating error.

  ### Example

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

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

  #### Returns EventFan<ErrorEventArgs>

### onThemeChanged

- get onThemeChanged(): EventFan<EventArgs>

- Occurs when the viewer theme changed by user.

  ### Example

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

  #### Returns EventFan<EventArgs>

### onViewerStateChange

- get onViewerStateChange(): EventFan<ChangedEventArgs>

- Indicates the viewer state was changed.

  #### Returns EventFan<ChangedEventArgs>

  Inherited from ReportViewer.onViewerStateChange

### optionalContentConfig

- get optionalContentConfig(): Promise<OptionalContentConfig>

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

  ### Example

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

  ### Example

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

  #### Returns Promise<OptionalContentConfig>

### options

- get options(): Partial<ViewerOptions>

- The viewer options.

  ### Example

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

  #### Returns Partial<ViewerOptions>

- set options(options: Partial<ViewerOptions>): void

- PDF viewer options.

  #### Parameters

  - ##### options: Partial<ViewerOptions>

  #### Returns void

### pageCount

- get pageCount(): number

- Gets pages count.

  ### Example

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

  #### Returns number

### pageDecoration

- get pageDecoration(): PageDecoration

- Gets or sets page view decoration mode.

  #### Returns PageDecoration

  Inherited from ReportViewer.pageDecoration

### pageDisplay

- get pageDisplay(): PageDisplayType

- Page display mode.

  #### Returns PageDisplayType

### pageIndex

- get pageIndex(): number

- Gets/sets the active page index.

  ### Example

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

  #### Returns number

- set pageIndex(val: number): void

- Gets/sets the active page index.

  ### Example

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

  #### Parameters

  - ##### val: number

  #### Returns void

### requiredSupportApiVersion

- get requiredSupportApiVersion(): string

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

  #### Returns string

### rightSidebar

- get rightSidebar(): GcRightSidebar

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

  ### Example

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

  #### Returns GcRightSidebar

### rotation

- get rotation(): number

- Specifies the rotation in degrees.

  ### Example

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

  #### Returns number

- set rotation(degrees: number): void

- Specifies the rotation in degrees.

  ### Example

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

  #### Parameters

  - ##### degrees: number

  #### Returns void

### scrollView

- get scrollView(): HTMLElement

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

  ### Example

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

  #### Returns HTMLElement

### searcher

- get searcher(): GcPdfSearcher

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

  ### Example

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

  ### Example

       // 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"));

  ### Example

      // 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');

  ### Example

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

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

  #### Returns GcPdfSearcher

### secondToolbar

- get secondToolbar(): SecondToolbar

- Second toolbar API.

  #### Returns SecondToolbar

### secondToolbarLayout

- get secondToolbarLayout(): SecondToolbarLayout

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

  ### Default

  #### Returns SecondToolbarLayout

- set secondToolbarLayout(layout: SecondToolbarLayout): void

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

  ### Default

  #### Parameters

  - ##### layout: SecondToolbarLayout

  #### Returns void

### signToolStorage

- get signToolStorage(): SignToolStorage

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

  #### Returns SignToolStorage

### storage

- get storage(): DataStorage

- Data storage for the active document.

  ### Example

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

  ### Example

      viewer.storage.setItem(fileId, bytes);

  ### Example

  Add Stamp annotation programatically using storage API

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

  #### Returns DataStorage

### structureTree

- get structureTree(): Promise<null | StructTreeNode[]>

- Structure tree data.

  ### Example

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

  ### Returns

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

  #### Returns Promise<null | StructTreeNode[]>

### supportApi

- get supportApi(): null | ISupportApi

- Gets the SupportApi client. Requires SupportApi.

  ### Example

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

  #### Returns null | ISupportApi

### supportApiVersion

- get supportApiVersion(): string

- Gets the connected version of the SupportApi, if available.

  #### Returns string

### tableDataExtractor

- 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

  The `TableDataExtractor` instance associated with this document.

  #### Returns TableDataExtractor

### tempOnPanelChange

- get tempOnPanelChange(): EventFan<null | string>

- Temporary expose event, which occurs on panel change

  #### Returns EventFan<null | string>

  Inherited from ReportViewer.tempOnPanelChange

### toolbarLayout

- get toolbarLayout(): PdfToolbarLayout

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

  ### Description

  The full list of the viewer specific toolbar items:

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

  The full list of the annotationEditor specific toolbar items:

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

  The full list of the formEditor specific toolbar items:

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

  ### Example

      // 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();

  ### Example

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

  ### Example

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

  #### Returns PdfToolbarLayout

- set toolbarLayout(toolbarLayout: PdfToolbarLayout): void

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

  ### Description

  The full list of the viewer specific toolbar items:

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

  The full list of the annotationEditor specific toolbar items:

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

  The full list of the formEditor specific toolbar items:

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

  ### Example

      // 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();

  ### Example

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

  #### Parameters

  - ##### toolbarLayout: PdfToolbarLayout

  #### Returns void

### undoCount

- get undoCount(): number

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

  ### Example

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

  #### Returns number

### undoIndex

- get undoIndex(): number

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

  ### Example

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

  #### Returns number

### undoState

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

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

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

### version

- get version(): string

- Returns the current version of the GcDocs PDF viewer.

  ### Example

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

  #### Returns string

### viewMode

- get viewMode(): ViewMode

- Gets or sets view mode (single page or continuous).

  #### Returns ViewMode

  Inherited from ReportViewer.viewMode

### viewerPreferences

- get viewerPreferences(): Promise<ViewerPreferences>

- Gets initial viewer preferences.

  #### Returns Promise<ViewerPreferences>

### viewerState

- get viewerState(): Model

- Gets currently viewed document state

  #### Returns Model

  Inherited from ReportViewer.viewerState

### xfdfManager

- get xfdfManager(): XFDFAnnotationHandler

- Provides access to the XFDF manager, which handles importing and exporting annotation data in XFDF format.

  ### Returns

  The instance of AnnotationXFDFHandler.

  #### Returns XFDFAnnotationHandler

### zoomMode

- get zoomMode(): ZoomMode

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

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

  #### Returns ZoomMode

- set zoomMode(val: ZoomMode): void

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

  ### Example

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

  #### Parameters

  - ##### val: ZoomMode

  #### Returns void

### zoomTarget

- get zoomTarget(): ZoomTarget

- Gets/sets target element for zoom transformation. If 'page' is set, each page will be transformed individually (default behavior). If 'viewport' is set, entire viewport element will be transformed instead. This is added to prevent issues in some specific cases, see ARJ-4340. *

  #### Returns ZoomTarget

  Inherited from ReportViewer.zoomTarget

### zoomValue

- get zoomValue(): number

- Gets/sets the current zoom percentage level.

  ### Example

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

  #### Returns number

- set zoomValue(val: number): void

- Gets/sets the current zoom percentage level.

  ### Example

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

  #### Parameters

  - ##### val: number

  #### Returns void

## Constructors

### constructor

- new GcPdfViewer(element: string | HTMLElement, options?: Partial<ViewerOptions>): GcPdfViewer

- Document Solutions PDF Viewer constructor.

  #### Parameters

  - ##### element: string | HTMLElement

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

  - ##### options: Partial<ViewerOptions> = {}

    Viewer options. See ViewerOptions for further information.

  #### Returns GcPdfViewer

  Overrides ReportViewer.constructor