///
//@ts-ignore
import { i18n } from 'i18next';
//@ts-ignore
import { ViewerStatus, ViewMode, Toolbar, ToolbarLayout, ZoomMode } from '@grapecity/viewer-core';
import PdfReportPlugin from './plugin';
import { GenericButton } from './Toolbar/ToolbarItems';
import { SignToolSettings, ViewerOptions } from './ViewerOptions';
///
//@ts-ignore
import React from 'react';
///
//@ts-ignore
import * as ReactDOM from 'react-dom';
//@ts-ignore
import { ReportViewer, LoadResult, EventFan } from '@grapecity/viewer-core';
import { SvgIconKey } from './Styles/pdfSvgIcons';
import { ISupportApi } from './SupportApi/ISupportApi';
import { PdfToolbarLayout } from './Toolbar/PdfToolbarLayout';
import { AnnotationBase, AnnotationTypeCode, CopyBufferData, FileAttachmentAnnotation, WidgetAnnotation, SignatureInformation } from './Annotations/AnnotationTypes';
import { EditMode, LayoutMode } from './Annotations/types';
import { GcSelectionPoint, IGcRect } from './Models/GcMeasurementTypes';
import { GcRightSidebarState } from './RightSidebar/types';
import { GcRightSidebar } from './RightSidebar/GcRightSidebar';
import { LogLevel, ModificationsState, SharedDocumentInfo, UndoChangeName } from './SharedDocuments/types';
import { SharedRef } from './Utils/SharedRef';
///
//@ts-ignore
import moment = require('moment');
import { GcPdfSearcher } from './Search/GcPdfSearcher';
//@ts-ignore
import { PanelHandle } from '@grapecity/viewer-core/types/api/PluginModel';
import { DataStorage } from './DataStorage/DataStorage';
import { GcMeasurement } from './Utils/GcMeasurement';
import { SignToolStorage } from './SignTool/SignToolStorage';
import { LeftSidebar } from './LeftSidebar';
import { DocumentSecuritySummary } from './Security/DocumentSecuritySummary';
import { DocumentInformation } from './Properties/DocumentInformation';
import { OpenParameters, OptionalContentConfig, PageViewport, SaveSettings, StructTreeNode, ViewerFeatureName, ViewerPreferences, IGCEventBus, DocumentListItem, SubmitFormOptions, ScrollPageIntoViewOptions, IGcPageView, FontFormat, ReplaceTextModel } from './Models/ViewerTypes';
import { AddStampDropdown } from './Toolbar/controls/AddStampDropdown';
import { SecondToolbar } from './Toolbar/SecondToolbar/SecondToolbar';
import { SecondToolbarLayout, SecondToolbarLayoutMode } from './Toolbar/SecondToolbar/types';
import { SearchPanel } from './Search/SearchPanel';
import { AsyncLock, PromiseQueue } from './Utils/PromiseUtils';
import { utf8ToBase64 } from './Utils/EncodingUtils';
import { ErrorEventArgs, BeforeOpenEventArgs, AfterOpenEventArgs, ThemeChangedEventArgs, EventName, EventArgs, BeforeAddAnnotationEventArgs, AfterAddAnnotationEventArgs, AfterUpdateAnnotationEventArgs, BeforeRemoveAnnotationEventArgs, AfterRemoveAnnotationEventArgs, BeforeUpdateAnnotationEventArgs } from './Models/EventArgs';
import { XfaApiImpl } from './XFA/XfaApiImpl';
import { PdfOrganizerDialog } from './PdfOrganizer/PdfOrganizerDialog';
import { ConfirmButton } from './Dialogs/Types';
import { OpenDocumentInfo } from './SupportApi/types';
import { PaintedBoxInfo, Rect, TextPartsQuadPoints } from './Search/types';
import { PageDisplayDropdown } from './Toolbar/controls/PageDisplayDropdown';
import { PageDisplayType } from './Toolbar/controls/types';
import { SaveAsDropdown } from './Toolbar/controls/SaveAsDropdown';
import { HighlightArgs, HighlightBehaviorArgs, ITextHighlightManager } from './HighlightManager/types';
import { IUndoStorage } from './Undo/IUndoStorage';
import { TableDataExtractionDialog } from './TableDataExtraction/TableDataExtractionDialog';
/**
* 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.
**/
export declare class GcPdfViewer extends ReportViewer {
private static _i18n;
static _instanceCounter: number;
private _disposed;
private _plugin;
private _isUpdating;
private _toolbarLayout;
private _secondToolbarLayout;
private _viewerInstanceId;
/**
* @ignore exclude from doc
**/
readonly in17n: i18n;
private _fileStorage;
addStampDropdown: AddStampDropdown | null;
private _secondToolbar;
private _editorLastValues;
private _xfa;
pageDisplayDropdown: PageDisplayDropdown | null;
saveAsDropdown: SaveAsDropdown | null;
private _pageDisplay?;
private _highlightManager;
/**
* Document Solutions PDF Viewer constructor.
* @param element root container element or selector pattern used to select the root container element.
* @param options Viewer options. See {@link ViewerOptions} for further information.
*/
constructor(element: HTMLElement | string, options?: Partial);
/**
* In some specific cases, users may need to override or add new JavaScript formatting functions.
* Use the jsFormatFunctions property to achieve this.
* @example
* ```javascript
* // Below is an example of how to add a new custom formatting function that appends a postfix to a field value
* viewer.jsFormatFunctions.customUserFormat = function(strValue, postfix){
* return strValue + postfix;
* }
* ```
*/
get jsFormatFunctions(): any;
/**
* pdf.js library instance.
* @ignore exclude from docs.
**/
get pdfjsLib(): any;
/**
* pdf.js document proxy.
* @ignore exclude from docs.
**/
get pdfDocument(): any;
/**
* Gets initial viewer preferences.
**/
get viewerPreferences(): Promise;
/**
* Resolve page index using PDF page reference.
* @example
* ```javascript
* const openAction = (await viewer.viewerPreferences).openAction;
* if(openAction && openAction.dest) {
* const pageRef = openAction.dest[0];
* const targetPageIndex = await viewer.resolvePageIndex(pageRef);
* }
*```
**/
resolvePageIndex(pageRef: any | {
gen: number;
num: number;
}): Promise;
get hasAttachments(): boolean;
get attachments(): FileAttachmentAnnotation[];
/**
* The ID of the viewer instance.
* Used to get access to the public UI API.
* @example
* ```javascript
* // Add new panel:
* const panelHandle = viewer.addArticlesPanel();
* // Get menu API:
* const menuApi = API.of(viewer.instanceId).menu;
* // Pin newly added panel:
* menuApi.panels.pin(panelHandle.id);
*```
* @ignore
**/
get instanceId(): string;
set instanceId(id: string);
/**
* 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.
**/
get isEditModeSticked(): boolean;
/**
* Indicates whether the active PDF document is an XFA form.
* @ignore exclude from docs.
**/
get isPureXfa(): boolean;
/**
* Get information about signature used in document.
* @example
* ```javascript
* // Example: check if the current document is signed and show information about signature:
* var viewer = DsPdfViewer.findControl("#root");
* const signatureInfo = await viewer.getSignatureInfo();
* if(signatureInfo.signed) {
* const signatureValue = signatureInfo.signedByFields[0].signatureValue;
* const signerName = signatureValue.name;
* const location = signatureValue.location;
* const signDate = viewer.pdfStringToDate(signatureValue.modificationDate);
* alert("The document was signed using digital signature. Signed by: " + signerName + ", location: " + location + ", sign date: " + signDate.toString());
* } else {
* alert("The document is not signed.");
* }
* ```
**/
getSignatureInfo(): Promise;
/**
* 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.
*
* @param {string} [input] - The PDF date string to convert.
* @return {Date|null} - The corresponding JavaScript `Date` object, or `null` if the input is invalid.
*
* @example
* ```javascript
* const pdfDateString = 'D:20230919123045Z'; // A PDF date string in UTC
* const date = viewer.pdfStringToDate(pdfDateString);
* console.log(date); // Outputs: Tue Sep 19 2023 12:30:45 GMT+0000 (Coordinated Universal Time)
* ```
*/
pdfStringToDate(input?: string | Date): Date | null;
/**
* 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.
*
* @param {Date | string | moment.Moment | number} input - The date to convert, which can be a `Date` object, date string, Moment object, or timestamp.
* @return {string|null} - The formatted PDF date string, or `null` if the input is invalid.
*
* @example
* ```javascript
* // Convert a Date object to a PDF date string
* const date = new Date();
* const pdfDateString = viewer.dateToPdfString(date);
* console.log(pdfDateString); // Outputs: 'D:20240924045508Z'
*
* // Convert a timestamp to a PDF date string
* const timestamp = Date.now();
* const pdfDateStringFromTimestamp = viewer.dateToPdfString(timestamp);
* console.log(pdfDateStringFromTimestamp); // Outputs: 'D:20240924045508Z'
* ```
*/
dateToPdfString(input: Date | string | moment.Moment | number): string | null;
/**
* Page display mode.
*/
get pageDisplay(): PageDisplayType;
set pageDisplay(pageDisplay: PageDisplayType);
/**
* The property is used for development purposes.
* @ignore exclude from docs.
**/
get sharedRef(): SharedRef;
/**
* PDF document meta data loader. Used by some sidebar panels.
**/
get dataLoader(): import("./Core/GcPdfViewerDataLoader").GcPdfViewerDataLoader;
/**
* Internal event bus. Available event names are: outlineloaded, attachmentsloaded, namedaction, pagemode, fileattachmentannotation, pagerendered,
* pagecancelled, scalechange, pagesinit, pagesloaded, documentchanged, rotationchanging, updateviewarea, undostorechanged,
* show-custom-layout, hide-custom-layout, annotationeditstarted, unselectannotation, annotation-bounds-change, pagechange,
* mousemodechange, request-answer, textlayerready, textselectionchanged, viewersizechanged, articlebeadnavigate, error, open, pagelabels, documentload.
* @example
* ```javascript
* // Example: listen annotation selected/unselected event.
* var viewer = DsPdfViewer.findControl("#root");
* viewer.eventBus.on("annotationeditstarted", (args)=> {
* console.log("Annotation selected, annotation id: " + args.annotationId);
* });
* viewer.eventBus.on("unselectannotation", (args)=> {
* console.log("Annotation unselected, annotation id: " + args.annotationId);
* });
* ```
**/
get eventBus(): IGCEventBus;
/**
* Last editor property values.
* @ignore exclude from docs
**/
get editorLastValues(): any;
/**
* @ignore exclude from docs, used for tests.
**/
get formStateHelper(): any;
/**
* @ignore exclude from docs, used for tests.
**/
get annotationStateHelper(): any;
getEditorLastValue(annotation: AnnotationBase, propertyName: string): any;
saveToEditorLastValues(annotation: AnnotationBase): Promise;
private _filterLastValues;
/**
* Gets the required SupportApi version that is compatible with the current version of the DsPdfViewer.
**/
get requiredSupportApiVersion(): string;
/**
* Gets the connected version of the SupportApi, if available.
**/
get supportApiVersion(): string;
/**
* Gets the GcPdf library version used by the SupportApi, if available.
**/
get gcPdfVersion(): string;
/**
* Internal service provider.
* @ignore exclude from docs
**/
get serviceProvider(): any;
/**
* Product license key.
* @example
* ```
*
*```
**/
static LicenseKey: string;
/**
* Indicates whether the open document can be edited using SupportApi.
* Requires SupportApi.
* @example
* ```javascript
* if(viewer.canEditDocument) {
* alert("Document editing features enabled.");
* } else {
* alert("Document editing features disabled.");
* }
* ```
* */
get canEditDocument(): boolean;
/**
* Specifies the current user name.
* The property is used by Annotation Editor as default value for 'author' field.
* @example
* ```javascript
* viewer.currentUserName = "John";
* ```
* @example
* ```javascript
* alert("The current user name is " + viewer.currentUserName);
* ```
* */
get currentUserName(): string;
/**
* 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
* ```javascript
* viewer.currentUserName = "John";
* ```
* @example
* ```javascript
* alert("The current user name is " + viewer.currentUserName);
* ```
**/
set currentUserName(userName: string);
/**
* @ignore exclude from docs.
**/
get disableFeaturesHash(): {
[key in ViewerFeatureName]?: boolean;
};
/**
* Indicates the selected editing tool for the Annotation editor or Form editor.
* Requires SupportApi.
* @example
* ```javascript
* // Set the layout mode to "Annotation editor"
* viewer.layoutMode = 1;
* // Set the edit mode to "Square".
* viewer.editMode = 4;
* ```
* */
get editMode(): EditMode;
/**
* Indicates the selected editing tool for the Annotation editor or Form editor.
* Requires SupportApi.
* @example
* ```javascript
* // Set the layout mode to "Annotation editor"
* viewer.layoutMode = 1;
* // Set the edit mode to "Square".
* viewer.editMode = 4;
* ```
* */
set editMode(mode: EditMode);
/**
* Activate edit mode.
* @ignore exclude from docs.
* @param mode
* @param args
*/
activateEditMode(mode: EditMode, args?: {
editMode: EditMode;
imageUrl: string;
imageDpi: number;
w: number;
h: number;
imageDataKey?: string;
} | null): void;
/**
*
* @ignore exclude from docs.
*/
activateReplaceTextFeature(): void;
/**
* Gets the file data. Available when keepFileData option is set to true.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root', { keepFileData: true });
* viewer.open('Test.pdf');
* viewer.onAfterOpen.register(function() {
* var pdfFileData = viewer.fileData;
* });
* ```
**/
get fileData(): Uint8Array | null;
/**
* Gets the file name that was used to open the document.
* The file name is determined as follows:
* - if a local file was opened using the "Open File" dialog, returns the local file name;
* - else, if a new file was created using the "newDocument" method, returns the argument passed to that method;
* - else, if options.friendlyFileName is not empty, returns its value;
* - else, returns the name generated from the URL passed to the "open" method.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root');
* viewer.onAfterOpen.register(function() {
* alert("The document is opened, the fileName is " + viewer.fileName);
* });
* viewer.open('MyDocuments/Test.pdf');
* ```
**/
get fileName(): string;
/**
* Gets the PDF document file size in bytes.
* @example
* ```javascript
* const fileSizeBytes = await viewer.fileSize;
* ```
**/
get fileSize(): Promise;
/**
* Gets the URL that was used to open the document.
* Returns an empty string when the document was opened from binary data.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root');
* viewer.onAfterOpen.register(function() {
* alert("The document is opened, the fileUrl is " + viewer.fileUrl);
* });
* viewer.open('MyDocuments/Test.pdf');
* ```
**/
get fileUrl(): string;
/**
* Gets a value indicating whether the editor mode is currently active.
* @example
* ```javascript
* let isInEditorMode = viewer.isInEditorMode;
* ```
* @example
* ```javascript
* // Detect the start/end of edit mode
* var isEdit = false;
* viewer.onViewerStateChange.register(function () {
* if (viewer.isInEditorMode !== isEdit) {
* isEdit = viewer.isInEditorMode;
* console.log(isEdit ? "Editor Mode activated." : "Editor Mode deactivated.");
* }
* });
* ```
**/
get isInEditorMode(): boolean;
/**
* Activated editor mode name.
**/
get activatedEditorMode(): "SecondBar" | "FormEditor" | "AnnotationEdtor" | "Any" | "" | undefined;
/**
* Left sidebar API.
* @example
* ```javascript
* viewer.leftSidebar.hide();
* ```
**/
get leftSidebar(): LeftSidebar;
/**
* Data storage for the active document.
* @example
* ```javascript
* const fileData = viewer.storage.getItem(annotation.fileId);
* ```
* @example
* ```javascript
* viewer.storage.setItem(fileId, bytes);
* ```
* @example
* Add Stamp annotation programatically using storage API
* ```javascript
* viewer.newDocument().then(function() {
* var xhr = new XMLHttpRequest();
* xhr.open('GET', 'http://localhost/sample.jpg', true);
* xhr.responseType = 'arraybuffer';
* xhr.onload = function(e) {
* var arrayBuffer = this.response;
* if (arrayBuffer) {
* // Add Stamp annotation programatically:
* viewer.storage.setItem("sample_file_id_1", new Uint8Array(arrayBuffer));
* var pageSize = viewer.getPageSize(0);
* viewer.addAnnotation(0, {annotationType: 13, fileId: "sample_file_id_1", rect: [0, pageSize.height - 144, 144, pageSize.height]});
* }
* };
* xhr.send();
* });
* ```
**/
get storage(): DataStorage;
/**
* 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 {@link currentUserName} property
**/
get signToolStorage(): SignToolStorage;
/**
* Indicates whether the document has been modified by the user.
* @example
* ```javascript
* if(viewer.hasChanges) {
* alert("The document has been changed.");
* }
* ```
* */
get hasChanges(): boolean;
get changesVersion(): number;
/**
* Indicates whether the copy buffer contains any data.
* @example
* ```javascript
* if(viewer.hasCopyData) {
* viewer.execPasteAction();
* }
* ```
**/
get hasCopyData(): boolean;
/**
* Indicates whether the document is loaded into view.
* @example
* ```javascript
* if(!viewer.hasDocument) {
* viewer.open("sample.pdf");
* }
* ```
**/
get hasDocument(): boolean;
/**
* Determines whether the annotation layer is hidden.
* @example
* ```javascript
* // Hide annotations:
* viewer.hideAnnotations = true;
* ```
**/
get hideAnnotations(): boolean;
/**
* Determines whether the annotation layer is hidden.
* @example
* ```javascript
* // Hide annotations:
* viewer.hideAnnotations = true;
* ```
**/
set hideAnnotations(hide: boolean);
/**
* Gets or sets the layout mode (0 - Viewer, 1 - AnnotationEditor or 2 - FormEditor).
* @default 0
* @example
* ```javascript
* // Set the layout mode to "Form editor"
* viewer.layoutMode = 2;
* ```
**/
get layoutMode(): LayoutMode;
/**
* Gets or sets the layout mode (0 - Viewer, 1 - AnnotationEditor or 2 - FormEditor).
* @default 0
* @example
* ```javascript
* // Set the layout mode to "Form editor"
* viewer.layoutMode = 2;
* ```
**/
set layoutMode(mode: LayoutMode);
/**
* Gets current log level. Available log levels are: 'None', 'Critical', 'Error', 'Warning', 'Information', 'Debug', 'Trace'. Default level is 'None'.
**/
get logLevel(): LogLevel;
/**
* Sets current log level. Available log levels are: 'None', 'Critical', 'Error', 'Warning', 'Information', 'Debug', 'Trace'. Default level is 'None'.
**/
set logLevel(logLvel: LogLevel);
/**
* Gets modifications state for active document. Requires SupportApi.
* @example
* ```javascript
* var modificationsState = viewer.modificationsState;
* console.log(modificationsState);
* ```
* */
get modificationsState(): ModificationsState;
/**
* Default optional content config.
* An optional content is a collection of graphics that can be made visible or invisible dynamically.
* @example
* ```javascript
* // Use the optionalContentConfig property to print information about all available layers
* const config = await viewer.optionalContentConfig;
* console.table(config.getGroups());
* ```
* @example
* ```javascript
* const config = await viewer.optionalContentConfig;
* // Turn off optional content group with id "13R":
* config.setVisibility("13R", false);
* // Repaint visible pages:
* viewer.repaint();
* ```
**/
get optionalContentConfig(): Promise;
/**
* Structure tree data.
* @example
* ```javascript
* const viewer = new DsPdfViewer(selector);
* await viewer.open("sample.pdf");
* const structureTree = await viewer.structureTree;
* if(structureTree) {
* console.log(structureTree);
* }
* ```
* @returns {Promise} A promise that is resolved with a
* {@link StructTreeNode[]} objects that represents the page's structure tree,
* or `null` when no structure tree is present for the page.
**/
get structureTree(): Promise;
/**
*
* @ignore exclude from docs
* @param pageIndex
* @param id
*/
scrollMarkedTextIntoView(pageIndex: number, id: string): Promise;
/**
* The viewer options.
* @example
* ```javascript
* viewer.options.zoomByMouseWheel = { always: true };
* viewer.applyOptions();
* ```
**/
get options(): Partial;
/**
* PDF viewer options.
* */
set options(options: Partial);
/**
* Get type by type name.
* @ignore exclude from docs
* @param typeName
* @example
* ```javascript
* // Get TextAnnotation class:
* var TextAnnotation = viewer.getType('TextAnnotation');
* // Create instance of TextAnnotation class:
* var annot1 = new TextAnnotation()
* // Result annot1 object:
* // { annotationFlags: 0, annotationType: 1, borderStyle: {width: 0, style: 1, horizontalCornerRadius: 0, verticalCornerRadius: 0},
* // name: "Note", open: false, subtype: "Text", useCustomAppearance: true }
* ```
* @example
* ```javascript
* // Get AnnotationTypeCode enumeration:
* var AnnotationTypeCode = viewer.getType('AnnotationTypeCode');
* // Print line annotation type code:
* console.log(AnnotationTypeCode.LINE)
* ```
*/
getType(typeName: string): typeof React | typeof AnnotationBase | typeof GcPdfViewer | typeof ReactDOM | typeof AsyncLock | typeof PdfReportPlugin | typeof AnnotationTypeCode | typeof ViewMode | typeof ZoomMode | typeof utf8ToBase64 | typeof PromiseQueue | typeof EditMode | typeof GenericButton | typeof ViewerStatus | typeof ViewerOptions | typeof LayoutMode | typeof Toolbar | typeof GcMeasurement | typeof GcPdfSearcher | typeof GcRightSidebar | null;
/**
* Gets the PDF plug-in.
* @ignore exclude from docs
**/
get plugin(): PdfReportPlugin;
/**
* Specifies the rotation in degrees.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root');
* // Register an onAfterOpen event handler:
* viewer.onAfterOpen.register(function() {
* // Apply 90 degree clockwise rotation:
* viewer.rotation = 90;
* });
* // Open document:
* viewer.open('Test.pdf');
* ```
* */
get rotation(): number;
/**
* Specifies the rotation in degrees.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root');
* // Register an onAfterOpen event handler:
* viewer.onAfterOpen.register(function() {
* // Apply 90 degree clockwise rotation:
* viewer.rotation = 90;
* });
* // Open document:
* viewer.open('Test.pdf');
* ```
* */
set rotation(degrees: number);
/**
* Document search worker instance.
* Searches currently opened document for a text.
* @example
* ```javascript
* // Highlight all search results without opening SearchPanel.
* const searchIterator = viewer.searcher.search({ Text: "test", MatchCase: true, HighlightAll: true });
* searchIterator.next();
* searcher.applyHighlight();
* ```
* @example
* ```javascript
* // Iterate all search results
* const searcher = viewer.searcher;
* var searchResults = [];
* const searchIterator = searcher.search({ Text: textToSearch, MatchCase: true });
* var searchResult = await searchIterator.next();
* if (searchResult.value)
* searcher.highlight(searchResult.value)
* while (searchResult.value && !searchResult.done) {
* const searchResultValue = searchResult.value;
* searchResults.push(`index: ${searchResultValue.ItemIndex}, text: ${searchResultValue.DisplayText}, pageIndex: ${searchResultValue.PageIndex}`);
* searchResult = await searchIterator.next();
* }
* console.log("Search results: " + (searchResults.length ? searchResults.join("; ") : "No search results"));
* ```
* @example
* ```javascript
* // Open the document, find the text 'wildlife' and highlight the first result:
* async function loadPdfViewer(selector) {
* var viewer = new DsPdfViewer(selector, { restoreViewStateOnLoad: false });
* viewer.addDefaultPanels();
* var afterOpenPromise = new Promise((resolve)=>{ viewer.onAfterOpen.register(()=>{ resolve(); }); });
* await viewer.open('wetlands.pdf');
* await afterOpenPromise;
* var findOptions = { Text: 'wildlife' };
* var searchIterator = await viewer.searcher.search(findOptions);
* var searchResult = await searchIterator.next();
* viewer.searcher.cancel();
* viewer.searcher.highlight(searchResult.value);
* }
* loadPdfViewer('#root');
* ```
* @example
* // Open the document, find the text 'wildlife' and print search results to the console:
* ```javascript
* async function loadPdfViewer(selector) {
* var viewer = new DsPdfViewer(selector);
* viewer.addDefaultPanels();
* await viewer.open('wetlands.pdf');
* await (new Promise((resolve)=>{
* viewer.onAfterOpen.register(()=>{
* resolve();
* });
* }));
* var findOptions = {
* Text: 'wildlife',
* MatchCase: true,
* WholeWord: true,
* StartsWith: false,
* EndsWith: false,
* Wildcards: false,
* Proximity: false,
* SearchBackward: false,
* HighlightAll: true
* };
* var searcher = viewer.searcher;
* var searchIterator = await searcher.search(findOptions);
* var resultsCount = 0;
* var searchResult;
* do {
* searchResult = await searchIterator.next();
* if (searchResult.value) {
* // this could be either result or progress message (ItemIndex < 0)
* if(searchResult.value.ItemIndex >= 0) {
* console.log('next search result:');
* console.log(searchResult.value);
* resultsCount++;
* } else {
* const pageCount = _doc.pageCount.totalPageCount || _doc.pageCount.renderedSoFar;
* console.log('search progress, page index is ' + searchResult.value.PageIndex);
* }
* }
* else {
* console.log("Search completed");
* break;
* }
* }
* while(!searchResult.done);
* console.log('Total results count is ' + resultsCount);
* }
* ```
*/
get searcher(): GcPdfSearcher;
/**
* Gets the search panel handle if the search panel has been added to the user interface.
* @ignore Exclude from docs until first v5 hotfix
* @example
* ```javascript
* // Close search panel:
* viewer.leftSidebar.menu.panels.close(viewer.searchPanelHandle.id);
* ```
**/
get searchPanelHandle(): PanelHandle | undefined;
get isSearchPanelExpanded(): boolean;
get isFloatingSearchBarExpanded(): boolean;
/**
* 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.
*
* @param {boolean} [expand=true] - Whether to expand (true) or collapse (false) the Search UI. Default is true.
* @param {boolean} [replaceMode=false] - Whether to enable Replace mode in the Search UI. Default is false.
*
* @example
* ```javascript
* // Example 1: Default behavior (expand the Search UI and disable Replace mode)
* viewer.toggleSearchUI();
* // The Search UI expands and displays in Search mode.
* ```
*
* @example
* ```javascript
* // Example 2: Expand the Search UI and enable Replace mode
* viewer.toggleSearchUI(true, true);
* // The Search UI expands and displays the Replace mode.
* ```
*
* @example
* ```javascript
* // Example 3: Collapse the Search UI
* viewer.toggleSearchUI(false);
* // The Search UI collapses, hiding the search components.
* ```
*
* @example
* ```javascript
* // Example 4: Expand the Search UI without enabling Replace mode
* viewer.toggleSearchUI(true, false);
* // The Search UI expands but remains in Search mode.
* ```
*/
toggleSearchUI(expand?: boolean, replaceMode?: boolean): void;
closeSearchPanel(): void;
closeFloatingSearchBar(): void;
/**
* Gets the search panel component if the search panel is rendered to the user interface.
* @ignore Exclude from docs until first v5 hotfix
* @example
* ```javascript
* // Open search panel:
* viewer.leftSidebar.menu.panels.open(viewer.searchPanelHandle.id);
* // Perform new search:
* viewer.searchPanel.beginSearch({Text: "Hello", MatchCase: true});
* ```
**/
get searchPanel(): SearchPanel | undefined;
/**
* Gets the SupportApi client.
* Requires SupportApi.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
* // Contact server and get Support API version.
* viewer.serverVersion.then(function(ver) {
* alert("The SupportApi version is " + ver);
* });
* ```
* */
get supportApi(): ISupportApi | null;
/**
* Defines the layout of the toolbar for different viewer modes:
* viewer, annotationEditor, formEditor.
* @description
* The full list of the *viewer* specific toolbar items:
* ```javascript
* 'open', '$navigation', '$split', 'text-selection', 'pan', 'zoom', '$fullscreen', '$split', 'text-tools', 'draw-tools', 'attachment-tools',
* 'form-tools', 'page-tools', '$split', 'rotate', 'search', 'page-display', 'theme-change', 'download', 'print', 'save-as', 'hide-annotations', 'form-filler',
* 'doc-title', 'doc-properties', 'about', 'share', 'single-page', 'continuous-view', 'page-display', '$history', '$mousemode', 'show-edit-tools', 'show-form-editor'
* ```
* The full list of the *annotationEditor* specific toolbar items:
* ```javascript
* 'edit-select', 'save-as', 'share', 'edit-text', 'edit-free-text', 'edit-ink', 'edit-square',
* 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'edit-file-attachment', 'edit-richmedia', 'edit-sound', 'edit-link', 'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out'.
* 'edit-redact', 'edit-redact-apply', 'edit-erase', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'
* ```
* The full list of the *formEditor* specific toolbar items:
* ```javascript
* 'edit-select-field', 'save-as', 'share',
* 'edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio',
* 'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset',
* 'edit-erase-field', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'
* ```
* @example
* ```javascript
* // Customize the toolbar layout:
* viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
* viewer.toolbarLayout.annotationEditor.default = ["open", "save", "share", "$split", "new-document", "edit-ink", "edit-text"];
* viewer.toolbarLayout.formEditor.default = ["open", "save", "share", "$split", "edit-widget-tx-field", "edit-widget-tx-password"];
* viewer.applyToolbarLayout();
* ```
* @example
* ```javascript
* // Show only Open and Redact buttons:
* var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' });
* // Add annotation editor panel:
* viewer.addAnnotationEditorPanel();
* // Change toolbar layout:
* viewer.toolbarLayout = { viewer: { default: ["open", 'show-edit-tools']},
* annotationEditor: { default: ["open", 'edit-redact', 'edit-redact-apply']} };
* // Activate 'Annotation Editor' layout mode:
* viewer.layoutMode = 1;
* ```
* @example
* ```javascript
* // Make square, circle and line buttons sticky:
* viewer.toolbarLayout.stickyBehavior = ["edit-square", "edit-circle", "edit-line"];
* viewer.applyToolbarLayout();
* ```
**/
get toolbarLayout(): PdfToolbarLayout;
/**
* Defines the layout of the toolbar for different viewer modes:
* viewer, annotationEditor, formEditor.
* @description
* The full list of the *viewer* specific toolbar items:
* ```javascript
* 'text-selection', 'pan', 'open', 'save-as', 'share', 'download', 'print', 'rotate', 'theme-change', 'doc-title', 'page-display', 'single-page', 'continuous-view',
* '$navigation' '$refresh', '$history', '$mousemode', 'zoom', '$fullscreen', '$split', 'show-edit-tools', 'show-form-editor'
* ```
* The full list of the *annotationEditor* specific toolbar items:
* ```javascript
* 'edit-select', 'save-as', 'share', 'edit-text', 'edit-free-text', 'edit-ink', 'edit-square',
* 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'edit-file-attachment', 'edit-richmedia', 'edit-sound', 'edit-link', 'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out'.
* 'edit-redact', 'edit-redact-apply', 'edit-erase', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'
* ```
* The full list of the *formEditor* specific toolbar items:
* ```javascript
* 'edit-select-field', 'save-as', 'share',
* 'edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio',
* 'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset',
* 'edit-erase-field', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'
* ```
* @example
* ```javascript
* // Customize the toolbar layout:
* viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
* viewer.toolbarLayout.annotationEditor.default = ["open", "save", "share", "$split", "new-document", "edit-ink", "edit-text"];
* viewer.toolbarLayout.formEditor.default = ["open", "save", "share", "$split", "edit-widget-tx-field", "edit-widget-tx-password"];
* viewer.applyToolbarLayout();
* ```
* @example
* ```javascript
* // Show only Open and Redact buttons:
* var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' });
* // Add annotation editor panel:
* viewer.addAnnotationEditorPanel();
* // Change toolbar layout:
* viewer.toolbarLayout = { viewer: { default: ["open", 'show-edit-tools']},
* annotationEditor: { default: ["open", 'edit-redact', 'edit-redact-apply']} };
* // Activate 'Annotation Editor' layout mode:
* viewer.layoutMode = 1;
* ```
**/
set toolbarLayout(toolbarLayout: PdfToolbarLayout);
/**
* Second toolbar layout.
* Use the secondToolbarLayout property to configure available tools.
* @default {
* "text-tools": ['edit-text', 'edit-free-text', 'edit-ink', '$split', 'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
* "draw-tools": ['edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
* "attachment-tools": ['edit-stamp', 'edit-file-attachment', 'edit-richmedia', 'edit-sign-tool', 'edit-sound', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
* "form-tools": ['edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio', 'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
* "page-tools": ['new-document', 'new-page', 'delete-page', '$split', 'edit-undo', 'edit-redo', '$split', 'pdf-organizer']
* }
**/
get secondToolbarLayout(): SecondToolbarLayout;
/**
* Second toolbar layout.
* Use the secondToolbarLayout property to configure available tools.
* @default {
* "text-tools": ['edit-text', 'edit-free-text', 'edit-ink', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
* "draw-tools": ['edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
* "attachment-tools": ['edit-stamp', 'edit-file-attachment', 'edit-richmedia', 'edit-sign-tool', 'edit-sound', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
* "form-tools": ['edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio', 'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
* "page-tools": ['new-document', 'new-page', 'delete-page', '$split', 'edit-undo', 'edit-redo', '$split', 'pdf-organizer']
* }
**/
set secondToolbarLayout(layout: SecondToolbarLayout);
/**
* Returns the current version of the GcDocs PDF viewer.
* @example
* ```javascript
* alert("The DsPdfViewer version is " + viewer.version);
* ```
* */
get version(): string;
/**
* Indicates whether the Reply Tool has been added.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root');
* if(viewer.hasReplyTool) {
* alert("The Reply Tool has not been added to the viewer.");
* } else {
* alert("The Reply Tool has been added to the viewer.");
* }
* viewer.open('Test.pdf');
* ```
**/
get hasReplyTool(): boolean;
/**
* Gets right sidebar object.
* Use this object if you want to manipulate the right sidebar.
* @example
* ```javascript
* viewer.rightSidebar.show('expanded', 'reply-tool');
* viewer.rightSidebar.toggle();
* viewer.rightSidebar.hide();
* viewer.rightSidebar.expand();
* viewer.rightSidebar.collapse();
* ```
* */
get rightSidebar(): GcRightSidebar;
/**
* An unique document identifier.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root');
* viewer.onAfterOpen.register(function() {
* alert("The document opened, an unique document identifier is "+ viewer.fingerprint);
* });
* viewer.open('Test.pdf');
* ```
**/
get fingerprint(): string;
/**
* Gets i18next instance which can be used to add viewer translations.
* See https://www.i18next.com for details about i18next framework.
* @example
* ```javascript
* function loadPdfViewer(selector) {
* // You can load translations from any source (see en-pdf-viewer.json for an example):
* var myTranslations = {
* "toolbar": {
* "open-document": "Open MY document",
* "pan": "My Pan tool",
* }
* };
* // Initialize translations:
* DsPdfViewer.i18n.init({
* resources: { myLang: { viewer: myTranslations } },
* defaultNS: 'viewer'
* }).then(function(t) {
* // New translations initialized and ready to go!
* // Now create PDF viewer:
* var viewer = new DsPdfViewer(selector, { language: 'myLang' });
* viewer.addDefaultPanels();
* //viewer.open("sample.pdf");
* });
* }
* loadPdfViewer('#root');
* ```
**/
static get i18n(): i18n;
/**
* 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 {Promise<{ pageIndex: number, annotations: AnnotationBase[] }[]>} A promise that resolves with annotations grouped by page.
*
* @example Basic usage:
* ```javascript
* var viewer = new DsPdfViewer('#root');
* viewer.addDefaultPanels();
* viewer.onAfterOpen.register(function() {
* viewer.annotations.then(function(data) {
* data.forEach(pageData => {
* console.log(`Page ${pageData.pageIndex} has ${pageData.annotations.length} annotation(s)`);
* });
* });
* });
* viewer.open('Test.pdf');
* ```
*
* @example Filtering annotations by type:
* ```javascript
* viewer.annotations.then(function(data) {
* data.forEach(pageData => {
* const highlightAnnotations = pageData.annotations.filter(ann => ann.annotationType === 9);
* console.log(`Page ${pageData.pageIndex} has ${highlightAnnotations.length} highlight annotation(s)`);
* });
* });
* ```
*
* @example Accessing specific annotation properties:
* ```javascript
* viewer.annotations.then(function(data) {
* data.forEach(pageData => {
* pageData.annotations.forEach(annotation => {
* console.log(`Annotation ID: ${annotation.id}, Type: ${annotation.subtype}, Contents: ${annotation.contents}`);
* });
* });
* });
* ```
*
* @example Error handling:
* ```javascript
* viewer.annotations
* .then(data => {
* console.log(`Retrieved annotations for ${data.length} pages`);
* })
* .catch(error => {
* console.error('Failed to retrieve annotations:', error);
* });
* ```
*/
get annotations(): Promise<{
pageIndex: number;
annotations: AnnotationBase[];
}[]>;
/**
* Ask the user if he want to leave the page when document is modified.
* Requires SupportApi.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
* viewer.addDefaultPanels();
* viewer.addAnnotationEditorPanel();
* viewer.addFormEditorPanel();
* viewer.beforeUnloadConfirmation = true;
* ```
**/
get beforeUnloadConfirmation(): boolean;
/**
* Ask the user if he want to leave the page when document is modified.
* Requires SupportApi.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
* viewer.addDefaultPanels();
* viewer.addAnnotationEditorPanel();
* viewer.addFormEditorPanel();
* viewer.beforeUnloadConfirmation = true;
* ```
**/
set beforeUnloadConfirmation(enable: boolean);
/**
* Gets a value indicating whether the active document has any form fields.
* @example
* ```javascript
* if(viewer.hasForm) {
* viewer.showFormFiller();
* }
* ```
* */
get hasForm(): boolean;
/**
* Gets a value indicating whether the viewer has a persistent connection to the server.
* ```javascript
* if(viewer.hasPersistentConnection) {
* viewer.getSharedDocuments().then(function(result) {
*
* });
* }
* ```
**/
get hasPersistentConnection(): boolean;
/**
* Displays 'Form filler' dialog.
* @example
* ```javascript
* if(viewer.hasForm) {
* viewer.showFormFiller();
* }
* ```
* */
showFormFiller(): void;
/**
* Displays the 'Add Signature' dialog.
* Requires SupportApi.
* @example
* ```javascript
* viewer.showSignTool();
* ```
* @param preferredSettings Optional. These settings will take priority over signSettings option.
*/
showSignTool(preferredSettings?: SignToolSettings): void;
resetChanges(): Promise;
/**
* Reload current document.
* @ignore exclude from docs.
* @param keepUndoState Keeps undo state changes. The default value is true.
*/
reload(keepUndoState?: boolean): Promise;
/**
* Gets a value indicating whether the pdf viewer can undo document changes.
* Requires SupportApi.
* @example
* ```javascript
* if(viewer.hasUndoChanges) {
* viewer.undoChanges();
* }
* ```
**/
get hasUndoChanges(): boolean;
get hasUndo(): boolean;
/**
* Gets a value indicating whether the pdf viewer can redo document changes.
* Requires SupportApi.
* @example
* ```javascript
* if(viewer.hasRedoChanges) {
* viewer.redoChanges();
* }
* ```
* */
get hasRedoChanges(): boolean;
get hasRedo(): boolean;
/**
* Undo storage implementation.
* @ignore exclude from documentation.
**/
get undoStore(): any;
/**
* Command-based undo storage implementation.
* @ignore exclude from documentation.
**/
get undoStorage(): IUndoStorage;
/**
* 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()
**/
get undoState(): (0 | {
changeName: UndoChangeName;
selectedAnnotation: {
pageIndex: number;
annotation: AnnotationBase;
} | null;
data: any;
})[];
/**
* Gets the index of the current Undo level (command).
* This is the Undo command that will be executed on the next call to redoChanges().
* Requires SupportApi.
* @example
* ```javascript
* alert("The current Undo level index is " + viewer.undoIndex);
* ```
* */
get undoIndex(): number;
/**
* Gets the number of levels(commands) on the undo stack.
* Requires SupportApi.
* @example
* ```javascript
* alert("Undo levels count is " + viewer.undoCount);
* ```
* */
get undoCount(): number;
/**
* Gets/sets the active page index.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root');
* viewer.onAfterOpen.register(function() {
* // Navigate page with index 9:
* viewer.pageIndex = 9;
* });
* viewer.open('Test.pdf');
* ```
**/
get pageIndex(): number;
/**
* Gets/sets the active page index.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root');
* viewer.onAfterOpen.register(function() {
* // Navigate page with index 9:
* viewer.pageIndex = 9;
* });
* viewer.open('Test.pdf');
* ```
**/
set pageIndex(val: number);
/**
* Gets pages count.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root');
* viewer.onAfterOpen.register(function() {
* alert("The document opened. Total number of pages: " + viewer.pageCount);
* });
* viewer.open('Test.pdf');
* ```
**/
get pageCount(): number;
/**
* Find the target visible index of the page, which can fit the rectangle given by the rect argument.
* @ignore exclude
**/
findTargetPageForRect(rect: number[]): number;
/**
* Gets a value indicating whether the active document is open in shared mode.
* Requires SupportApi.
* @example
* ```javascript
* if(viewer.isDocumentShared) {
* alert("The document is open in shared mode.");
* }
* ```
**/
get isDocumentShared(): boolean;
/**
* Gets/sets the current zoom percentage level.
* @example
* ```javascript
* // Set zoom value to 150%
* viewer.zoomValue = 150;
* ```
**/
set zoomValue(val: number);
/**
* Gets/sets the current zoom percentage level.
* @example
* ```javascript
* // Set zoom value to 150%
* viewer.zoomValue = 150;
* ```
**/
get zoomValue(): number;
/**
* Gets/sets the current zoom node.
* Accepted values are: 0 - Value, 1 - PageWidth, 2 - WholePage.
* @example
* ```javascript
* // Set zoom mode to 'WholePage'
* viewer.zoomMode = 2;
* ```
**/
set zoomMode(val: ZoomMode);
messageBox(cMsg: string | any, nIcon?: number, nType?: number, cTitle?: string, oDoc?: any, oCheckbox?: any): number;
/**
* The Alert Box is by far the most used dialog because
* it performs the most common operations. It displays short text messages (errors, warnings, etc.) and asks yes/no questions.
* Used by Javascript actions.
* @ignore exclude from docs
* @param cMsg Required cMsg is the text displayed in the body of the Popup Window, and this is the only required argument.
* @param nIcon Optional. The nIcon argument is the icon displayed to the left of the text.
* Possible values areL 0 (default) - Error Message, 1 - Warning Message, 2 - Question, 3 - Information Message, 4 - No Icon displayed
* @param nType Optional. nType is the button combination.
* Possible values: 0(default) - Single value Ok Button, 1 - 2 value Ok/Cancel Combination,
* 2 - 2 value Yes/No Combination, 3 - 3 value Yes/No/Cancel Combination
* @param cTitle Optional. cTitle is the window caption.
* @param oDoc Optional. Not used. The oDoc argument forces the Alert Box to run in the context of a different PDF document. This option is used for multiple document applications.
* @param oCheckbox Optional. Not used. The oCheckbox argument adds a checkbox to the bottom of the Alert Box. Its usage is more complicated than the other options. In order for it to return a value it requires a generic object literal as input. This object contains 3 properties, the checkbox text (cMsg), an initial value (bInitialValue), and the output value (bAfterValue). The output value is the only required property. The others are optional and have default values.
*/
alert(cMsg: string | any, nIcon?: number, nType?: number, cTitle?: string, oDoc?: any, oCheckbox?: any): number;
/**
* Used by XFA scripting api: xfa.host.resetData()
* @ignore exclude from docs
**/
resetData(): void;
/**
* Causes the system to play a sound.
* Used by Scripting API.
* @ignore exclude from docs
* @param param Optional. The system code for the appropriate sound. Each system code corresponds to a specific Windows program event.
* 0 (Error) - Corresponds to the Critical Stop program event.
* 1 (Warning) - Corresponds to the Exclamation program event.
* 2 (Question) - Corresponds to the Question program event.
* 3 (Status) - Corresponds to the Asterisk program event.
* 4 (Default) - Corresponds to the Default Beep program event.
**/
beep(param: number): void;
/**
* Used by Scripting API: app.execMenuItem("SaveAs");
* @ignore exclude from docs
**/
execMenuItem(menuItem: string): Promise;
/**
* XFA layer API. Used by Javascript actions.
* @ignore exclude from docs.
**/
get xfa(): XfaApiImpl;
/**
* Gets/sets the current zoom node.
* Accepted values are: 0 - Value, 1 - PageWidth, 2 - WholePage.
* ```javascript
* // Set zoom mode to 'WholePage'
* viewer.zoomMode = 2;
* ```
**/
get zoomMode(): ZoomMode;
/**
* The event indicating error.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root');
* viewer.addDefaultPanels();
* viewer.onError.register(handleError);
* viewer.open('Test.pdf');
* function handleError(eventArgs) {
* var message = eventArgs.message;
* if (message.indexOf("Invalid PDF structure") !== -1) {
* alert('Unable to load pdf document, pdf document is broken.');
* } else {
* alert('Unexpected error: ' + message);
* }
* }
* ```
**/
get onError(): EventFan;
/**
* Occurs immediately before the document opens.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root');
* viewer.onBeforeOpen.register(function(args) {
* alert("A new document will be opened,\n payload type(binary or URL): " + args.type +",\n payload(bytes or string): " + args.payload);
* });
* viewer.open('Test.pdf');
* ```
**/
get onBeforeOpen(): EventFan;
/**
* The event raised when the user changes the viewer theme.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root');
* viewer.onAfterOpen.register(function() {
* alert("The document opened.");
* });
* viewer.open('Test.pdf');
* ```
**/
get onAfterOpen(): EventFan;
/**
* Before add annotation event. The event is cancelable.
* @example
* ```javascript
* // This example demonstrates how to change the color of an annotation to red
* // before it is added to the PDF viewer.
* viewer.onBeforeAddAnnotation.register(function(args) {
* args.annotation.color = "#ff0000"; // Set the annotation color to red
* });
* ```
* @example
* ```javascript
* // This example demonstrates how to prevent an annotation from being added.
* viewer.onBeforeAddAnnotation.register(function(args) {
* console.log(args); // Log the event arguments to the console
* args.cancel = true; // Set the cancel flag to cancel the annotation addition
* });
* ```
**/
get onBeforeAddAnnotation(): EventFan;
/**
* After add annotation event.
* @example
* ```javascript
* viewer.onAfterAddAnnotation.register(function(args) {
* console.log(args); // Log the event arguments to the console
* });
* ```
**/
get onAfterAddAnnotation(): EventFan;
/**
* Before update annotation event. The event is cancelable.
* ```javascript
* // This example demonstrates how to prevent an annotation from being updated.
* viewer.onBeforeUpdateAnnotation.register(function(args) {
* console.log(args); // Log the event arguments to the console
* args.cancel = true; // set the cancel flag to cancel event.
* });
* ```
**/
get onBeforeUpdateAnnotation(): EventFan;
/**
* After update annotation event.
* @example
* ```javascript
* viewer.onAfterUpdateAnnotation.register(function(args) {
* console.log(args);
* });
* ```
**/
get onAfterUpdateAnnotation(): EventFan;
/**
* Before remove annotation event. The event is cancelable.
* ```javascript
* viewer.onBeforeRemoveAnnotation.register(function(args) {
* console.log(args);
* args.cancel = true; // set the cancel flag to cancel event.
* });
* ```
**/
get onBeforeRemoveAnnotation(): EventFan;
/**
* After remove annotation event.
* @example
* ```javascript
* viewer.onAfterRemoveAnnotation.register(function(args) {
* console.log(args);
* });
* ```
**/
get onAfterRemoveAnnotation(): EventFan;
private _eventsDef;
private _getEventFan;
/**
* Get event object.
* @example
* ```javascript
* viewer.getEvent("BeforeAddAnnotation").register(function(args) {
* console.log(args);
* });
* viewer.getEvent("AfterAddAnnotation").register(function(args) {
* console.log(args);
* });
* ```
* @param eventName
*/
getEvent(eventName: EventName): EventFan;
/**
* Trigger event.
* @param eventName
* @param args
* @example
* ```javascript
* // Listen CustomEvent:
* viewer.getEvent("CustomEvent").register(function(args) {
* console.log(args);
* });
* // Trigger CustomEvent:
* viewer.triggerEvent("CustomEvent", { arg1: 1, arg2: 2});
* ```
**/
triggerEvent(eventName: EventName, args?: EventArgs | ThemeChangedEventArgs | BeforeOpenEventArgs | AfterOpenEventArgs): void;
/**
* Occurs when the viewer theme changed by user.
* @example
* ```javascript
* var viewer = new DsPdfViewer(selector, {
* requireTheme: localStorage.getItem('demo_theme') || 'viewer'
* });
* viewer.addDefaultPanels();
* viewer.onThemeChanged.register(function(args) {
* localStorage.setItem('demo_theme', args.theme);
* });
* ```
**/
get onThemeChanged(): EventFan;
/**
* Gets the viewer instance using the host element or host element selector
* @example
* ```javascript
* var viewer = DsPdfViewer.findControl("#root");
* ```
* @param selector
*/
static findControl(selector: string | HTMLElement): GcPdfViewer | undefined;
/**
* Second toolbar API.
**/
get secondToolbar(): SecondToolbar;
/**
* Adds a css style to the view area.
* @returns style element identifier.
* @param cssText
* @example
* ```javascript
* // Enable RTL text direction:
* viewer.addViewAreaStyle(".gc-text-content, p, h1 { direction: rtl !important }");
* ```
*/
addViewAreaStyle(cssText: string): string;
/**
* Removes a css style from the view area by its id.
* @param id style element identifier.
* @example
* ```javascript
* const id = viewer.addViewAreaStyle(".gc-text-content { font-size: 20px !important; }");
* viewer.removeViewAreaStyle(id);
* ```
**/
removeViewAreaStyle(id: string): boolean;
/**
* Update the SVG icon react element.
* @ignore exclude from docs
* @param iconKey
* @param svgIcon
*/
static updateSvgIcon(iconKey: SvgIconKey, svgIcon: Element | string): void;
/**
* Get SVG icon react element.
* @ignore exclude from docs
* @param iconKey
**/
static getSvgIcon(iconKey: SvgIconKey): Element;
/**
* Show animated highlight for a specific annotation and then hide it with animation.
* @param {string | AnnotationBase} annotationId - The ID or annotation object for which to show the highlight.
* @param {number} [animationDelay=2000] - Optional. The delay (in milliseconds) before hiding the animation.
* Minimum value is 1000 milliseconds (1 second).
* @param {string} - Optional. The color in hex format for the highlight.
*/
showAnnotationFocusOutline(annotationId: any, animationDelay?: number, color?: string): void;
/**
* Show PDF Organizer dialog.
* @example
* ```javascript
* viewer.showPdfOrganizer();
* ```
**/
showPdfOrganizer(): PdfOrganizerDialog;
/**
* Show TableDataExtraction dialog.
* @ignore exclude from docs.
* @example
* ```javascript
* viewer.showTableDataExtraction();
* ```
**/
showTableDataExtraction(): TableDataExtractionDialog;
checkAnnotationLocked(annotation: AnnotationBase, editType?: "Any" | "EditProperty" | "Delete" | "EditContents", showErrorMessage?: boolean): boolean;
/**
* 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
* ```javascript
* viewer.eventBus.on("viewersizechanged", function() {
* // Make viewer height equal to content height of inner pages, including the margins:
* document.querySelector("#root").style.height = viewer.pageCount * 50 + viewer.pageCount * viewer.getPageSize(0, true).height + "px";
* // Invalidate layout:
* viewer.invalidate();
* });
* ```
**/
invalidate(): void;
/**
* 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
* ```javascript
* // Example: Mark annotation layers for the first and third pages as dirty:
* viewer.markAnnotationLayerDirty([0, 2]);
* ```
*
* @param {number | number[]} pageIndex - The index or indices of the page(s) for which the annotation layer is marked as dirty.
*/
markAnnotationLayerDirty(pageIndex: number | number[]): any;
/**
* Retrieves the Page View associated with the specified page index.
* @ignore exclude from docs
* @param pageIndex
* @returns
*/
getPageView(pageIndex: number): IGcPageView | undefined;
/**
* Show a second toolbar with a key specified by the toolbarKey argument.
* @param toolbarKey
* @example
* ```javascript
* viewer.showSecondToolbar("draw-tools");
* ```
**/
showSecondToolbar(toolbarKey: SecondToolbarLayoutMode | string): Promise;
/**
* Hide second toolbar.
* @example
* ```javascript
* viewer.hideSecondToolbar();
* ```
**/
hideSecondToolbar(): void;
/**
* Activate editor mode. This method is designed to be used by control developers.
* @ignore exclude from docs.
* @param caller
**/
activateEditorMode(caller: "SecondBar" | "FormEditor" | "AnnotationEdtor"): void;
/**
* Deactivate editor mode. This method is designed to be used by control developers.
* @ignore exclude from docs.
* @param caller
**/
deactivateEditorMode(caller: "SecondBar" | "ViewerLayout"): 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 {Promise} A promise that resolves when all touched annotations have been processed.
* @throws {Error} If an error occurs while fetching or redrawing an annotation, it is caught and logged.
*/
redrawTouchedAnnotations(): Promise;
/**
* 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.
* @param pageIndex
* @param tabs
*/
setPageTabs(pageIndex: number, tabs: "S" | "R" | "C" | "A" | "W" | undefined): void;
/**
* 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.
* @param pageIndex
*/
getPageTabs(pageIndex: number): "S" | "R" | "C" | "A" | "W" | undefined;
/**
* Set the absolute page rotation in degrees.
* Valid values are 0, 90, 180, and 270 degrees.
* Requires SupportApi.
* @param pageIndex
* @param rotation
* @example
* ```javascript
* // Set the first page rotation to 180 degrees:
* await viewer.setPageRotation(0, 180);
* ```
*/
setPageRotation(pageIndex: number, rotation: number, viewRotationIncluded?: boolean): Promise;
/**
* Get the page rotation value.
* @param pageIndex
* @param includeViewRotation Include view rotation, default is true.
* @example
* ```javascript
* // Get the first page rotation value:
* var rotation = viewer.getPageRotation(0);
* ```
*/
getPageRotation(pageIndex: number, includeViewRotation?: boolean): number;
/**
* Use this method to close and release resources occupied by the DsPdfViewer.
**/
dispose(): void;
logError(method: string, message: string): void;
logDebug(method: string, message: string): void;
commitChanges(): void;
cancelChanges(): void;
cancelInlineTextEdit(): string;
/**
* Display confirmation dialog.
* @example
* ```javascript
* const confirmResult = await viewer.confirm("Apply changes?", "info", "Confirm action", ["Yes", "No", "Cancel"]);
* if (confirmResult === "Yes") {
* // put your code here
* } else if (confirmResult === "No") {
* // put your code here
* } else {
* // put your code here
* }
* ```
**/
confirm(confirmationText?: string | JSX.Element, level?: "info" | "warning" | "error", title?: string, buttons?: ConfirmButton[]): Promise;
/**
* Closes the currently open document.
* @example
* ```javascript
* await viewer.close();
* ```
**/
close(): Promise;
/**
* Returns blank document content.
* @example
* ```javascript
* // Create default blank document with 1 empty page.
* viewer.open(DsPdfViewer.getBlankDocumentBytes());
* ```
* @ignore exclude from docs.
**/
static getBlankDocumentBytes(): Uint8Array;
/**
* 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.
*
* @param {string | URL | Uint8Array | Array} file
* 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.
*
* @param {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}
* A promise resolving to the result of loading the document.
*
* @example
* ```javascript
* // Open a PDF document from a URL
* viewer.open("Documents/HelloWorld.pdf");
* ```
*
* @example
* ```javascript
* // Open a PDF document from binary data (Uint8Array)
* const binaryData = new Uint8Array([37, 80, 68, 70, 45, ...]); // PDF file bytes
* viewer.open(binaryData);
* ```
*
* @example
* ```javascript
* // Open a PDF document from a URL with authentication headers
* viewer.open("http://localhost:5005/api/pdf-viewer/GetPdf?file=HelloWorld.pdf", {
* headers: {
* "Authorization": "Basic " + btoa(unescape(encodeURIComponent("USERNAME:PASSWORD"))),
* "CustomHeader": "Custom header value"
* }
* });
* ```
*
* @example
* ```javascript
* // Open a PDF document from an array of bytes
* const byteArray = [37, 80, 68, 70, 45, ...]; // Array representation of PDF bytes
* viewer.open(byteArray);
* ```
*/
open(file?: any | string | URL | Uint8Array | Array, openParameters?: OpenParameters): Promise;
_openLockCap?: {
promise: Promise;
resolve: Function;
reject: Function;
};
lockOpen(): Promise;
unlockOpen(): Promise;
/**
* @ignore exclude from docs.
* @param url
*/
pdfUrlToFileName(url: string): string;
/**
* Show the file open dialog where the user can select the PDF file.
* @example
* ```javascript
* viewer.openLocalFile();
* ```
* */
openLocalFile(): any;
/**
* Creates and opens a new blank document.
* Requires SupportApi.
* @param params Parameters object:
* fileName - name of the file for a new document,
* confirm - show confirmation dialog if there are changes in the document.
* @example
* ```javascript
* // Create a new blank document, name the file "test.pdf",
* // display a confirmation dialog if the active document has been modified.
* viewer.newDocument({ fileName: "test.pdf", confirm: true});
* ```
*/
newDocument(params?: {
fileName?: string;
confirm?: boolean;
} | string): Promise;
/**
* Adds a blank page to the document.
* Requires SupportApi.
* @param params parameters object:
* width - page width in points,
* height - page height in points,
* pageIndex - target page index.
* @example
* ```javascript
* // Create a new blank page and insert it in the second position.
* viewer.newPage({pageIndex: 1});
* ```
*/
newPage(params?: {
width?: number;
height?: number;
pageIndex?: number;
}): Promise;
/**
* Delete page.
* Requires SupportApi.
* @param pageIndex page index to delete.
* @example
* ```javascript
* // Delete page with index 3.
* viewer.deletePage(3);
* ```
*/
deletePage(pageIndex?: number): Promise;
/**
* Opens the browser's print document dialog box.
* @example
* ```javascript
* viewer.print();
* ```
* */
print(): void;
/**
* Downloads the PDF document loaded in the Viewer to the local disk.
* @param fileName the destination file name.
* @example
* ```javascript
* viewer.download();
* ```
*/
download(fileName?: string): void;
/**
* 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 {Object.}
*/
registeredFonts: {
[fontName: string]: {
url: string;
format: FontFormat | undefined;
clientOnly?: boolean;
resolved?: boolean;
};
};
/**
* Preloads a font by adding a element to the document head.
*
* @ignore exclude from docs.
*
* @param {string} url - The URL of the font file to preload.
* @param {FontFormat} type - The format of the font (e.g., 'truetype').
*/
private _preloadFont;
/**
* Checks if a font with the given URL is registered.
*
* @param {string} url - The URL of the font to check.
* @returns {boolean} - Returns true if a font with the given URL is registered, false otherwise.
*/
isFontUrlRegistered(url: any): boolean;
/**
* 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
* ```javascript
* // Registering a fallback font URL
* viewer.registerFallbackFont('https://example.com/fonts/fallbackfont.woff');
* ```
*
* @example
* ```javascript
* // Registering a fallback font with name and URL
* viewer.registerFallbackFont('SampleFont1', 'https://example.com/fonts/SampleFont1.woff');
* ```
*
* @example
* ```javascript
* // Registering a fallback font with name, URL, and format
* viewer.registerFallbackFont('SampleFont2', 'https://example.com/fonts/SampleFont2.ttf', { format: 'truetype' });
* ```
*
* @param {string} fontNameOrUrl - The name of the fallback font to register or the URL of the font file.
* @param {string} url - The URL of the fallback font file.
* @param {FontFormat | { format?: FontFormat, displayName?: string, clientOnly?: boolean }} [args] - Optional parameters for font registration.
* @param {FontFormat} [args.format] - The format of the font file ("truetype", "opentype", "woff", or "woff2"). If not provided, the function will attempt to determine the format from the URL.
* @param {string} [args.displayName] - A user-friendly name for the font.
* @param {boolean} [args.clientOnly] - If true, the font data will not be sent to the SupportApi server. This is useful if the font is already registered on the server.
* @throws {Error} Throws an error if the provided fallback font URL is already registered.
*/
registerFallbackFont(fontNameOrUrl: string, url?: string, args?: FontFormat | {
format?: FontFormat;
displayName?: string;
clientOnly?: boolean;
}): 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
* ```javascript
* // Registering a font with name and URL
* viewer.registerFont('SampleFont3', 'https://example.com/fonts/SampleFont3.woff');
* ```
*
* @example
* ```javascript
* // Registering a font with name, URL, and format
* viewer.registerFont('SampleFont4', 'https://example.com/fonts/SampleFont4.ttf', 'ttf');
* ```
*
* @example
* ```javascript
* // Registering a font without adding it to the UI for selection
* viewer.registerFont('SampleFont5', 'https://example.com/fonts/SampleFont5.ttf', { format: 'ttf', addToUI: false });
* ```
*
* @example
* ```javascript
* // Registering a client-only font without sending it to the SupportApi server
* viewer.registerFont('SampleFont6', 'https://example.com/fonts/SampleFont6.ttf', { format: 'ttf', clientOnly: true });
* ```
*
* @example
* ```javascript
* // Registering a server-only font without registering it on the client
* viewer.registerFont('SampleFont7', 'https://example.com/fonts/SampleFont7.ttf', { format: 'ttf', serverOnly: true });
* ```
*
* @param {string} fontNameOrUrl - The name of the font to register or the URL of the font file.
* @param {string} url - The URL of the font file.
* @param {FontFormat | { format?: FontFormat; displayName?: string; addToUI?: boolean; clientOnly?: boolean; serverOnly?: boolean }} [args] - Optional parameters for font registration.
* @param {FontFormat} [args.format] - The format of the font file ("truetype", "opentype", "woff", or "woff2"). If not provided, the function will attempt to determine the format from the URL.
* @param {string} [args.displayName] - A user-friendly name for the font to be displayed in the UI.
* @param {boolean} [args.addToUI] - If true, the font will be added to the UI for selection. Default is true.
* @param {boolean} [args.clientOnly] - If true, the font data will not be sent to the SupportApi server. This is useful if the font is already registered on the server.
* @param {boolean} [args.serverOnly] - If true, the font will not be registered on the client but will be sent to the SupportApi server.
* @throws {Error} Throws an error if the provided font name is already registered.
*/
registerFont(fontNameOrUrl: string, url?: string, args?: FontFormat | {
format?: FontFormat;
displayName?: string;
addToUI?: boolean;
clientOnly?: boolean;
serverOnly?: boolean;
}): void;
/**
* Resolves registered fonts by downloading their data and storing it.
*
* This method iterates over the registered fonts, downloads the font data if it hasn't been resolved yet,
* and stores the data in the local storage. It returns a list of keys for the resolved font data.
*
* @returns {Promise} - A promise that resolves to an array of keys for the resolved font data.
*/
resolveRegisteredFonts(): Promise;
/**
*
* @ignore exclude from docs
* @param args
* @returns
*/
getModifiedFilesIds(args: {
documentModification: any;
saveSettings?: SaveSettings;
includeFonts?: "All" | "None";
}): Promise;
/**
* Save the modified PDF document to the local disk.
* Requires SupportApi.
* @param fileName Destination file name.
* @param settings Additional save settings.
* @example
* Specify destination file name
* ```javascript
* viewer.save('Test.pdf');
* ```
**/
save(fileName?: string, settings?: SaveSettings): Promise;
/**
* Saves the pages of the current PDF document as PNG images, zips the result images, and downloads the result zip archive.
* Requires SupportApi.
* @param fileName optional, destination zip archive file name.
* @param settings Additional save settings.
* @example
* ```javascript
* // Save the pages of the current PDF document as PNG images and specify destination zip file name:
* viewer.saveAsImages('Test.zip');
* ```
* @example
* ```javascript
* // Save the pages of the current PDF document as PNG images,
* // and specify destination view zoom factor:
* viewer.saveAsImages("sample.pdf", { zoomFactor: 1.5 });
* ```
*/
saveAsImages(fileName?: string, settings?: SaveSettings): Promise;
/**
* Upload local changes to server.
* Requires SupportApi.
* @example
* ```javascript
* viewer.saveChanges().then(function(result) {
* if(result) {
* alert("The document saved on the server.");
* } else {
* alert("Cannot save the document on the server.");
* }
* });
* ```
*/
saveChanges(): Promise;
/**
* Executes "Submit A Form action" to send filled form data to a web server or email.
* Form data is submitted as HTML form using HTML {@link https://www.w3schools.com/jsref/met_form_submit.asp | submit} method.
* @param submitUrl Destination URI.
* @param options Optional, submit form options.
* @example
* Submit form to a web server using absolute URL:
* ```javascript
* viewer.submitForm("http://myhost.local/AcceptHtmlForm");
* ```
* @example
* Submit form to a web server using relative URL:
* ```javascript
* viewer.submitForm("/CustomFormHandler");
* ```
* @example
* Submit form to an email address:
* ```javascript
* viewer.submitForm("mailto:myform@example.com");
* ```
**/
submitForm(submitUrl: string, options?: SubmitFormOptions): Promise;
/**
* Reset form values.
**/
resetForm(): void;
/**
* @ignore used for tests
**/
getSubmitTransportForm(submitUrl: any, submitForm?: true | {
fields: string[];
refs: string[];
include: boolean;
includeNoValueFields: boolean;
exportFormat: boolean;
getMethod: boolean;
submitCoordinates: boolean;
xFDF: boolean;
submitPDF: boolean;
canonicalFormat: boolean;
}): HTMLFormElement | null;
get annotationStorage(): any;
/**
* Use this method to validate an active form and get the validation result.
* @param validator 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.
* @param silent Optional. Pass true if you don't want to display any messages to the user, but just want to get the final validation result.
* @param ignoreValidationAttrs 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 Returns true if validation was successful, false, or a string with a validation error message when validation is failed.
* @example
* ```javascript
* // Validate all form fields, each field must have the value "YES" or "NO".
* viewer.validateForm((fieldValue, field) => { return (fieldValue === "YES" || fieldValue === "NO") ? true : "Possible value is YES or NO."; });
* ```
*/
validateForm(validator?: (fieldValue: string | string[], field: WidgetAnnotation) => boolean | string, silent?: boolean, ignoreValidationAttrs?: boolean): string | boolean;
/**
* Gets security information for the current document.
* @example
* ```javascript
* const docSecurityInfo = await viewer.getDocumentSecurity();
* ```
**/
getDocumentSecurity(): Promise;
/**
* Gets meta data information for the current document.
* @example
* ```javascript
* const docMetaInfo = await viewer.getDocumentInformation();
* ```
**/
getDocumentInformation(): Promise;
/**
* 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.
* @param pageNumber
* @example
* ```javascript
* // Go to the second page:
* viewer.goToPageNumber(2);
* ```
**/
goToPageNumber(pageNumber: number): void;
/**
* Go to the page with the specific page index.
* @since 2.3.1
* @param pageIndex
* @example
* ```javascript
* // Go to the first page:
* viewer.goToPage(0);
* ```
**/
goToPage(pageIndex: number): void;
/**
* Go to the first page.
* @example
* ```javascript
* viewer.goToFirstPage();
* ```
**/
goToFirstPage(): void;
/**
* Go to the previous page.
* @example
* ```javascript
* viewer.goToPrevPage();
* ```
**/
goToPrevPage(): void;
/**
* Go to the next page.
* @example
* ```javascript
* viewer.goToNextPage();
* ```
* */
goToNextPage(): void;
/**
* Go to the last page.
* @example
* ```javascript
* viewer.goToLastPage();
* ```
* */
goToLastPage(): void;
/**
* Navigates to the first page of the document.
* @ignore exclude from docs
* @returns {void}
*/
firstPage(): any;
/**
* Navigates to the previous page.
* @ignore exclude from docs
* @param {Object} [params] - Optional parameters for navigation.
* @param {"top" | "bottom"} [params.edge] - Specifies the edge of the page to align with the viewport ("top" or "bottom").
* @returns {boolean} - Returns `true` if navigation was successful, otherwise `false`.
*/
prevPage(params?: {
edge: "top" | "bottom";
}): any;
/**
* Navigates to the next page.
* @ignore exclude from docs
* @returns {boolean} - Returns `true` if navigation was successful, otherwise `false`.
*/
nextPage(): any;
/**
* Navigates to the last page of the document.
* @ignore exclude from docs
* @returns {void}
*/
lastPage(): any;
/**
* Scrolls a page into view.
*
* @deprecated This method has been deprecated since v2.3.1.
* Use {@link goToPage} or {@link scrollAnnotationIntoView} instead.
*
* @param {Object} params - The scroll parameters.
* @param {number} params.pageNumber - The page number to scroll to.
* @param {Array} [params.destArray] - 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`.
*
* @param {boolean} [params.allowNegativeOffset=false] - Whether to allow negative page offsets.
*
* @example
* ```javascript
* // Scroll to page 10.
* viewer.scrollPageIntoView({ pageNumber: 10 });
* ```
*
* @example
* ```javascript
* // Scroll an annotation's bounding rectangle into view.
* const rectangle = annotation.rect;
* const pagePosX = rectangle[0];
* const pagePosY = rectangle[1] + Math.abs(rectangle[3] - rectangle[1]);
* viewer.scrollPageIntoView({
* pageNumber: pageIndex + 1,
* destArray: [null, { name: "XYZ" }, pagePosX, pagePosY, viewer.zoomValue / 100.0]
* });
* ```
*/
scrollPageIntoView(params: {
pageNumber: number;
destArray?: any[];
allowNegativeOffset?: boolean;
}): void;
/**
* The method loads the page at the index specified by the pageIndex parameter, and scrolls the page into the view.
* @param pageIndex Destination page index.
* @param destArray Array with destination information.
* destArray[0] // not used, can be null, pdf page reference (for internal use only).
* destArray[1] // contains destination view fit type name:
{ name: 'XYZ' } - Destination specified as top-left corner point and a zoom factor (the lower-left corner of the page is the origin of the coordinate system (0, 0)).
{ name: 'Fit' } - Fits the page into the window
{ name: 'FitH' } - Fits the widths of the page into the window
{ name: 'FitV' } - Fits the height of the page into a window.
{ name: 'FitR' } - Fits the rectangle specified by its top-left and bottom-right corner points into the window.
{ name: 'FitB' } - Fits the rectangle containing all visible elements on the page into the window.
{ name: 'FitBH' } - Fits the width of the bounding box into the window.
{ name: 'FitBV' } - Fits the height of the bounding box into the window.
* destArray[2] // x position offset
* destArray[3] // y position offset (note, the lower-left corner of the page is the origin of the coordinate system (0, 0))
* destArray[4] // can be null, contains bounding box width when view name is FitR,
* contains scale when view name is XYZ,
* destArray[5] // can be null, contains bounding box height when view name is FitR
* @param scrollIntoViewOptions Optional scroll options. Used when the destArray parameter is not specified.
* If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor.
* Corresponds to scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value.
* If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor.
* Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"}.
* @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
* ```javascript
* // Load and display the first page:
* viewer.loadAndScrollPageIntoView(0);
* ```
*/
loadAndScrollPageIntoView(pageIndex: number, destArray?: any[], scrollIntoViewOptions?: ScrollPageIntoViewOptions | boolean): Promise;
/**
* Gets the scroll view HTML element.
* Note, the left scroll position is calculated by the viewer
* automatically - so, usually, you don't need to change left scroll position.
* @example
* ```javascript
* // Scroll to the top of the document:
* viewer.scrollView.scrollTop = 0;
* ```
**/
get scrollView(): HTMLElement;
/**
* Set active viewer theme.
* @param theme theme name, specified in themes option.
* @example
* ```javascript
* viewer.setTheme("themes/light-blue");
* ```
*/
setTheme(theme?: string): void;
/**
* Execute Cut action (Ctrl + X shortcut).
* Requires SupportApi.
* @param buffer data to cut.
* @example
* ```javascript
* viewer.execCutAction();
* ```
*/
execCutAction(buffer?: CopyBufferData): Promise;
/**
* Execute Copy action (Ctrl + C shortcut).
* Requires SupportApi.
* @param buffer data to copy.
* @example
* ```javascript
* viewer.execCopyAction();
* ```
*/
execCopyAction(buffer?: CopyBufferData): Promise;
/**
* Execute Delete action (DEL shortcut).
* Requires SupportApi.
* @param buffer data to delete.
* @example
* ```javascript
* viewer.execDeleteAction();
* ```
*/
execDeleteAction(buffer?: CopyBufferData): Promise;
/**
* Execute Paste action (Ctrl + V shortcut).
* Requires SupportApi.
* @example
* ```javascript
* if(viewer.hasCopyData) {
* viewer.execPasteAction({x: 10, y: 10, pageIndex: 0});
* }
* ```
* @param point insert position.
*/
execPasteAction(point?: GcSelectionPoint): Promise;
/**
* Load an updated document list into document list panel.
* @param documentListUrl Optional. Document list service URL or array with the document list items.
* @example
* ```javascript
* viewer.loadDocumentList();
* ```
* @example
* ```javascript
* // Load document list using DATA URI:
* viewer.loadDocumentList('data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "doc 2", "title": "title 2"}]');
* ```
**/
loadDocumentList(documentListUrl?: string | DocumentListItem[]): void;
/**
* Opens the side panel.
* @param panelHandleOrId Panel handle or panel id to open.
* @example
* ```javascript
* const layersPanelHandle = viewer.addLayersPanel();
* viewer.open("house-plan.pdf").then(()=> {
* viewer.openPanel(layersPanelHandle);
* });
* ```
*/
openPanel(panelHandleOrId: PanelHandle | string): void;
/**
* Closes the side panel.
* @param panelHandleOrId Optional. Panel handle or panel id to close.
* @example
* ```javascript
* viewer.closePanel();
* ```
*/
closePanel(panelHandleOrId?: PanelHandle | string): void;
/**
* Add default set of sidebar panels with default order:
* 'Thumbnails', 'Search', 'Outline', 'Layers', 'StructureTree', 'Attachments'
* @example
* ```javascript
* viewer.addDefaultPanels();
* ```
**/
addDefaultPanels(): 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"]
* @param documentListUrl Optional. Document list service URL or predefined list of document list items.
* @example
* Example content for the documentslist.json file:
* ```javascript
* ["file1.pdf", "file2.pdf"].
* ```
* @example
* ```javascript
* var viewer = new DsPdfViewer("#root", { documentListUrl: "/documentslist.json" });
* viewer.addDocumentListPanel();
* ```
* @example
* ```javascript
* var viewer = new DsPdfViewer("#root");
* // Add document list panel and specify documentListUrl option:
* viewer.addDocumentListPanel('/documentslist.json');
* ```
* @example
* ```javascript
* var viewer = new DsPdfViewer("#root");
* // Add document list panel and specify documentListUrl option using DATA URI:
* viewer.addDocumentListPanel('data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "Hello doc 2", "title": "title 2"}]');
* ```
**/
addDocumentListPanel(documentListUrl?: string | DocumentListItem[]): PanelHandle;
/**
* Add a panel with a list of shared documents.
* @example
* ```javascript
* var viewer = new DsPdfViewer("#root");
* viewer.addSharedDocumentsPanel();
* ```
*/
addSharedDocumentsPanel(): PanelHandle;
/**
* Add Thumbnails panel
* @example
* ```javascript
* viewer.addThumbnailsPanel();
* ```
**/
addThumbnailsPanel(): PanelHandle;
/**
* Add Search panel.
* @example
* ```javascript
* viewer.addSearchPanel();
* ```
**/
addSearchPanel(): PanelHandle;
/**
* Add annotation editor panel.
* Requires SupportApi.
* @example
* ```javascript
* viewer.addAnnotationEditorPanel();
* ```
**/
addAnnotationEditorPanel(): PanelHandle;
/**
* Add articles panel.
* @example
* ```javascript
* viewer.addArticlesPanel();
* ```
**/
addArticlesPanel(): PanelHandle;
/**
* Add attachments panel.
* @example
* ```javascript
* viewer.addAttachmentsPanel();
* ```
**/
addAttachmentsPanel(): PanelHandle;
/**
* Add outline panel.
* @example
* ```javascript
* viewer.addOutlinePanel();
* ```
**/
addOutlinePanel(): PanelHandle;
/**
* Add structure tree panel.
* @example
* ```javascript
* viewer.addStructureTreePanel();
* ```
* @ignore exclude from docs
**/
addStructureTreePanel(): PanelHandle;
/**
* Add optional content layers panel.
* @example
* ```javascript
* viewer.addLayersPanel();
* ```
**/
addLayersPanel(): PanelHandle;
/**
* Add form editor panel.
* Requires SupportApi.
* @example
* ```javascript
* var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
* viewer.addDefaultPanels();
* viewer.addFormEditorPanel();
* ```
*/
addFormEditorPanel(): PanelHandle;
/**
* 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.
* @param sidebarState pass 'expanded' value if you wish the Reply tool to be expanded initially. Default value is collapsed.
* @example
* ```javascript
* viewer.addReplyTool('expanded');
* ```
*/
addReplyTool(sidebarState?: GcRightSidebarState): void;
/**
* Clone annotation or field given by parameter annotation.
* Requires SupportApi.
* @param annotation Annotation to clone.
* @example
* ```javascript
* // Below is the sample how to copy field with name "field1" and put it to the second page programmatically:
* // Find field widget with name field1:
* var resultData = await viewer.findAnnotation("field1", {findField: 'fieldName'});
* // Clone field:
* var clonedField = viewer.cloneAnnotation(resultData[0].annotation);
* // Change field name property:
* clonedField.fieldName = "field1Copy";
* // Add cloned field to the second page.
* viewer.addAnnotation(1, clonedField);
* ```
* */
cloneAnnotation(annotation: AnnotationBase): AnnotationBase;
/**
* Returns the contents of the text selection.
* @example
* ```javascript
* alert("Text selected by the user: " + viewer.getSelectedText());
* ```
**/
getSelectedText(): string;
/**
* Returns coordinates of the selected text.
* @ignore exclude from docs
* @returns
*/
getSelectedTextCoordinates(): null | {
pageIndex: number;
outerRect: number[];
quadPoints: {
x: number;
y: number;
}[][];
};
/**
*
* @ignore exclude from docs
**/
get selectionCopier(): any;
/**
* Collects quadrilateral points based on the provided PaintedBoxInfo array.
*
* @param {PaintedBoxInfo[]} paintedBoxes - An array of PaintedBoxInfo objects representing painted boxes on a PDF page.
* @returns {TextPartsQuadPoints} - Information about selected or highlighted text fragments, including
* the page index, outer rectangle coordinates, and quadrilateral points.
*
* @description
* This method takes an array of PaintedBoxInfo objects, where each object contains information about a painted box
* on a PDF page. It calculates the outer rectangle coordinates and quadrilateral points for the selected or highlighted text fragments.
* The coordinates have their origin at the bottom-left corner as per PDF specifications.
*
* The quadPoints array is sorted as follows:
* [{ x: minX, y: maxY },
* { x: maxX, y: maxY },
* { x: minX, y: minY },
* { x: maxX, y: minY }]
*/
collectQuadPoints(paintedBoxes: PaintedBoxInfo[]): TextPartsQuadPoints;
pushModificationsState(modificationsState: ModificationsState): void;
/**
* Converts PDF rectangle or PDF point coordinates to absolute window coordinates.
*
* @param pageIndex - Index of the PDF page.
* @param 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 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].
*/
convertPdfRectToWindowCoordinates(pageIndex: number, rect: number[] | Rect): number[];
/**
* Converts point to page's viewport taking into account page scale.
* @deprecated do not use this method for a new logic.
* Instead, use the convertToViewportPoint, convertToViewportRectangle, convertToPdfPoint methods from PageViewport instance.
* See {@link getViewPort}.
* @ignore exclude from docs
* @param point
* @example viewer.addStickyNote(viewer.toViewPortPoint({x: 50, y: 50, pageIndex: 0}));
*/
toViewPortPoint(point: GcSelectionPoint): GcSelectionPoint;
/**
* Add sticky note to the document.
* Requires SupportApi.
* @param position page relative point. Origin is top/left.
* Note, pageIndex must be specified.
* @example viewer.addStickyNote(viewer.toViewPortPoint({x: 50, y: 50, pageIndex: 0}));
*/
addStickyNote(position: GcSelectionPoint): void;
/**
* Converts the origin of the Y coordinate to the bottom.
* @param pageIndex
* @param y
* @example
* ```javascript
* var pageIndex = 0;
* var y = 0;
* // Convert y value from TopLeft origin to BottomLeft origin
* // taking into account the viewport from the first page:
* var yBottom = viewer.changeOriginToBottom(pageIndex, y);
* ```
*/
changeOriginToBottom(pageIndex: any, y: any): number;
/**
* Converts the origin of the Y coordinate to the top.
* @param pageIndex
* @param y
* @example
* ```javascript
* var pageIndex = 0;
* var y = 0;
* // Convert y value from BottomLeft origin to TopLeft origin
* // taking into account the viewport from the first page:
* var yTop = viewer.changeOriginToTop(pageIndex, y);
* ```
*/
changeOriginToTop(pageIndex: any, y: any): number;
/**
* This method changes coordinate system origin for y coordinate given by parameter
* y and returns converted value.
* @param pageIndex
* @param y
* @param srcOrigin
* @param destOrigin
* @example
* ```javascript
* var pageIndex = 0;
* var y = 0;
* // Convert from TopLeft origin to BottomLeft origin
* // taking into account the viewport from the first page:
* var yBottom = viewer.changeOrigin(pageIndex, y, 'TopLeft', 'BottomLeft');
* ```
*/
changeOrigin(pageIndex: number, y: number, srcOrigin: 'TopLeft' | 'BottomLeft', destOrigin: 'TopLeft' | 'BottomLeft'): number;
/**
* This method changes coordinate system origin for rectangle given by parameter
* bounds and returns converted rectangle value;
* @param pageIndex Page index (Zero based).
* @param bounds bounds array: [x1, y1, x2, y2]
* @param srcOrigin Source coordinate system origin. Possible values are: 'TopLeft' or 'BottomLeft'.
* @param destOrigin Destination coordinate system origin. Possible values are: 'TopLeft' or 'BottomLeft'.
* @param normalize Optional. Default is true. Normalize rectangle [x1, y1, x2, y2] so that (x1,y1) < (x2,y2).
* @example
* ```javascript
* var pageIndex = 0;
* var topLeftBounds = [0, 0, 200, 40];
* // Convert the topLeftBounds from TopLeft origin to BottomLeft origin
* // taking into account the viewport from the first page and store
* // the result in the bottomLeftBounds variable:
* var bottomLeftBounds = viewer.changeBoundsOrigin(pageIndex, topLeftBounds, 'TopLeft', 'BottomLeft');
* ```
* @example
* ```javascript
* // Gets the bounds of the annotation relative to the viewport:
* const pageIndex = 0;
* const viewPort = viewer.getViewPort(pageIndex);
* const annotationRect = (await viewer.findAnnotation('10R'))[0].annotation.rect;
* const invertedRect = viewer.changeBoundsOrigin(pageIndex, annotationRect, 'BottomLeft', 'TopLeft');
* const annotationX1 = invertedRect[0] * viewPort.scale;
* const annotationY1 = invertedRect[1] * viewPort.scale;
* const annotationX2 = invertedRect[2] * viewPort.scale;
* const annotationY2 = invertedRect[3] * viewPort.scale;
* ```
*/
changeBoundsOrigin(pageIndex: number, bounds: number[], srcOrigin: 'TopLeft' | 'BottomLeft', destOrigin: 'TopLeft' | 'BottomLeft', normalize?: boolean): number[];
/**
* Returns PDF page view port information.
* @param pageIndex Page index (Zero based).
* @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
* ```javascript
* // Get the viewport object for the first page:
* var viewPort = viewer.getViewPort(0);
* ```
**/
getViewPort(pageIndex: number): PageViewport;
/**
* Returns the page size. By default, return size without scale,
* pass true for the includeScale argument if you want to get the scaled value.
* @param pageIndex Page index (Zero based).
* @param includeScale Optional. If true, the method will return scaled value.
* @example
* ```javascript
* // Get first page size:
* var pageSize = viewer.getPageSize(0);
* ```
*/
getPageSize(pageIndex: number, includeScale?: boolean): {
width: number;
height: number;
};
/**
* Set page size.
* Requires SupportApi.
* @param pageIndex
* @param size
* @example
* ```javascript
* // Set new page size for the first page:
* viewer.setPageSize(0, { width: 300, height: 500 } );
* ```
**/
setPageSize(pageIndex: number, size: {
width: number;
height: number;
}): Promise;
/**
* 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.
* @param {number | { pageIndex: number }} pageIndex - 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).
* @param {AnnotationBase} annotation - The annotation object to be added.
* @param {{ skipPageRefresh?: boolean }} [args] - Additional optional arguments, such as skipping page refresh.
* @returns {Promise<{ pageIndex: number, annotation: AnnotationBase }>} - A promise resolving to an object
* containing the page index and the added annotation.
* @example
* ```javascript
* // Add the Square annotation to the first page when you open the document:
* viewer.onAfterOpen.register(function() {
* viewer.addAnnotation(0, {
* annotationType: 5, // AnnotationTypeCode.SQUARE
* subtype: "Square",
* borderStyle: { width: 5, style: 1 },
* color: [0, 0, 0],
* interiorColor: [255, 0, 0],
* rect: [0, 0, 200, 200]
* });
* });
* ```
* @example
* ```javascript
* // Below is the sample how to copy field with name "field1" and put it to the second page programmatically:
* // Find field widget with name field1:
* var resultData = await viewer.findAnnotation("field1", {findField: 'fieldName'});
* // Clone field:
* var clonedField = viewer.cloneAnnotation(resultData[0].annotation);
* // Change field name property:
* clonedField.fieldName = "field1Copy";
* // Add cloned field to the second page.
* viewer.addAnnotation(1, clonedField);
* ```
* @example
* ```javascript
* // Add the FileAttachment annotation to the first page when you open the document:
* viewer.onAfterOpen.register(function() {
* viewer.addAnnotation(0, {
* annotationType: 17, // AnnotationTypeCode.FILEATTACHMENT
* subtype: "FileAttachment",
* file: {
* filename: 'attachment.png',
* content: new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,45,0,0,0,32,8,6,0,0,0,134,132,241,68,0,0,0,4,103,65,77,65,0,0,177,143,11,252,97,5,0,0,7,56,73,68,65,84,88,9,205,88,11,112,92,85,25,254,255,115,179,129,148,36,155,190,147,187,91,228,49,64,25,99,181,105,169,117,176,149,34,99,113,80,65,165,162,118,168,15,44,3,42,99,55,125,8,29,59,221,90,29,132,38,187,43,56,162,22,5,161,206,240,24,64,40,130,15,156,138,226,3,147,14,118,74,219,41,157,102,138,238,166,155,180,105,246,238,210,144,108,238,158,223,239,44,189,233,110,186,217,172,54,64,239,204,206,61,143,255,241,157,255,156,255,251,207,93,166,183,243,185,185,211,55,125,246,69,239,177,136,166,176,150,92,86,185,201,190,244,238,30,10,47,113,79,199,45,159,142,114,41,221,192,93,125,65,62,203,183,92,136,174,99,226,185,144,57,171,80,14,227,57,22,249,155,102,218,46,110,238,177,195,107,38,191,94,56,95,73,123,194,64,207,220,146,156,81,229,171,217,196,164,110,130,99,31,145,116,144,208,14,210,178,155,20,245,137,102,75,20,53,50,211,249,36,124,53,49,205,133,115,87,72,111,29,146,236,247,142,134,166,31,174,4,176,145,153,16,208,118,52,213,194,108,61,13,144,141,48,248,184,43,58,150,108,245,255,179,28,8,187,189,111,150,178,170,215,65,231,102,44])
* },
* rect: [0, 0, 20, 20]
* });
* });
* ```
*/
addAnnotation(pageIndex: number, annotation: AnnotationBase, args?: {
skipPageRefresh?: boolean;
}): Promise<{
pageIndex: number;
annotation: AnnotationBase;
}>;
/**
* Lock annotation for editing.
* @param id annotation id
*/
lockAnnotation(id: string | AnnotationBase): Promise;
/**
* Unlock annotation for editing.
* @param id annotation id
*/
unlockAnnotation(id: string | AnnotationBase): Promise;
/**
* Add signature annotation.
* @ignore exclude from docs
* @param imageData Binary image data.
* @param fileId File name which will be associated with image data.
* @param pageIndex Destination page index.
* @param rect Destination rectangle: [x1, y1, x2, y2]. Origin is bottom-left.
* @param select Select annotation
*/
addSignature(imageData: Uint8Array | null, args: {
fileId: string;
pageIndex: number;
rect: number[];
select?: boolean;
subject?: string;
fileName?: string;
convertToContent?: boolean;
}): Promise<{
pageIndex: number;
annotation: AnnotationBase;
}>;
/**
* Add stamp annotation.
* @example
* ```javascript
* // Add Graphical signature to the PDF using external image
* function addStampFromUrl(imageUrl, viewer) {
* fetch(imageUrl)
* .then(response => response.blob())
* .then(blob => blob.arrayBuffer())
* .then(arrayBuffer => {
* const fileId = new Date().getTime() + ".png";
* const fileName = fileId;
* const pageIndex = 0;
* const imageData = new Uint8Array(arrayBuffer);
* const rect = [0, 0, 200, 200];
*
* viewer.storage.setItem(fileId, imageData);
* viewer.addStamp(
* imageData,
* {
* fileId,
* fileName,
* pageIndex,
* rect,
* select: false,
* subject: "",
* rotate: 0,
* convertToContent: false
* });
* });
* }
* // Usage:
* addStampFromUrl("http://localhost/image.png", viewer);
* ```
* @param imageData Uint8Array, binary image data.
* @param fileId File identifier which will be associated with image data.
* @param pageIndex Destination page index.
* @param rect Destination rectangle: [x1, y1, x2, y2]. Origin is bottom-left.
* @param select Select stamp annotation
*/
addStamp(imageData: Uint8Array | null, args: {
fileId: string;
pageIndex: number;
rect: number[];
select?: boolean;
subject?: string;
fileName?: string;
rotate?: number;
convertToContent?: boolean;
}): Promise<{
pageIndex: number;
annotation: AnnotationBase;
}>;
/**
* Loads the updated list of shared documents into the shared documents panel.
* @example
* ```javascript
* viewer.loadSharedDocuments();
* ```
* */
loadSharedDocuments(): void;
/**
* Open shared document by it's id.
* @example
* Open shared document using document index:
* ```javascript
* async function openSharedDocByIndex(viewer, sharedDocIndex) {
* const sharedDocuments = await viewer.getSharedDocuments();
* viewer.openSharedDocument(sharedDocuments[sharedDocIndex].documentId);
* }
* // Open first shared document:
* openSharedDocByIndex(DsPdfViewer.findControl("#viewer"), 0);
* ```
* @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.
* ```javascript
* async function openSharedDocByName(viewer, fileName) {
* const sharedDocuments = await viewer.getSharedDocuments();
* const index = sharedDocuments.findIndex(d=>d.fileName === fileName);
* if(index !== -1)
* viewer.openSharedDocument(sharedDocuments[index].documentId);
* }
* // Open the first available shared document named "financial-report.pdf":
* openSharedDocByName(DsPdfViewer.findControl("#viewer"), "financial-report.pdf");
* ```
* @param sharedDocumentId unique shared document identifier.
*/
openSharedDocument(sharedDocumentId: string): Promise;
/**
* Open shared document using document’s file name.
* Note, a document with the same name can be shared multiple times.
* The openSharedDocumentByName opens the first found document with the given fileName.
* @example
* ```javascript
* // Open the first available shared document named "sample.pdf":
* viewer.openSharedDocumentByName("sample.pdf");
* ```
**/
openSharedDocumentByName(fileName: string): Promise;
/**
* Open shared document using document index.
* @example
* Open second shared document:
* ```javascript
* viewer.openSharedDocumentByIndex(1);
* ```
**/
openSharedDocumentByIndex(sharedDocIndex: number): Promise;
/**
* Returns a list of shared documents available to the current user.
* @example
* ```javascript
* var sharedDocuments = await viewer.getSharedDocuments();
* ```
**/
getSharedDocuments(): Promise;
getReplaceTextData(): ReplaceTextModel[] | undefined;
/**
* Validates the given annotation object based on its type and properties.
*
* This function performs multiple checks to ensure that the annotation object conforms to expected criteria.
* @ignore Exclude from documentation.
*
* @example
* ```javascript
* // Validate annotation without throwing exceptions
* const annotation = {
* annotationType: 20, // Example widget type
* gcProps: { type: "text" }, // Example properties for widgets
* fieldName: "fld1", // Field name for the annotation
* rect: [50, 400, 250, 24] // Example bounding rectangle
* };
* const isValid = viewer.validateAnnotation(annotation, false);
* console.log(isValid); // true if valid, false otherwise
*
* // Validate annotation and throw exception on failure
* const invalidAnnotation = {
* annotationType: 10, // Invalid annotation type (not a widget)
* gcProps: { type: "Date" } // gcProps should not be present
* };
* viewer.validateAnnotation(invalidAnnotation, true);
* ```
*
* @param {Object} annotation - The annotation object to validate.
* @param {boolean} [throwException=true] - Determines whether to throw an exception when validation fails. If `true`, an exception is thrown; if `false`, the function returns `false` instead of throwing an exception.
* @returns {boolean} - Returns `true` if the annotation passes all validation checks, `false` otherwise.
* @throws {Error} - Throws an error with a descriptive message if validation fails and `throwException` is `true`.
*/
validateAnnotation(annotation: AnnotationBase, throwException?: boolean): boolean;
/**
* Update annotation.
* Requires SupportApi.
* @param pageIndex
* @param annotation
* @param args
* @returns Promise, resolved by updated annotation object.
* @example
* ```javascript
* // Update annotation on the first page (page index is 0):
* viewer.updateAnnotation(0, annotation1);
* ```
*/
updateAnnotation(pageIndex: number, annotation: AnnotationBase, args?: {
skipPageRefresh?: boolean;
prevPageIndex?: number;
changedPageIndex?: number;
}): Promise<{
pageIndex: number;
annotation: AnnotationBase;
}>;
/**
* Update multiple annotations at the same time.
* Requires SupportApi.
* @param pageIndex
* @param annotations
* @param args
* @returns Promise, resolved by updated annotation objects.
* @example
* ```javascript
* // Update annotations on the second page (page index is 1):
* var annotationsToUpdate = [annotation1, annotation2];
* viewer.updateAnnotations(1, annotationsToUpdate);
* ```
**/
updateAnnotations(pageIndex: number, annotations: AnnotationBase | AnnotationBase[], args?: {
skipPageRefresh?: boolean;
}): Promise<{
pageIndex: number;
annotations: AnnotationBase[];
}>;
/**
* Update radio buttons group given by parameter fieldName with new field value.
* @param fieldName Grouped radio buttons field name
* @param newValue New fieldValue
* @param args
* skipPageRefresh boolean - set to true if you don't need to update page display. Default is false.
* propertyName string - property name to update. Default is "fieldValue".
* @returns Promise resolved by boolean value, true - radio buttons updated, false - an error occurred.
* @example
* ```javascript
* viewer.updateGroupFieldValue("radiogroup1", "3", { skipPageRefresh: true } );
* ```
* @example
* ```javascript
* viewer.updateGroupFieldValue("radiogroup1", "3", { propertyName: "alternativeText", skipPageRefresh: true } );
* ```
*/
updateGroupFieldValue(fieldName: string, newValue: string, args?: {
skipPageRefresh?: boolean;
propertyName?: string;
}): Promise;
/**
* Remove annotation from document.
* Requires SupportApi.
* @param pageIndex
* @param annotationId
* @param args
* @example
* ```javascript
* // Remove annotation with id '2R' located on the first page:
* viewer.removeAnnotation(0, '2R');
* ```
*/
removeAnnotation(pageIndex: number, annotationId: string, args?: {
skipPageRefresh?: boolean;
}): Promise;
/**
* Find annotation(s) within opened document. Returns promise which will be resolved with search results.
* @deprecated Deprecated since version 2.3.1
* @ignore exclude from docs
* @example
* ```javascript
* // Find annotation with id '2R':
* viewer.findAnnotation("2R").then(function(dataArray) {
* if(dataArray[0])
* alert(`Annotation ${dataArray[0].annotation.id} found on page with index ${dataArray[0].pageNumber - 1}.`);
* else
* alert('Annotation not found.');
* });
* ```
* @example
* ```javascript
* // find all fields with name field1:
* viewer.findAnnotation("field1", {findField: 'fieldName', findAll: true}).then(function(dataArray) {
*
* });
* ```
* @example
* ```javascript
* // find all text annotations on page 1:
* const resultArr = await viewer.findAnnotation(1, // 1 - AnnotationTypeCode.TEXT
* { findField: 'annotationType',
* pageNumberConstraint: 1, findAll: true });
* ```
* @param findString Find query.
* @param findParams Find parameters. By default annotation will be searched by id without page constraint.
*/
findAnnotation(findString: string | number, findParams?: {
findField?: 'id' | 'title' | 'contents' | 'fieldName' | string;
pageNumberConstraint?: number;
findAll?: boolean;
}): Promise<{
pageNumber: number;
annotation: AnnotationBase;
}[]>;
/**
* Find annotation(s) within opened document. Returns promise which will be resolved with search results.
* @example
* ```javascript
* // Find annotation with id '2R':
* viewer.findAnnotations("2R").then(function(dataArray) {
* if(dataArray[0])
* alert(`Annotation ${dataArray[0].annotation.id} found on page with index ${dataArray[0].pageIndex}.`);
* else
* alert('Annotation not found.');
* });
* ```
* @example
* ```javascript
* // find all fields with name field1:
* viewer.findAnnotations("field1", {findField: 'fieldName', findAll: true}).then(function(dataArray) {
*
* });
* ```
* @param findString Find query.
* @param findParams Find parameters. By default annotation will be searched by id without page index constraint.
*/
findAnnotations(findString: string | number, findParams?: {
findField?: 'id' | 'title' | 'contents' | 'fieldName' | string;
pageIndexConstraint?: number;
findAll?: boolean;
}): Promise<{
pageIndex: number;
annotation: AnnotationBase;
}[]>;
/**
* Select the annotation to edit.
* Requires SupportApi.
* @param pageIndex Page index (zero based) or annotation id.
* @param annotation Annotation id or annotation object itself.
* @example
* ```javascript
* // Select an annotation with id 2R:
* viewer.selectAnnotation("2R");
* ```
* @example
* ```javascript
* // Select an annotation with id 9R located on the last page:
* viewer.selectAnnotation(viewer.pageCount - 1, "9R");
* ```
*/
selectAnnotation(pageIndex: number | string, annotation?: AnnotationBase | string): Promise;
/**
* Reset annotation selection.
* Requires SupportApi.
* @example
* ```javascript
* viewer.unselectAnnotation();
* ```
**/
unselectAnnotation(): any;
/**
* Scroll annotation into view.
* @param pageIndexOrId
* @param annotationOrScrollBehavior
* @param scrollBehavior
* @example
* ```javascript
* // Scroll the annotation located on the second page into view.
* viewer.scrollAnnotationIntoView(1, annotation);
* ```
* @example
* ```javascript
* // Scroll annotation into view by id.
* viewer.scrollAnnotationIntoView("2R");
* ```
* @example
* ```javascript
* // Scroll annotation into view by id using smooth scroll behavior.
* viewer.scrollAnnotationIntoView("2R", { behavior: "smooth" });
* ```
*/
scrollAnnotationIntoView(pageIndexOrId: number | string, annotationOrScrollOptions?: AnnotationBase | string | ScrollBehavior | ScrollPageIntoViewOptions, scrollOptions?: ScrollBehavior | ScrollPageIntoViewOptions): Promise;
/**
* Undo document changes.
* Requires SupportApi.
* @example
* ```javascript
* if(viewer.hasUndoChanges) {
* viewer.undoChanges();
* }
* ```
**/
undoChanges(): void;
/**
* Undo document changes.
* Requires SupportApi.
* @ignore exclude
* @example
* ```javascript
* if(viewer.hasUndo) {
* viewer.undo();
* }
* ```
**/
undo(): void;
/**
* Redo document changes.
* Requires SupportApi.
* @example
* ```javascript
* if(viewer.hasRedoChanges) {
* viewer.redoChanges();
* }
* ```
**/
redoChanges(): void;
/**
* Redo document changes.
* Requires SupportApi.
* @ignore exclude
* @example
* ```javascript
* if(viewer.hasRedo) {
* viewer.redo();
* }
* ```
**/
redo(): 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.
*
* @param indicesToRepaint - (Optional) An array of page indices to repaint. If omitted, the method repaints visible pages.
* @param options - (Optional) Additional options for repaint behavior.
* @param options.repaintOnVisible - If `true`, ensures that invisible pages will be repainted when they become visible. Defaults to `true`.
*
* @throws {Error} 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 });
*/
repaint(indicesToRepaint?: number[], options?: {
repaintOnVisible?: boolean;
}): void;
/**
* Repaints the text layer for the visible pages if the text layer is available.
* This primarily involves repainting text selection and highlighting elements.
* @param indicesToRepaint 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.
*
* @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
* ```javascript
* // Repaint the text layer for all visible pages:
* viewer.repaintTextLayer();
* ```
*
* @example
* ```javascript
* // Repaint the text layer for pages with indices 0 and 3:
* viewer.repaintTextLayer([0, 3]);
* ```
**/
repaintTextLayer(indicesToRepaint?: number[]): void;
/**
* 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.
*
* @param {number} pageIndex - The index of the page where the text segment is located (0-based).
* @param {number} startCharIndex - The starting character index (0-based) of the text segment to highlight.
* @param {number} endCharIndex - The ending character index (0-based) of the text segment to highlight.
* @param {Object} [args] - Optional parameters to customize the appearance and behavior of the highlight.
* @param {string} [args.color=DEFAULT_HIGHLIGHT_COLOR] - The fill color for the highlight in `rgba`, `hex`, or named color format.
* @param {string} [args.borderColor=DEFAULT_BORDER_COLOR] - The border color for the highlight in `rgba`, `hex`, or named color format.
* @param {number} [args.borderWidth=DEFAULT_BORDER_WIDTH] - The width of the highlight border in pixels.
* @param {boolean} [args.clearPrevious=false] - If `true`, clears existing highlights on the page before adding the new one.
* @param {boolean} [args.skipPaint=false] - If `true`, skips the immediate repaint of the text layer after adding the highlight. This allows for batch updates and more efficient rendering.
*
* @returns {Promise} 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);
*/
highlightTextSegment(pageIndex: number, startCharIndex: number, endCharIndex: number, args?: HighlightArgs): Promise;
/**
* 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.
*
* @param {number | number[]} pageIndex - The index of the page or an array of page indices from which to clear highlights.
* @param {HighlightBehaviorArgs} [args] - Optional behavior arguments, such as whether to skip repainting the text layer after clearing highlights.
*
* @example
* // Clear highlights from page 2:
* viewer.clearHighlightedSegments(2);
*
* @example
* // Clear highlights from pages 1, 3, and 5:
* viewer.clearHighlightedSegments([1, 3, 5]);
*/
clearHighlightedSegments(pageIndex: number | number[], args?: HighlightBehaviorArgs): void;
/**
* Returns the instance of the `ITextHighlightManager` for managing text highlights in the document.
*
* This property provides access to the `ITextHighlightManager` which allows you to add, remove,
* retrieve, and clear text highlights within the document. If the `highlightManager` instance
* does not already exist, it is created and initialized with the current plugin context.
*
* @returns {ITextHighlightManager} The `ITextHighlightManager` 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)' });
*/
get highlightManager(): ITextHighlightManager;
/**
* Call this method in order to apply changed options.
* @example
* ```javascript
* viewer.options.zoomByMouseWheel = { always: false, ctrlKey: true, metaKey: true };
* viewer.applyOptions();
* ```
**/
applyOptions(): void;
/**
* language - A property that retrieves the standardized language key based on the provided language option.
* The language key is determined by the `options.language` setting.
* @returns {string} Standardized language key (e.g., 'en', 'ja').
*/
get language(): string;
/**
* language - A setter property enabling the configuration of the viewer's language.
* @param {string} lng - The language key to set (e.g., 'en', 'ja', 'auto').
* @ignore Exclude from documentation. Use `options.language` to set the initial language.
*/
set language(lng: string);
/**
* Call this method in order to apply changes in {@link toolbarLayout}.
* @example
* ```javascript
* viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
* viewer.applyToolbarLayout();
* ```
* @example
* ```javascript
* var viewer = new DsPdfViewer(document.querySelector("#viewer"));
* viewer.addDefaultPanels();
* var toolbar = viewer.toolbar;
* var toolbarLayout = viewer.toolbarLayout;
* toolbar.addItem({
* key: 'custom-add-stamp',
* icon: { type: "svg", content: '' },
* title: 'Open your document to add a stamp',
* checked: false, enabled: false,
* action: function () {
* alert("Implement your action here.");
* },
* onUpdate: function (args) {
* var hasDoc = viewer.hasDocument && args.state.session.pageCount > 0;
* return {
* enabled: hasDoc,
* checked: false,
* title: hasDoc ? 'Add stamp' : 'Open your document to add a stamp'
* }
* }
* });
* toolbarLayout.viewer.default.splice(0, 0, "custom-add-stamp");
* viewer.applyToolbarLayout();
* ```
**/
applyToolbarLayout(): void;
getAnnotationPageIndex(annotation: string | AnnotationBase): number | null;
/**
* Returns position of the page view relative to the browser window.
* @param pageIndex
* @example
* ```javascript
* var pageLocation = viewer.getPageLocation(0);
* console.log('The first page location is ' + location.x + ', ' + location.y);
* ```
* @example
* ```javascript
* // Draws a red rectangle over the annotation with id "10R".
* (async function(viewer, annotationId) {
* const pageLocation = viewer.getPageLocation(0), viewPort = viewer.getViewPort(0),
* scale = viewPort.scale, viewBox = viewPort.viewBox;
* const rect = (await viewer.findAnnotation(annotationId))[0].annotation.rect;
* const x1 = rect[0] * scale + pageLocation.x, x2 = rect[2] * scale + pageLocation.x,
* y1 = (viewBox[3] - rect[3]) * scale + pageLocation.y, y2 = (viewBox[3] - rect[1]) * scale + pageLocation.y;
* const div = document.createElement('div');
* div.style.position = 'absolute';
* div.style.left = `${x1}px`; div.style.top = `${y1}px`;
* div.style.width = `${x2 - x1}px`; div.style.height = `${y2 - y1}px`;
* div.style.border = '1px solid red';
* document.body.appendChild(div);
* })(viewer, "10R");
* ```
* @example
* ```javascript
* // Add text annotation on mouse click
* document.addEventListener("click", (e) => {
* const target = (e["path"] || (e["composedPath"] && e["composedPath"]()) || [])[0] || e.target, page = target.closest(".page");
* if(target.closest(".gc-annotation"))
* return;
* if(page) {
* const pageIndex = page.getAttribute("data-index") * 1, pageLoc = viewer.getPageLocation(pageIndex), scale = viewer.getViewPort(pageIndex).scale;
* const x = (e.clientX - pageLoc.x) / scale, y = (e.clientY - pageLoc.y) / scale;
* const rect = viewer.changeBoundsOrigin(pageIndex, [x, y, x + 20, y + 20], "TopLeft", "BottomLeft");
* viewer.addAnnotation(pageIndex, { annotationType: 1 , contents: "Text annotation content", rect });
* }
* });
* ```
**/
getPageLocation(pageIndex: number): {
x: number;
y: number;
};
/**
* Use the setAnnotationBounds method to set the position and / or size of the annotation.
* @param annotationId annotation object or annotation id.
* @param bounds Destination bounds - x, y, width and height are optional.
* @param origin Source coordinate system origin. Default is TopLeft
* @param select Select annotation after editing. Default is false.
* @example
* ```javascript
* // Set the location of the annotation to the top / left corner:
* viewer.setAnnotationBounds('1R', {x: 0, y: 0});
* // Set the location of the annotation to the bottom / left corner:
* viewer.setAnnotationBounds('1R', {x: 0, y: 0}, 'BottomLeft');
* // Set the annotation size to 40 x 40 points:
* viewer.setAnnotationBounds('1R', {w: 40, h: 40});
* // Set the annotation position to x=50, y=50 (origin top / left) and size to 40 x 40 points:
* viewer.setAnnotationBounds('1R', {x: 50, y: 50, w: 40, h: 40});
* ```
*/
setAnnotationBounds(annotationId: string, bounds: {
x: number | undefined;
y: number | undefined;
w: number | undefined;
h: number | undefined;
}, origin?: 'TopLeft' | 'BottomLeft', select?: boolean): Promise;
/**
* Returns rendered annotation bounds relative to browser window.
* Set the windowRelative parameter to false if you want to get original page-relative bounds without scale.
* @ignore Used for testing only.
* @example
* ```javascript
* // Here is some code to demonstrate the relationship between browser-relative and page-relative coordinate types:
* const annotationId = "8R";
* const absoluteX = viewer.getRenderedAnnotationBounds(annotationId).x; // browser window relative
* const relativeX = viewer.getRenderedAnnotationBounds(annotationId, false).x; // page relative without scale
* // Calculate absoluteX using relativeX:
* const pageLocation = viewer.getPageLocation(0);
* const viewPort = viewer.getViewPort(0);
* const calculatedAbsoluteX = pageLocation.x + relativeX * viewPort.scale;
* // Check calculatedAbsoluteX and absoluteX must be equal:
* (calculatedAbsoluteX === absoluteX)
* ```
* @param id annotation id.
* @param windowRelative default is true.
*/
getRenderedAnnotationBounds(id: string, windowRelative?: boolean): {
x: number;
y: number;
w: number;
h: number;
};
/**
* Convert global point to page relative point.
* @ignore
* @param mousePosition
*/
globalPointToPagePoint(mousePosition: GcSelectionPoint): GcSelectionPoint;
/**
* 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.
*
* @param {IGcRect | [number, number, number, number]} rectOrCoords - The rectangle object or array of coordinates to scale.
* @param {number} pageIndex - The index of the page for which the viewport scale should be applied.
* @param {"BottomLeft" | "TopLeft"} [srcOrigin="BottomLeft"] - The origin of the source coordinates.
* "BottomLeft" origin is the PDF default, "TopLeft" is the canvas default.
* @returns {IGcRect | [number, number, number, number]} - 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]
*/
applyViewPortScale(rectOrCoords: IGcRect | [number, number, number, number] | number[], pageIndex: number, srcOrigin?: "BottomLeft" | "TopLeft"): IGcRect | [number, number, number, number];
/**
* Enable specific tooolbar items.
* Note, you don't need to call this method if you are using buttons option.
* @deprecated use {@link toolbarLayout} property.
* @ignore exclude from docs.
* @param buttons
* Default pdf viewer toolbar item keys layout:
* ['$navigation', '$split', 'text-selection', 'pan', 'zoom', '$fullscreen', 'open', 'save-as', 'share', 'print', 'rotate', 'page-display', 'theme-change', 'hide-annotations', 'doc-title', 'doc-properties', 'about']
*
* Available PDF-viewer toolbar item keys:
* 'text-selection', 'pan', 'open', 'save-as', 'share', 'print', 'rotate', 'theme-change', 'doc-title', 'page-display', 'single-page', 'continuous-view', 'hide-annotations', 'doc-properties'
*
* Available base viewer-core toolbar item keys:
* "$navigation" "$refresh", "$history", "$mousemode", "zoom", "$fullscreen", "$split"
*
* You can get default viewer-core items using getDefaultToolbarItems method:
* const toolbar: Toolbar = viewer.toolbar;
* let buttons = toolbar.getDefaultToolbarItems();
* buttons = buttons.filter(b => b !== '$refresh');
*
* You can use updateLayout method if you wish to create your own set of toolbar items:
* const toolbar: Toolbar = viewer.toolbar;
* toolbar.updateLayout({
* default: ["$navigation", 'doc-title']
* });
*
* @example
* ```javascript
* // Below is an example how to create your own custom toolbar button:
* var toolbar = viewer.toolbar;
* toolbar.addItem({ key: 'my-custom-button',
* iconCssClass: 'mdi mdi-bike',
* title: 'Custom button',
* action: function() { alert("Custom toolbar button clicked"); }
* });
* let items = toolbar.getDefaultToolbarItems();
* items.push('my-custom-button');
* toolbar.updateLayout({
* default: items
* });
* ```
*/
enablePdfToolButtons(buttons?: string[] | "all" | 'none'): void;
/**
* Defines the toolbar items layout (order and visibility) for different view states.
* A parameter is an object with default, full-screen, mobile mode properties
* (each property is an array of items to be shown in specific views).
* Setting to default will only affect all modes (full-screen, mobile) if they are not specified externally.
* @param layout
* @deprecated This method is deprecated. Please, use toolbarLayout property, instead.
* @ignore exclude from doc
*/
updateLayout(layout: ToolbarLayout): void;
/**
* Shows the message for the user.
* @example
* ```javascript
* // Show warning message
* viewer.showMessage("Warning message text", "", "warn");
* ```
* @param message
* @param details
* @param severity
*/
showMessage(message: string, details?: string, severity?: "error" | "warn" | "info" | "debug"): void;
/**
* @ignore
**/
clearMessages(): void;
/**
* Move back in the document history.
**/
goBack(): void;
/**
* Move forward in the document history.
*/
goForward(): void;
/**
* Suspends notifications until the next call to {@link endUpdate}.
* @example viewer.beginUpdate();
* @deprecated
* @ignore exclude from docs
*/
beginUpdate(): void;
/**
* Resumes notifications suspended by calls to {@link beginUpdate}.
* @example viewer.endUpdate();
* @deprecated
* @ignore exclude from docs
*/
endUpdate(): void;
/**
* Returns true if notifications suspended by calls to {@link beginUpdate}.
* @example var isUpdatingFlag = viewer.isUpdating;
* @ignore exclude from docs
**/
get isUpdating(): boolean;
private static _init_i18n;
}
export default GcPdfViewer;