- Index
- Enumerations
-
Classes
- AnnotationBase
- ButtonWidget
- ChoiceWidget
- CircleAnnotation
- DsPdfViewer
- FileAttachmentAnnotation
- FreeTextAnnotation
- GcPdfViewer
- GcPdfSearcher
- HighlightAnnotation
- InkAnnotation
- MarkupAnnotation
- LineAnnotation
- LinkAnnotation
- PolygonAnnotation
- PolyLineAnnotation
- PopupAnnotation
- RedactAnnotation
- ReplaceTextAnnotation
- SignatureAnnotation
- SoundAnnotation
- SquareAnnotation
- SquigglyAnnotation
- StampAnnotation
- StrikeOutAnnotation
- TextAnnotation
- TextWidget
- UnderlineAnnotation
- ViewerOptions
- WidgetAnnotation
- Interfaces
- Type Aliases
DsPdfViewer
Class: DsPdfViewer
Document Solutions PDF Viewer (DsPdfViewer) is a fast JavaScript based client-side PDF Viewer that runs in all major browsers.
Example
var viewer = new DsPdfViewer("#root");
viewer.addDefaultPanels();
Extends
Constructors
new DsPdfViewer()
new DsPdfViewer(
element,options?):DsPdfViewer
Document Solutions PDF Viewer constructor.
Parameters
element
root container element or selector pattern used to select the root container element.
string | HTMLElement
options?
Partial<ViewerOptions>
Viewer options. See ViewerOptions for further information.
Returns
Inherited from
Properties
registeredFonts
registeredFonts:
object
An object to keep track of registered fonts. The key is the font name, and the value is an object containing the URL and format of the font.
Index Signature
[fontName: string]: object
Inherited from
Accessors
i18n
Get Signature
get
statici18n():i18n
Gets i18next instance which can be used to add viewer translations. See https://www.i18next.com for details about i18next framework.
Example
function loadPdfViewer(selector) {
// You can load translations from any source (see en-pdf-viewer.json for an example):
var myTranslations = {
"toolbar": {
"open-document": "Open MY document",
"pan": "My Pan tool",
}
};
// Initialize translations:
DsPdfViewer.i18n.init({
resources: { myLang: { viewer: myTranslations } },
defaultNS: 'viewer'
}).then(function(t) {
// New translations initialized and ready to go!
// Now create PDF viewer:
var viewer = new DsPdfViewer(selector, { language: 'myLang' });
viewer.addDefaultPanels();
//viewer.open("sample.pdf");
});
}
loadPdfViewer('#root');
Returns
i18n
Inherited from
LicenseKey
Get Signature
get
staticLicenseKey():string
Product license key.
Example
<script>
// Add your license
DsPdfViewer.LicenseKey = 'XXX';
// Add your code
const viewer = new DsPdfViewer("#viewer");
viewer.addDefaultPanels();
</script>
Returns
string
Set Signature
set
staticLicenseKey(val):void
Product license key.
Example
<script>
// Add your license
DsPdfViewer.LicenseKey = 'XXX';
// Add your code
const viewer = new DsPdfViewer("#viewer");
viewer.addDefaultPanels();
</script>
Parameters
val
string
Returns
void
Product license key.
Example
<script>
// Add your license
DsPdfViewer.LicenseKey = 'XXX';
// Add your code
const viewer = new DsPdfViewer("#viewer");
viewer.addDefaultPanels();
</script>
Overrides
activatedEditorMode
Get Signature
get activatedEditorMode():
""|"SecondBar"|"FormEditor"|"AnnotationEdtor"|"Any"
Activated editor mode name.
Returns
"" | "SecondBar" | "FormEditor" | "AnnotationEdtor" | "Any"
Inherited from
GcPdfViewer.activatedEditorMode
annotations
Get Signature
get annotations():
Promise<object[]>
Retrieves all annotations in the document, organized by page.
This property returns a promise that resolves to an array of objects, where each object represents a page in the document. Each object contains the page index and an array of annotations present on that page.
Examples
var viewer = new DsPdfViewer('#root');
viewer.addDefaultPanels();
viewer.onAfterOpen.register(function() {
viewer.annotations.then(function(data) {
data.forEach(pageData => {
console.log(`Page ${pageData.pageIndex} has ${pageData.annotations.length} annotation(s)`);
});
});
});
viewer.open('Test.pdf');
viewer.annotations.then(function(data) {
data.forEach(pageData => {
const highlightAnnotations = pageData.annotations.filter(ann => ann.annotationType === 9);
console.log(`Page ${pageData.pageIndex} has ${highlightAnnotations.length} highlight annotation(s)`);
});
});
viewer.annotations.then(function(data) {
data.forEach(pageData => {
pageData.annotations.forEach(annotation => {
console.log(`Annotation ID: ${annotation.id}, Type: ${annotation.subtype}, Contents: ${annotation.contents}`);
});
});
});
viewer.annotations
.then(data => {
console.log(`Retrieved annotations for ${data.length} pages`);
})
.catch(error => {
console.error('Failed to retrieve annotations:', error);
});
Returns
Promise<object[]>
A promise that resolves with annotations grouped by page.
Inherited from
beforeUnloadConfirmation
Get Signature
get beforeUnloadConfirmation():
boolean
Ask the user if he want to leave the page when document is modified. Requires SupportApi.
Example
var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
viewer.addDefaultPanels();
viewer.addAnnotationEditorPanel();
viewer.addFormEditorPanel();
viewer.beforeUnloadConfirmation = true;
Returns
boolean
Set Signature
set beforeUnloadConfirmation(
enable):void
Ask the user if he want to leave the page when document is modified. Requires SupportApi.
Example
var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
viewer.addDefaultPanels();
viewer.addAnnotationEditorPanel();
viewer.addFormEditorPanel();
viewer.beforeUnloadConfirmation = true;
Parameters
enable
boolean
Returns
void
Inherited from
GcPdfViewer.beforeUnloadConfirmation
canEditDocument
Get Signature
get canEditDocument():
boolean
Indicates whether the open document can be edited using SupportApi. Requires SupportApi.
Example
if(viewer.canEditDocument) {
alert("Document editing features enabled.");
} else {
alert("Document editing features disabled.");
}
Returns
boolean
Inherited from
currentUserName
Get Signature
get currentUserName():
string
Specifies the current user name. The property is used by Annotation Editor as default value for 'author' field.
Examples
viewer.currentUserName = "John";
alert("The current user name is " + viewer.currentUserName);
Returns
string
Set Signature
set currentUserName(
userName):void
Specifies the current user name. The property is used by Annotation Editor as default value for 'author' field. Note, current user name is saved in the browser's local storage and it will be used on the next page reload if userName option is not set.
Examples
viewer.currentUserName = "John";
alert("The current user name is " + viewer.currentUserName);
Parameters
userName
string
Returns
void
Inherited from
dataLoader
Get Signature
get dataLoader():
GcPdfViewerDataLoader
PDF document meta data loader. Used by some sidebar panels.
Returns
GcPdfViewerDataLoader
Inherited from
editMode
Get Signature
get editMode():
EditMode
Indicates the selected editing tool for the Annotation editor or Form editor. Requires SupportApi.
Example
// Set the layout mode to "Annotation editor"
viewer.layoutMode = 1;
// Set the edit mode to "Square".
viewer.editMode = 4;
Returns
EditMode
Set Signature
set editMode(
mode):void
Indicates the selected editing tool for the Annotation editor or Form editor. Requires SupportApi.
Example
// Set the layout mode to "Annotation editor"
viewer.layoutMode = 1;
// Set the edit mode to "Square".
viewer.editMode = 4;
Parameters
mode
EditMode
Returns
void
Inherited from
eventBus
Get Signature
get eventBus():
IGCEventBus
Internal event bus. Available event names are: outlineloaded, attachmentsloaded, namedaction, pagemode, fileattachmentannotation, pagerendered, pagecancelled, scalechange, pagesinit, pagesloaded, documentchanged, rotationchanging, updateviewarea, undostorechanged, show-custom-layout, hide-custom-layout, annotationeditstarted, unselectannotation, annotation-bounds-change, pagechange, mousemodechange, request-answer, textlayerready, textselectionchanged, viewersizechanged, articlebeadnavigate, error, open, pagelabels, documentload.
Example
// Example: listen annotation selected/unselected event.
var viewer = DsPdfViewer.findControl("#root");
viewer.eventBus.on("annotationeditstarted", (args)=> {
console.log("Annotation selected, annotation id: " + args.annotationId);
});
viewer.eventBus.on("unselectannotation", (args)=> {
console.log("Annotation unselected, annotation id: " + args.annotationId);
});
Returns
Inherited from
fileData
Get Signature
get fileData():
Uint8Array<ArrayBuffer>
Gets the file data. Available when keepFileData option is set to true.
Example
var viewer = new DsPdfViewer('#root', { keepFileData: true });
viewer.open('Test.pdf');
viewer.onAfterOpen.register(function() {
var pdfFileData = viewer.fileData;
});
Returns
Uint8Array<ArrayBuffer>
Inherited from
fileName
Get Signature
get fileName():
string
Gets the file name that was used to open the document. The file name is determined as follows:
- if a local file was opened using the "Open File" dialog, returns the local file name;
- else, if a new file was created using the "newDocument" method, returns the argument passed to that method;
- else, if options.friendlyFileName is not empty, returns its value;
- else, returns the name generated from the URL passed to the "open" method.
Example
var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
alert("The document is opened, the fileName is " + viewer.fileName);
});
viewer.open('MyDocuments/Test.pdf');
Returns
string
Inherited from
fileSize
Get Signature
get fileSize():
Promise<number>
Gets the PDF document file size in bytes.
Example
const fileSizeBytes = await viewer.fileSize;
Returns
Promise<number>
Inherited from
fileUrl
Get Signature
get fileUrl():
string
Gets the URL that was used to open the document. Returns an empty string when the document was opened from binary data.
Example
var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
alert("The document is opened, the fileUrl is " + viewer.fileUrl);
});
viewer.open('MyDocuments/Test.pdf');
Returns
string
Inherited from
fingerprint
Get Signature
get fingerprint():
string
An unique document identifier.
Example
var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
alert("The document opened, an unique document identifier is "+ viewer.fingerprint);
});
viewer.open('Test.pdf');
Returns
string
Inherited from
gcPdfVersion
Get Signature
get gcPdfVersion():
string
Gets the GcPdf library version used by the SupportApi, if available.
Returns
string
Inherited from
hasChanges
Get Signature
get hasChanges():
boolean
Indicates whether the document has been modified by the user.
Example
if(viewer.hasChanges) {
alert("The document has been changed.");
}
Returns
boolean
Inherited from
hasCopyData
Get Signature
get hasCopyData():
boolean
Indicates whether the copy buffer contains any data.
Example
if(viewer.hasCopyData) {
viewer.execPasteAction();
}
Returns
boolean
Inherited from
hasDocument
Get Signature
get hasDocument():
boolean
Indicates whether the document is loaded into view.
Example
if(!viewer.hasDocument) {
viewer.open("sample.pdf");
}
Returns
boolean
Inherited from
hasForm
Get Signature
get hasForm():
boolean
Gets a value indicating whether the active document has any form fields.
Example
if(viewer.hasForm) {
viewer.showFormFiller();
}
Returns
boolean
Inherited from
hasPersistentConnection
Get Signature
get hasPersistentConnection():
boolean
Gets a value indicating whether the viewer has a persistent connection to the server.
-
- if(viewer.hasPersistentConnection) {
- viewer.getSharedDocuments().then(function(result) {
- });
- }
-
Returns
boolean
Inherited from
GcPdfViewer.hasPersistentConnection
hasRedoChanges
Get Signature
get hasRedoChanges():
boolean
Gets a value indicating whether the pdf viewer can redo document changes. Requires SupportApi.
Example
if(viewer.hasRedoChanges) {
viewer.redoChanges();
}
Returns
boolean
Inherited from
hasReplyTool
Get Signature
get hasReplyTool():
boolean
Indicates whether the Reply Tool has been added.
Example
var viewer = new DsPdfViewer('#root');
if(viewer.hasReplyTool) {
alert("The Reply Tool has not been added to the viewer.");
} else {
alert("The Reply Tool has been added to the viewer.");
}
viewer.open('Test.pdf');
Returns
boolean
Inherited from
hasUndoChanges
Get Signature
get hasUndoChanges():
boolean
Gets a value indicating whether the pdf viewer can undo document changes. Requires SupportApi.
Example
if(viewer.hasUndoChanges) {
viewer.undoChanges();
}
Returns
boolean
Inherited from
hideAnnotations
Get Signature
get hideAnnotations():
boolean
Determines whether the annotation layer is hidden.
Example
// Hide annotations:
viewer.hideAnnotations = true;
Returns
boolean
Set Signature
set hideAnnotations(
hide):void
Determines whether the annotation layer is hidden.
Example
// Hide annotations:
viewer.hideAnnotations = true;
Parameters
hide
boolean
Returns
void
Inherited from
highlightManager
Get Signature
get highlightManager():
ITextHighlightManager
Returns the instance of the ITextHighlightManager for managing text highlights in the document.
This property provides access to the ITextHighlightManager which allows you to add, remove,
retrieve, and clear text highlights within the document. If the highlightManager instance
does not already exist, it is created and initialized with the current plugin context.
Example
// Access the highlight manager and add a highlight:
const highlightManager = viewer.highlightManager;
highlightManager.highlightTextSegment(1, 0, 50, { color: 'rgba(255, 255, 0, 0.5)' });
Returns
ITextHighlightManager
The ITextHighlightManager instance for the document.
Inherited from
isDocumentShared
Get Signature
get isDocumentShared():
boolean
Gets a value indicating whether the active document is open in shared mode. Requires SupportApi.
Example
if(viewer.isDocumentShared) {
alert("The document is open in shared mode.");
}
Returns
boolean
Inherited from
isEditModeSticked
Get Signature
get isEditModeSticked():
boolean
Returns true if the active edit mode is sticked by the user. Indicates that the stickyBehavior for the active edit button is enabled and the button is checked. See the toolbarLayout.stickyBehavior property for details.
Returns
boolean
Inherited from
isInEditorMode
Get Signature
get isInEditorMode():
boolean
Gets a value indicating whether the editor mode is currently active.
Examples
let isInEditorMode = viewer.isInEditorMode;
// Detect the start/end of edit mode
var isEdit = false;
viewer.onViewerStateChange.register(function () {
if (viewer.isInEditorMode !== isEdit) {
isEdit = viewer.isInEditorMode;
console.log(isEdit ? "Editor Mode activated." : "Editor Mode deactivated.");
}
});
Returns
boolean
Inherited from
jsFormatFunctions
Get Signature
get jsFormatFunctions():
any
In some specific cases, users may need to override or add new JavaScript formatting functions. Use the jsFormatFunctions property to achieve this.
Example
// Below is an example of how to add a new custom formatting function that appends a postfix to a field value
viewer.jsFormatFunctions.customUserFormat = function(strValue, postfix){
return strValue + postfix;
}
Returns
any
Inherited from
language
Get Signature
get language():
string
language - A property that retrieves the standardized language key based on the provided language option.
The language key is determined by the options.language setting.
Returns
string
Standardized language key (e.g., 'en', 'ja').
Inherited from
layoutMode
Get Signature
get layoutMode():
LayoutMode
Gets or sets the layout mode (0 - Viewer, 1 - AnnotationEditor or 2 - FormEditor).
Default
0
Example
// Set the layout mode to "Form editor"
viewer.layoutMode = 2;
Returns
LayoutMode
Set Signature
set layoutMode(
mode):void
Gets or sets the layout mode (0 - Viewer, 1 - AnnotationEditor or 2 - FormEditor).
Default
0
Example
// Set the layout mode to "Form editor"
viewer.layoutMode = 2;
Parameters
mode
LayoutMode
Returns
void
Inherited from
leftSidebar
Get Signature
get leftSidebar():
LeftSidebar
Left sidebar API.
Example
viewer.leftSidebar.hide();
Returns
LeftSidebar
Inherited from
logLevel
Get Signature
get logLevel():
LogLevel
Gets current log level. Available log levels are: 'None', 'Critical', 'Error', 'Warning', 'Information', 'Debug', 'Trace'. Default level is 'None'.
Returns
Set Signature
set logLevel(
logLvel):void
Sets current log level. Available log levels are: 'None', 'Critical', 'Error', 'Warning', 'Information', 'Debug', 'Trace'. Default level is 'None'.
Parameters
logLvel
Returns
void
Inherited from
modificationsState
Get Signature
get modificationsState():
ModificationsState
Gets modifications state for active document. Requires SupportApi.
Example
var modificationsState = viewer.modificationsState;
console.log(modificationsState);
Returns
Inherited from
GcPdfViewer.modificationsState
onAfterAddAnnotation
Get Signature
get onAfterAddAnnotation():
EventFan<AfterAddAnnotationEventArgs>
After add annotation event.
Example
viewer.onAfterAddAnnotation.register(function(args) {
console.log(args); // Log the event arguments to the console
});
Returns
EventFan<AfterAddAnnotationEventArgs>
Inherited from
GcPdfViewer.onAfterAddAnnotation
onAfterOpen
Get Signature
get onAfterOpen():
EventFan<EventArgs>
The event raised when the user changes the viewer theme.
Example
var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
alert("The document opened.");
});
viewer.open('Test.pdf');
Returns
EventFan<EventArgs>
Inherited from
onAfterRemoveAnnotation
Get Signature
get onAfterRemoveAnnotation():
EventFan<AfterRemoveAnnotationEventArgs>
After remove annotation event.
Example
viewer.onAfterRemoveAnnotation.register(function(args) {
console.log(args);
});
Returns
EventFan<AfterRemoveAnnotationEventArgs>
Inherited from
GcPdfViewer.onAfterRemoveAnnotation
onAfterUpdateAnnotation
Get Signature
get onAfterUpdateAnnotation():
EventFan<AfterUpdateAnnotationEventArgs>
After update annotation event.
Example
viewer.onAfterUpdateAnnotation.register(function(args) {
console.log(args);
});
Returns
EventFan<AfterUpdateAnnotationEventArgs>
Inherited from
GcPdfViewer.onAfterUpdateAnnotation
onBeforeAddAnnotation
Get Signature
get onBeforeAddAnnotation():
EventFan<BeforeAddAnnotationEventArgs>
Before add annotation event. The event is cancelable.
Examples
// This example demonstrates how to change the color of an annotation to red
// before it is added to the PDF viewer.
viewer.onBeforeAddAnnotation.register(function(args) {
args.annotation.color = "#ff0000"; // Set the annotation color to red
});
// This example demonstrates how to prevent an annotation from being added.
viewer.onBeforeAddAnnotation.register(function(args) {
console.log(args); // Log the event arguments to the console
args.cancel = true; // Set the cancel flag to cancel the annotation addition
});
Returns
EventFan<BeforeAddAnnotationEventArgs>
Inherited from
GcPdfViewer.onBeforeAddAnnotation
onBeforeOpen
Get Signature
get onBeforeOpen():
EventFan<BeforeOpenEventArgs>
Occurs immediately before the document opens.
Example
var viewer = new DsPdfViewer('#root');
viewer.onBeforeOpen.register(function(args) {
alert("A new document will be opened,\n payload type(binary or URL): " + args.type +",\n payload(bytes or string): " + args.payload);
});
viewer.open('Test.pdf');
Returns
EventFan<BeforeOpenEventArgs>
Inherited from
onBeforeRemoveAnnotation
Get Signature
get onBeforeRemoveAnnotation():
EventFan<BeforeRemoveAnnotationEventArgs>
Before remove annotation event. The event is cancelable.
viewer.onBeforeRemoveAnnotation.register(function(args) {
console.log(args);
args.cancel = true; // set the cancel flag to cancel event.
});
Returns
EventFan<BeforeRemoveAnnotationEventArgs>
Inherited from
GcPdfViewer.onBeforeRemoveAnnotation
onBeforeUpdateAnnotation
Get Signature
get onBeforeUpdateAnnotation():
EventFan<BeforeUpdateAnnotationEventArgs>
Before update annotation event. The event is cancelable.
// This example demonstrates how to prevent an annotation from being updated.
viewer.onBeforeUpdateAnnotation.register(function(args) {
console.log(args); // Log the event arguments to the console
args.cancel = true; // set the cancel flag to cancel event.
});
Returns
EventFan<BeforeUpdateAnnotationEventArgs>
Inherited from
GcPdfViewer.onBeforeUpdateAnnotation
onError
Get Signature
get onError():
EventFan<ErrorEventArgs>
The event indicating error.
Example
var viewer = new DsPdfViewer('#root');
viewer.addDefaultPanels();
viewer.onError.register(handleError);
viewer.open('Test.pdf');
function handleError(eventArgs) {
var message = eventArgs.message;
if (message.indexOf("Invalid PDF structure") !== -1) {
alert('Unable to load pdf document, pdf document is broken.');
} else {
alert('Unexpected error: ' + message);
}
}
Returns
EventFan<ErrorEventArgs>
Inherited from
onThemeChanged
Get Signature
get onThemeChanged():
EventFan<EventArgs>
Occurs when the viewer theme changed by user.
Example
var viewer = new DsPdfViewer(selector, {
requireTheme: localStorage.getItem('demo_theme') || 'viewer'
});
viewer.addDefaultPanels();
viewer.onThemeChanged.register(function(args) {
localStorage.setItem('demo_theme', args.theme);
});
Returns
EventFan<EventArgs>
Inherited from
optionalContentConfig
Get Signature
get optionalContentConfig():
Promise<OptionalContentConfig>
Default optional content config. An optional content is a collection of graphics that can be made visible or invisible dynamically.
Examples
// Use the optionalContentConfig property to print information about all available layers
const config = await viewer.optionalContentConfig;
console.table(config.getGroups());
const config = await viewer.optionalContentConfig;
// Turn off optional content group with id "13R":
config.setVisibility("13R", false);
// Repaint visible pages:
viewer.repaint();
Returns
Promise<OptionalContentConfig>
Inherited from
GcPdfViewer.optionalContentConfig
options
Get Signature
get options():
Partial<ViewerOptions>
The viewer options.
Example
viewer.options.zoomByMouseWheel = { always: true };
viewer.applyOptions();
Returns
Partial<ViewerOptions>
Set Signature
set options(
options):void
PDF viewer options.
Parameters
options
Partial<ViewerOptions>
Returns
void
Inherited from
pageCount
Get Signature
get pageCount():
number
Gets pages count.
Example
var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
alert("The document opened. Total number of pages: " + viewer.pageCount);
});
viewer.open('Test.pdf');
Returns
number
Inherited from
pageDisplay
Get Signature
get pageDisplay():
PageDisplayType
Page display mode.
Returns
PageDisplayType
Inherited from
pageIndex
Get Signature
get pageIndex():
number
Gets/sets the active page index.
Example
var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
// Navigate page with index 9:
viewer.pageIndex = 9;
});
viewer.open('Test.pdf');
Returns
number
Set Signature
set pageIndex(
val):void
Gets/sets the active page index.
Example
var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
// Navigate page with index 9:
viewer.pageIndex = 9;
});
viewer.open('Test.pdf');
Parameters
val
number
Returns
void
Inherited from
requiredSupportApiVersion
Get Signature
get requiredSupportApiVersion():
string
Gets the required SupportApi version that is compatible with the current version of the DsPdfViewer.
Returns
string
Inherited from
GcPdfViewer.requiredSupportApiVersion
rightSidebar
Get Signature
get rightSidebar():
GcRightSidebar
Gets right sidebar object. Use this object if you want to manipulate the right sidebar.
Example
viewer.rightSidebar.show('expanded', 'reply-tool');
viewer.rightSidebar.toggle();
viewer.rightSidebar.hide();
viewer.rightSidebar.expand();
viewer.rightSidebar.collapse();
Returns
GcRightSidebar
Inherited from
rotation
Get Signature
get rotation():
number
Specifies the rotation in degrees.
Example
var viewer = new DsPdfViewer('#root');
// Register an onAfterOpen event handler:
viewer.onAfterOpen.register(function() {
// Apply 90 degree clockwise rotation:
viewer.rotation = 90;
});
// Open document:
viewer.open('Test.pdf');
Returns
number
Set Signature
set rotation(
degrees):void
Specifies the rotation in degrees.
Example
var viewer = new DsPdfViewer('#root');
// Register an onAfterOpen event handler:
viewer.onAfterOpen.register(function() {
// Apply 90 degree clockwise rotation:
viewer.rotation = 90;
});
// Open document:
viewer.open('Test.pdf');
Parameters
degrees
number
Returns
void
Inherited from
scrollView
Get Signature
get scrollView():
HTMLElement
Gets the scroll view HTML element. Note, the left scroll position is calculated by the viewer automatically - so, usually, you don't need to change left scroll position.
Example
// Scroll to the top of the document:
viewer.scrollView.scrollTop = 0;
Returns
HTMLElement
Inherited from
searcher
Get Signature
get searcher():
GcPdfSearcher
Document search worker instance. Searches currently opened document for a text.
Examples
// Highlight all search results without opening SearchPanel.
const searchIterator = viewer.searcher.search({ Text: "test", MatchCase: true, HighlightAll: true });
searchIterator.next();
searcher.applyHighlight();
// Iterate all search results
const searcher = viewer.searcher;
var searchResults = [];
const searchIterator = searcher.search({ Text: textToSearch, MatchCase: true });
var searchResult = await searchIterator.next();
if (searchResult.value)
searcher.highlight(searchResult.value)
while (searchResult.value && !searchResult.done) {
const searchResultValue = searchResult.value;
searchResults.push(`index: ${searchResultValue.ItemIndex}, text: ${searchResultValue.DisplayText}, pageIndex: ${searchResultValue.PageIndex}`);
searchResult = await searchIterator.next();
}
console.log("Search results: " + (searchResults.length ? searchResults.join("; ") : "No search results"));
// Open the document, find the text 'wildlife' and highlight the first result:
async function loadPdfViewer(selector) {
var viewer = new DsPdfViewer(selector, { restoreViewStateOnLoad: false });
viewer.addDefaultPanels();
var afterOpenPromise = new Promise((resolve)=>{ viewer.onAfterOpen.register(()=>{ resolve(); }); });
await viewer.open('wetlands.pdf');
await afterOpenPromise;
var findOptions = { Text: 'wildlife' };
var searchIterator = await viewer.searcher.search(findOptions);
var searchResult = await searchIterator.next();
viewer.searcher.cancel();
viewer.searcher.highlight(searchResult.value);
}
loadPdfViewer('#root');
// Open the document, find the text 'wildlife' and print search results to the console:
async function loadPdfViewer(selector) {
var viewer = new DsPdfViewer(selector);
viewer.addDefaultPanels();
await viewer.open('wetlands.pdf');
await (new Promise((resolve)=>{
viewer.onAfterOpen.register(()=>{
resolve();
});
}));
var findOptions = {
Text: 'wildlife',
MatchCase: true,
WholeWord: true,
StartsWith: false,
EndsWith: false,
Wildcards: false,
Proximity: false,
SearchBackward: false,
HighlightAll: true
};
var searcher = viewer.searcher;
var searchIterator = await searcher.search(findOptions);
var resultsCount = 0;
var searchResult;
do {
searchResult = await searchIterator.next();
if (searchResult.value) {
// this could be either result or progress message (ItemIndex < 0)
if(searchResult.value.ItemIndex >= 0) {
console.log('next search result:');
console.log(searchResult.value);
resultsCount++;
} else {
const pageCount = _doc.pageCount.totalPageCount || _doc.pageCount.renderedSoFar;
console.log('search progress, page index is ' + searchResult.value.PageIndex);
}
}
else {
console.log("Search completed");
break;
}
}
while(!searchResult.done);
console.log('Total results count is ' + resultsCount);
}
Returns
Inherited from
secondToolbar
Get Signature
get secondToolbar():
SecondToolbar
Second toolbar API.
Returns
SecondToolbar
Inherited from
secondToolbarLayout
Get Signature
get secondToolbarLayout():
SecondToolbarLayout
Second toolbar layout. Use the secondToolbarLayout property to configure available tools.
Default
{
* "text-tools": ['edit-text', 'edit-free-text', 'edit-ink', '$split', 'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
* "draw-tools": ['edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
* "attachment-tools": ['edit-stamp', 'edit-file-attachment', 'edit-richmedia', 'edit-sign-tool', 'edit-sound', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
* "form-tools": ['edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio', 'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
* "page-tools": ['new-document', 'new-page', 'delete-page', '$split', 'edit-undo', 'edit-redo', '$split', 'pdf-organizer']
* }
Returns
SecondToolbarLayout
Set Signature
set secondToolbarLayout(
layout):void
Second toolbar layout. Use the secondToolbarLayout property to configure available tools.
Default
{
* "text-tools": ['edit-text', 'edit-free-text', 'edit-ink', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
* "draw-tools": ['edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
* "attachment-tools": ['edit-stamp', 'edit-file-attachment', 'edit-richmedia', 'edit-sign-tool', 'edit-sound', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
* "form-tools": ['edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio', 'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset', '$split', 'edit-undo', 'edit-redo', 'edit-erase', '$split', 'edit-redact', 'edit-redact-apply'],
* "page-tools": ['new-document', 'new-page', 'delete-page', '$split', 'edit-undo', 'edit-redo', '$split', 'pdf-organizer']
* }
Parameters
layout
SecondToolbarLayout
Returns
void
Inherited from
GcPdfViewer.secondToolbarLayout
signToolStorage
Get Signature
get signToolStorage():
SignToolStorage
Returns data storage which can be used to store and retrieve current signature tool settings and images. Please, note, the storage data depends on current user name, see currentUserName property
Returns
SignToolStorage
Inherited from
storage
Get Signature
get storage():
DataStorage
Data storage for the active document.
Examples
const fileData = viewer.storage.getItem(annotation.fileId);
viewer.storage.setItem(fileId, bytes);
Add Stamp annotation programatically using storage API
viewer.newDocument().then(function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost/sample.jpg', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
var arrayBuffer = this.response;
if (arrayBuffer) {
// Add Stamp annotation programatically:
viewer.storage.setItem("sample_file_id_1", new Uint8Array(arrayBuffer));
var pageSize = viewer.getPageSize(0);
viewer.addAnnotation(0, {annotationType: 13, fileId: "sample_file_id_1", rect: [0, pageSize.height - 144, 144, pageSize.height]});
}
};
xhr.send();
});
Returns
DataStorage
Inherited from
structureTree
Get Signature
get structureTree():
Promise<StructTreeNode[]>
Structure tree data.
Example
const viewer = new DsPdfViewer(selector);
await viewer.open("sample.pdf");
const structureTree = await viewer.structureTree;
if(structureTree) {
console.log(structureTree);
}
Returns
Promise<StructTreeNode[]>
A promise that is resolved with a
[] objects that represents the page's structure tree,
or null when no structure tree is present for the page.
Inherited from
supportApi
Get Signature
get supportApi():
ISupportApi
Gets the SupportApi client. Requires SupportApi.
Example
var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
// Contact server and get Support API version.
viewer.serverVersion.then(function(ver) {
alert("The SupportApi version is " + ver);
});
Returns
ISupportApi
Inherited from
supportApiVersion
Get Signature
get supportApiVersion():
string
Gets the connected version of the SupportApi, if available.
Returns
string
Inherited from
toolbarLayout
Get Signature
get toolbarLayout():
PdfToolbarLayout
Defines the layout of the toolbar for different viewer modes: viewer, annotationEditor, formEditor.
Description
The full list of the viewer specific toolbar items:
'open', '$navigation', '$split', 'text-selection', 'pan', 'zoom', '$fullscreen', '$split', 'text-tools', 'draw-tools', 'attachment-tools',
'form-tools', 'page-tools', '$split', 'rotate', 'search', 'page-display', 'theme-change', 'download', 'print', 'save-as', 'hide-annotations', 'form-filler',
'doc-title', 'doc-properties', 'about', 'share', 'single-page', 'continuous-view', 'page-display', '$history', '$mousemode', 'show-edit-tools', 'show-form-editor'
The full list of the annotationEditor specific toolbar items:
'edit-select', 'save-as', 'share', 'edit-text', 'edit-free-text', 'edit-ink', 'edit-square',
'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'edit-file-attachment', 'edit-richmedia', 'edit-sound', 'edit-link', 'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out'.
'edit-redact', 'edit-redact-apply', 'edit-erase', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'
The full list of the formEditor specific toolbar items:
'edit-select-field', 'save-as', 'share',
'edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio',
'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset',
'edit-erase-field', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'
Examples
// Customize the toolbar layout:
viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
viewer.toolbarLayout.annotationEditor.default = ["open", "save", "share", "$split", "new-document", "edit-ink", "edit-text"];
viewer.toolbarLayout.formEditor.default = ["open", "save", "share", "$split", "edit-widget-tx-field", "edit-widget-tx-password"];
viewer.applyToolbarLayout();
// Show only Open and Redact buttons:
var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' });
// Add annotation editor panel:
viewer.addAnnotationEditorPanel();
// Change toolbar layout:
viewer.toolbarLayout = { viewer: { default: ["open", 'show-edit-tools']},
annotationEditor: { default: ["open", 'edit-redact', 'edit-redact-apply']} };
// Activate 'Annotation Editor' layout mode:
viewer.layoutMode = 1;
// Make square, circle and line buttons sticky:
viewer.toolbarLayout.stickyBehavior = ["edit-square", "edit-circle", "edit-line"];
viewer.applyToolbarLayout();
Returns
PdfToolbarLayout
Set Signature
set toolbarLayout(
toolbarLayout):void
Defines the layout of the toolbar for different viewer modes: viewer, annotationEditor, formEditor.
Description
The full list of the viewer specific toolbar items:
'text-selection', 'pan', 'open', 'save-as', 'share', 'download', 'print', 'rotate', 'theme-change', 'doc-title', 'page-display', 'single-page', 'continuous-view',
'$navigation' '$refresh', '$history', '$mousemode', 'zoom', '$fullscreen', '$split', 'show-edit-tools', 'show-form-editor'
The full list of the annotationEditor specific toolbar items:
'edit-select', 'save-as', 'share', 'edit-text', 'edit-free-text', 'edit-ink', 'edit-square',
'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'edit-file-attachment', 'edit-richmedia', 'edit-sound', 'edit-link', 'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out'.
'edit-redact', 'edit-redact-apply', 'edit-erase', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'
The full list of the formEditor specific toolbar items:
'edit-select-field', 'save-as', 'share',
'edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio',
'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset',
'edit-erase-field', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'
Examples
// Customize the toolbar layout:
viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
viewer.toolbarLayout.annotationEditor.default = ["open", "save", "share", "$split", "new-document", "edit-ink", "edit-text"];
viewer.toolbarLayout.formEditor.default = ["open", "save", "share", "$split", "edit-widget-tx-field", "edit-widget-tx-password"];
viewer.applyToolbarLayout();
// Show only Open and Redact buttons:
var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' });
// Add annotation editor panel:
viewer.addAnnotationEditorPanel();
// Change toolbar layout:
viewer.toolbarLayout = { viewer: { default: ["open", 'show-edit-tools']},
annotationEditor: { default: ["open", 'edit-redact', 'edit-redact-apply']} };
// Activate 'Annotation Editor' layout mode:
viewer.layoutMode = 1;
Parameters
toolbarLayout
PdfToolbarLayout
Returns
void
Inherited from
undoCount
Get Signature
get undoCount():
number
Gets the number of levels(commands) on the undo stack. Requires SupportApi.
Example
alert("Undo levels count is " + viewer.undoCount);
Returns
number
Inherited from
undoIndex
Get Signature
get undoIndex():
number
Gets the index of the current Undo level (command). This is the Undo command that will be executed on the next call to redoChanges(). Requires SupportApi.
Example
alert("The current Undo level index is " + viewer.undoIndex);
Returns
number
Inherited from
undoState
Get Signature
get undoState(): (
0| {changeName:UndoChangeName;data:any;selectedAnnotation: {annotation:AnnotationBase;pageIndex:number; }; })[]
The current state of the undo store. Note that this property is read-only, do not programmatically change the elements of the collection. Use the Undo API methods to change the viewer's editor state. Undo API properties: hasUndoChanges, hasRedoChanges, undoIndex, undoCount Undo API methods: undoChanges(), redoChanges()
Returns
(0 | { changeName: UndoChangeName; data: any; selectedAnnotation: { annotation: AnnotationBase; pageIndex: number; }; })[]
Inherited from
version
Get Signature
get version():
string
Returns the current version of the GcDocs PDF viewer.
Example
alert("The DsPdfViewer version is " + viewer.version);
Returns
string
Inherited from
viewerPreferences
Get Signature
get viewerPreferences():
Promise<ViewerPreferences>
Gets initial viewer preferences.
Returns
Promise<ViewerPreferences>
Inherited from
zoomMode
Get Signature
get zoomMode():
ZoomMode
Gets/sets the current zoom node. Accepted values are: 0 - Value, 1 - PageWidth, 2 - WholePage.
// Set zoom mode to 'WholePage'
viewer.zoomMode = 2;
Returns
ZoomMode
Set Signature
set zoomMode(
val):void
Gets/sets the current zoom node. Accepted values are: 0 - Value, 1 - PageWidth, 2 - WholePage.
Example
// Set zoom mode to 'WholePage'
viewer.zoomMode = 2;
Parameters
val
ZoomMode
Returns
void
Inherited from
zoomValue
Get Signature
get zoomValue():
number
Gets/sets the current zoom percentage level.
Example
// Set zoom value to 150%
viewer.zoomValue = 150;
Returns
number
Set Signature
set zoomValue(
val):void
Gets/sets the current zoom percentage level.
Example
// Set zoom value to 150%
viewer.zoomValue = 150;
Parameters
val
number
Returns
void
Inherited from
Methods
findControl()
staticfindControl(selector):GcPdfViewer
Gets the viewer instance using the host element or host element selector
Parameters
selector
string | HTMLElement
Returns
Example
var viewer = DsPdfViewer.findControl("#root");
Inherited from
addAnnotation()
addAnnotation(
pageIndex,annotation,args?):Promise<{annotation:AnnotationBase;pageIndex:number; }>
Adds an annotation to a specified page.
- This method uses a lock to ensure that the annotation is added synchronously preventing concurrent modifications.
- Requires SupportApi.
Parameters
pageIndex
number
The index of the page to which the annotation should be added.
Alternatively, an object with a property pageIndex specifying the page index.
This supports the override: addAnnotation({ pageIndex: 1 }, annotation, args).
annotation
The annotation object to be added.
args?
Additional optional arguments, such as skipping page refresh.
skipPageRefresh?
boolean
Returns
Promise<{ annotation: AnnotationBase; pageIndex: number; }>
- A promise resolving to an object containing the page index and the added annotation.
Examples
// Add the Square annotation to the first page when you open the document:
viewer.onAfterOpen.register(function() {
viewer.addAnnotation(0, {
annotationType: 5, // AnnotationTypeCode.SQUARE
subtype: "Square",
borderStyle: { width: 5, style: 1 },
color: [0, 0, 0],
interiorColor: [255, 0, 0],
rect: [0, 0, 200, 200]
});
});
// Below is the sample how to copy field with name "field1" and put it to the second page programmatically:
// Find field widget with name field1:
var resultData = await viewer.findAnnotation("field1", {findField: 'fieldName'});
// Clone field:
var clonedField = viewer.cloneAnnotation(resultData[0].annotation);
// Change field name property:
clonedField.fieldName = "field1Copy";
// Add cloned field to the second page.
viewer.addAnnotation(1, clonedField);
// Add the FileAttachment annotation to the first page when you open the document:
viewer.onAfterOpen.register(function() {
viewer.addAnnotation(0, {
annotationType: 17, // AnnotationTypeCode.FILEATTACHMENT
subtype: "FileAttachment",
file: {
filename: 'attachment.png',
content: new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,45,0,0,0,32,8,6,0,0,0,134,132,241,68,0,0,0,4,103,65,77,65,0,0,177,143,11,252,97,5,0,0,7,56,73,68,65,84,88,9,205,88,11,112,92,85,25,254,255,115,179,129,148,36,155,190,147,187,91,228,49,64,25,99,181,105,169,117,176,149,34,99,113,80,65,165,162,118,168,15,44,3,42,99,55,125,8,29,59,221,90,29,132,38,187,43,56,162,22,5,161,206,240,24,64,40,130,15,156,138,226,3,147,14,118,74,219,41,157,102,138,238,166,155,180,105,246,238,210,144,108,238,158,223,239,44,189,233,110,186,217,172,54,64,239,204,206,61,143,255,241,157,255,156,255,251,207,93,166,183,243,185,185,211,55,125,246,69,239,177,136,166,176,150,92,86,185,201,190,244,238,30,10,47,113,79,199,45,159,142,114,41,221,192,93,125,65,62,203,183,92,136,174,99,226,185,144,57,171,80,14,227,57,22,249,155,102,218,46,110,238,177,195,107,38,191,94,56,95,73,123,194,64,207,220,146,156,81,229,171,217,196,164,110,130,99,31,145,116,144,208,14,210,178,155,20,245,137,102,75,20,53,50,211,249,36,124,53,49,205,133,115,87,72,111,29,146,236,247,142,134,166,31,174,4,176,145,153,16,208,118,52,213,194,108,61,13,144,141,48,248,184,43,58,150,108,245,255,179,28,8,187,189,111,150,178,170,215,65,231,102,44])
},
rect: [0, 0, 20, 20]
});
});
Inherited from
addAnnotationEditorPanel()
addAnnotationEditorPanel():
PanelHandle
Add annotation editor panel. Requires SupportApi.
Returns
PanelHandle
Example
viewer.addAnnotationEditorPanel();
Inherited from
GcPdfViewer.addAnnotationEditorPanel
addArticlesPanel()
addArticlesPanel():
PanelHandle
Add articles panel.
Returns
PanelHandle
Example
viewer.addArticlesPanel();
Inherited from
addAttachmentsPanel()
addAttachmentsPanel():
PanelHandle
Add attachments panel.
Returns
PanelHandle
Example
viewer.addAttachmentsPanel();
Inherited from
GcPdfViewer.addAttachmentsPanel
addDefaultPanels()
addDefaultPanels():
PanelHandle[]
Add default set of sidebar panels with default order: 'Thumbnails', 'Search', 'Outline', 'Layers', 'StructureTree', 'Attachments'
Returns
PanelHandle[]
Example
viewer.addDefaultPanels();
Inherited from
addDocumentListPanel()
addDocumentListPanel(
documentListUrl?):PanelHandle
Adds document list panel to the Viewer with available document array specified in documentslist.json file (URL specified by documentListUrl option), located in the root directory of your application. You can specify service at the end point for documentListUrl option. The service should return JSON string with available documents array, e.g.: ["pdf1.pdf", "pdf2.pdf"]
Parameters
documentListUrl?
Optional. Document list service URL or predefined list of document list items.
string | DocumentListItem[]
Returns
PanelHandle
Examples
Example content for the documentslist.json file:
["file1.pdf", "file2.pdf"].
var viewer = new DsPdfViewer("#root", { documentListUrl: "/documentslist.json" });
viewer.addDocumentListPanel();
var viewer = new DsPdfViewer("#root");
// Add document list panel and specify documentListUrl option:
viewer.addDocumentListPanel('/documentslist.json');
var viewer = new DsPdfViewer("#root");
// Add document list panel and specify documentListUrl option using DATA URI:
viewer.addDocumentListPanel('data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "Hello doc 2", "title": "title 2"}]');
Inherited from
GcPdfViewer.addDocumentListPanel
addFormEditorPanel()
addFormEditorPanel():
PanelHandle
Add form editor panel. Requires SupportApi.
Returns
PanelHandle
Example
var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
viewer.addDefaultPanels();
viewer.addFormEditorPanel();
Inherited from
GcPdfViewer.addFormEditorPanel
addLayersPanel()
addLayersPanel():
PanelHandle
Add optional content layers panel.
Returns
PanelHandle
Example
viewer.addLayersPanel();
Inherited from
addOutlinePanel()
addOutlinePanel():
PanelHandle
Add outline panel.
Returns
PanelHandle
Example
viewer.addOutlinePanel();
Inherited from
addReplyTool()
addReplyTool(
sidebarState?):void
Enable the Text Annotation Reply Tool. Note, in order to enable ability to edit/remove or add existing replies you need to configure SupportApi, otherwise the Reply Tool will be in read-only mode.
Parameters
sidebarState?
GcRightSidebarState
pass 'expanded' value if you wish the Reply tool to be expanded initially. Default value is collapsed.
Returns
void
Example
viewer.addReplyTool('expanded');
Inherited from
addSearchPanel()
addSearchPanel():
PanelHandle
Add Search panel.
Returns
PanelHandle
Example
viewer.addSearchPanel();
Inherited from
addSharedDocumentsPanel()
addSharedDocumentsPanel():
PanelHandle
Add a panel with a list of shared documents.
Returns
PanelHandle
Example
var viewer = new DsPdfViewer("#root");
viewer.addSharedDocumentsPanel();
Inherited from
GcPdfViewer.addSharedDocumentsPanel
addStamp()
addStamp(
imageData,args):Promise<{annotation:AnnotationBase;pageIndex:number; }>
Add stamp annotation.
Parameters
imageData
Uint8Array<ArrayBuffer>
Uint8Array, binary image data.
args
convertToContent?
boolean
fileId
string
fileName?
string
pageIndex
number
rect
number[]
rotate?
number
select?
boolean
subject?
string
Returns
Promise<{ annotation: AnnotationBase; pageIndex: number; }>
Example
// Add Graphical signature to the PDF using external image
function addStampFromUrl(imageUrl, viewer) {
* fetch(imageUrl)
.then(response => response.blob())
.then(blob => blob.arrayBuffer())
.then(arrayBuffer => {
const fileId = new Date().getTime() + ".png";
const fileName = fileId;
const pageIndex = 0;
const imageData = new Uint8Array(arrayBuffer);
const rect = [0, 0, 200, 200];
viewer.storage.setItem(fileId, imageData);
viewer.addStamp(
imageData,
{
fileId,
fileName,
pageIndex,
rect,
select: false,
subject: "",
rotate: 0,
convertToContent: false
});
});
}
// Usage:
addStampFromUrl("http://localhost/image.png", viewer);
Inherited from
addStickyNote()
addStickyNote(
position):void
Add sticky note to the document. Requires SupportApi.
Parameters
position
GcSelectionPoint
page relative point. Origin is top/left. Note, pageIndex must be specified.
Returns
void
Example
viewer.addStickyNote(viewer.toViewPortPoint({x: 50, y: 50, pageIndex: 0}));
Inherited from
addThumbnailsPanel()
addThumbnailsPanel():
PanelHandle
Add Thumbnails panel
Returns
PanelHandle
Example
viewer.addThumbnailsPanel();
Inherited from
GcPdfViewer.addThumbnailsPanel
addViewAreaStyle()
addViewAreaStyle(
cssText):string
Adds a css style to the view area.
Parameters
cssText
string
Returns
string
style element identifier.
Example
// Enable RTL text direction:
viewer.addViewAreaStyle(".gc-text-content, p, h1 { direction: rtl !important }");
Inherited from
applyOptions()
applyOptions():
void
Call this method in order to apply changed options.
Returns
void
Example
viewer.options.zoomByMouseWheel = { always: false, ctrlKey: true, metaKey: true };
viewer.applyOptions();
Inherited from
applyToolbarLayout()
applyToolbarLayout():
void
Call this method in order to apply changes in toolbarLayout.
Returns
void
Examples
viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
viewer.applyToolbarLayout();
var viewer = new DsPdfViewer(document.querySelector("#viewer"));
viewer.addDefaultPanels();
var toolbar = viewer.toolbar;
var toolbarLayout = viewer.toolbarLayout;
toolbar.addItem({
key: 'custom-add-stamp',
icon: { type: "svg", content: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path style="fill: #205F78;" d="M20.25 12l-2.25 2.25 2.25 2.25-3.75 3.75-2.25-2.25-2.25 2.25-2.25-2.25-2.25 2.25-3.75-3.75 2.25-2.25-2.25-2.25 2.25-2.25-2.25-2.25 3.75-3.75 2.25 2.25 2.25-2.25 2.25 2.25 2.25-2.25 3.75 3.75-2.25 2.25 2.25 2.25z"></path></svg>' },
title: 'Open your document to add a stamp',
checked: false, enabled: false,
action: function () {
alert("Implement your action here.");
},
onUpdate: function (args) {
var hasDoc = viewer.hasDocument && args.state.session.pageCount > 0;
return {
enabled: hasDoc,
checked: false,
title: hasDoc ? 'Add stamp' : 'Open your document to add a stamp'
}
}
});
toolbarLayout.viewer.default.splice(0, 0, "custom-add-stamp");
viewer.applyToolbarLayout();
Inherited from
GcPdfViewer.applyToolbarLayout
applyViewPortScale()
applyViewPortScale(
rectOrCoords,pageIndex,srcOrigin?):IGcRect| [number,number,number,number]
Scales the provided rectangle or coordinate array based on the current viewport scale.
This method accepts either an IGcRect object or an array of coordinates [x1, y1, x2, y2].
It returns the scaled coordinates in the same format as the input.
Note: This method changes the origin of the coordinates from "BottomLeft" (PDF default) to "TopLeft" (canvas default). This transformation makes the coordinates ready for use in drawing on a canvas, for example, in custom highlight rendering.
Parameters
rectOrCoords
The rectangle object or array of coordinates to scale.
number[] | IGcRect | [number, number, number, number]
pageIndex
number
The index of the page for which the viewport scale should be applied.
srcOrigin?
The origin of the source coordinates. "BottomLeft" origin is the PDF default, "TopLeft" is the canvas default.
"TopLeft" | "BottomLeft"
Returns
IGcRect | [number, number, number, number]
- The scaled rectangle or coordinate array, with origin set to "TopLeft".
Examples
// Using an IGcRect object
const rect = { x: 100, y: 150, w: 200, h: 100 };
const scaledRect = viewer.applyViewPortScale(rect, 0);
console.log(scaledRect); // { x: scaledX, y: scaledY, w: scaledW, h: scaledH }
// Using an array of coordinates [x1, y1, x2, y2]
const coords = [100, 150, 300, 250];
const scaledCoords = viewer.applyViewPortScale(coords, 0);
console.log(scaledCoords); // [scaledX1, scaledY1, scaledX2, scaledY2]
Inherited from
GcPdfViewer.applyViewPortScale
changeBoundsOrigin()
changeBoundsOrigin(
pageIndex,bounds,srcOrigin,destOrigin,normalize?):number[]
This method changes coordinate system origin for rectangle given by parameter bounds and returns converted rectangle value;
Parameters
pageIndex
number
Page index (Zero based).
bounds
number[]
bounds array: [x1, y1, x2, y2]
srcOrigin
Source coordinate system origin. Possible values are: 'TopLeft' or 'BottomLeft'.
"TopLeft" | "BottomLeft"
destOrigin
Destination coordinate system origin. Possible values are: 'TopLeft' or 'BottomLeft'.
"TopLeft" | "BottomLeft"
normalize?
boolean
Optional. Default is true. Normalize rectangle [x1, y1, x2, y2] so that (x1,y1) < (x2,y2).
Returns
number[]
Examples
var pageIndex = 0;
var topLeftBounds = [0, 0, 200, 40];
// Convert the topLeftBounds from TopLeft origin to BottomLeft origin
// taking into account the viewport from the first page and store
// the result in the bottomLeftBounds variable:
var bottomLeftBounds = viewer.changeBoundsOrigin(pageIndex, topLeftBounds, 'TopLeft', 'BottomLeft');
// Gets the bounds of the annotation relative to the viewport:
const pageIndex = 0;
const viewPort = viewer.getViewPort(pageIndex);
const annotationRect = (await viewer.findAnnotation('10R'))[0].annotation.rect;
const invertedRect = viewer.changeBoundsOrigin(pageIndex, annotationRect, 'BottomLeft', 'TopLeft');
const annotationX1 = invertedRect[0] * viewPort.scale;
const annotationY1 = invertedRect[1] * viewPort.scale;
const annotationX2 = invertedRect[2] * viewPort.scale;
const annotationY2 = invertedRect[3] * viewPort.scale;
Inherited from
GcPdfViewer.changeBoundsOrigin
changeOrigin()
changeOrigin(
pageIndex,y,srcOrigin,destOrigin):number
This method changes coordinate system origin for y coordinate given by parameter y and returns converted value.
Parameters
pageIndex
number
y
number
srcOrigin
"TopLeft" | "BottomLeft"
destOrigin
"TopLeft" | "BottomLeft"
Returns
number
Example
var pageIndex = 0;
var y = 0;
// Convert from TopLeft origin to BottomLeft origin
// taking into account the viewport from the first page:
var yBottom = viewer.changeOrigin(pageIndex, y, 'TopLeft', 'BottomLeft');
Inherited from
changeOriginToBottom()
changeOriginToBottom(
pageIndex,y):number
Converts the origin of the Y coordinate to the bottom.
Parameters
pageIndex
any
y
any
Returns
number
Example
var pageIndex = 0;
var y = 0;
// Convert y value from TopLeft origin to BottomLeft origin
// taking into account the viewport from the first page:
var yBottom = viewer.changeOriginToBottom(pageIndex, y);
Inherited from
GcPdfViewer.changeOriginToBottom
changeOriginToTop()
changeOriginToTop(
pageIndex,y):number
Converts the origin of the Y coordinate to the top.
Parameters
pageIndex
any
y
any
Returns
number
Example
var pageIndex = 0;
var y = 0;
// Convert y value from BottomLeft origin to TopLeft origin
// taking into account the viewport from the first page:
var yTop = viewer.changeOriginToTop(pageIndex, y);
Inherited from
clearHighlightedSegments()
clearHighlightedSegments(
pageIndex,args?):void
Clears all highlights from one or more specific pages.
This method removes all custom highlights from the specified pages. You can pass either a single page index or an array of page indices.
Parameters
pageIndex
The index of the page or an array of page indices from which to clear highlights.
number | number[]
args?
HighlightBehaviorArgs
Optional behavior arguments, such as whether to skip repainting the text layer after clearing highlights.
Returns
void
Examples
// Clear highlights from page 2:
viewer.clearHighlightedSegments(2);
// Clear highlights from pages 1, 3, and 5:
viewer.clearHighlightedSegments([1, 3, 5]);
Inherited from
GcPdfViewer.clearHighlightedSegments
cloneAnnotation()
cloneAnnotation(
annotation):AnnotationBase
Clone annotation or field given by parameter annotation. Requires SupportApi.
Parameters
annotation
Annotation to clone.
Returns
Example
// Below is the sample how to copy field with name "field1" and put it to the second page programmatically:
// Find field widget with name field1:
var resultData = await viewer.findAnnotation("field1", {findField: 'fieldName'});
// Clone field:
var clonedField = viewer.cloneAnnotation(resultData[0].annotation);
// Change field name property:
clonedField.fieldName = "field1Copy";
// Add cloned field to the second page.
viewer.addAnnotation(1, clonedField);
Inherited from
close()
close():
Promise<void>
Closes the currently open document.
Returns
Promise<void>
Example
await viewer.close();
Inherited from
closePanel()
closePanel(
panelHandleOrId?):void
Closes the side panel.
Parameters
panelHandleOrId?
any
Optional. Panel handle or panel id to close.
Returns
void
Example
viewer.closePanel();
Inherited from
collectQuadPoints()
collectQuadPoints(
paintedBoxes):TextPartsQuadPoints
Collects quadrilateral points based on the provided PaintedBoxInfo array.
Parameters
paintedBoxes
PaintedBoxInfo[]
An array of PaintedBoxInfo objects representing painted boxes on a PDF page.
Returns
TextPartsQuadPoints
- Information about selected or highlighted text fragments, including the page index, outer rectangle coordinates, and quadrilateral points.
Description
This method takes an array of PaintedBoxInfo objects, where each object contains information about a painted box on a PDF page. It calculates the outer rectangle coordinates and quadrilateral points for the selected or highlighted text fragments. The coordinates have their origin at the bottom-left corner as per PDF specifications.
The quadPoints array is sorted as follows: [{ x: minX, y: maxY }, { x: maxX, y: maxY }, { x: minX, y: minY }, { x: maxX, y: minY }]
Inherited from
confirm()
confirm(
confirmationText?,level?,title?,buttons?):Promise<boolean|ConfirmButton>
Display confirmation dialog.
Parameters
confirmationText?
string | Element
level?
"info" | "warning" | "error"
title?
string
buttons?
ConfirmButton[]
Returns
Promise<boolean | ConfirmButton>
Example
const confirmResult = await viewer.confirm("Apply changes?", "info", "Confirm action", ["Yes", "No", "Cancel"]);
if (confirmResult === "Yes") {
// put your code here
} else if (confirmResult === "No") {
// put your code here
} else {
// put your code here
}
Inherited from
convertPdfRectToWindowCoordinates()
convertPdfRectToWindowCoordinates(
pageIndex,rect):number[]
Converts PDF rectangle or PDF point coordinates to absolute window coordinates.
Parameters
pageIndex
number
Index of the PDF page.
rect
Array of coordinates [x1, y1, x2, y2] or [x, y], where (x1, y1) represents the bottom-left corner, and (x2, y2) represents the top-right corner.
number[] | Rect
Returns
number[]
Array of window coordinates corresponding to the given PDF coordinates.
Throws
Error if the coordinates format is incorrect. Expected either [x, y] or [x1, y1, x2, y2].
Inherited from
GcPdfViewer.convertPdfRectToWindowCoordinates
dateToPdfString()
dateToPdfString(
input):string
Convert a JavaScript Date object, string, Moment object, or timestamp to a PDF date string.
The PDF date string format is described in section 7.9.4 of the official
PDF 32000-1:2008 specification. The output includes optional time zone information.
Parameters
input
any
The date to convert, which can be a Date object, date string, Moment object, or timestamp.
Returns
string
- The formatted PDF date string, or
nullif the input is invalid.
Example
// Convert a Date object to a PDF date string
const date = new Date();
const pdfDateString = viewer.dateToPdfString(date);
console.log(pdfDateString); // Outputs: 'D:20240924045508Z'
// Convert a timestamp to a PDF date string
const timestamp = Date.now();
const pdfDateStringFromTimestamp = viewer.dateToPdfString(timestamp);
console.log(pdfDateStringFromTimestamp); // Outputs: 'D:20240924045508Z'
Inherited from
deletePage()
deletePage(
pageIndex?):Promise<void>
Delete page. Requires SupportApi.
Parameters
pageIndex?
number
page index to delete.
Returns
Promise<void>
Example
// Delete page with index 3.
viewer.deletePage(3);
Inherited from
dispose()
dispose():
void
Use this method to close and release resources occupied by the DsPdfViewer.
Returns
void
Inherited from
download()
download(
fileName?):void
Downloads the PDF document loaded in the Viewer to the local disk.
Parameters
fileName?
string
the destination file name.
Returns
void
Example
viewer.download();
Inherited from
execCopyAction()
execCopyAction(
buffer?):Promise<boolean>
Execute Copy action (Ctrl + C shortcut). Requires SupportApi.
Parameters
buffer?
CopyBufferData
data to copy.
Returns
Promise<boolean>
Example
viewer.execCopyAction();
Inherited from
execCutAction()
execCutAction(
buffer?):Promise<boolean>
Execute Cut action (Ctrl + X shortcut). Requires SupportApi.
Parameters
buffer?
CopyBufferData
data to cut.
Returns
Promise<boolean>
Example
viewer.execCutAction();
Inherited from
execDeleteAction()
execDeleteAction(
buffer?):Promise<boolean>
Execute Delete action (DEL shortcut). Requires SupportApi.
Parameters
buffer?
CopyBufferData
data to delete.
Returns
Promise<boolean>
Example
viewer.execDeleteAction();
Inherited from
execPasteAction()
execPasteAction(
point?):Promise<boolean>
Execute Paste action (Ctrl + V shortcut). Requires SupportApi.
Parameters
point?
GcSelectionPoint
insert position.
Returns
Promise<boolean>
Example
if(viewer.hasCopyData) {
viewer.execPasteAction({x: 10, y: 10, pageIndex: 0});
}
Inherited from
findAnnotations()
findAnnotations(
findString,findParams?):Promise<object[]>
Find annotation(s) within opened document. Returns promise which will be resolved with search results.
Parameters
findString
Find query.
string | number
findParams?
Find parameters. By default annotation will be searched by id without page index constraint.
findAll?
boolean
findField?
string
pageIndexConstraint?
number
Returns
Promise<object[]>
Examples
// Find annotation with id '2R':
viewer.findAnnotations("2R").then(function(dataArray) {
if(dataArray[0])
alert(`Annotation ${dataArray[0].annotation.id} found on page with index ${dataArray[0].pageIndex}.`);
else
alert('Annotation not found.');
});
// find all fields with name field1:
viewer.findAnnotations("field1", {findField: 'fieldName', findAll: true}).then(function(dataArray) {
});
Inherited from
getDocumentInformation()
getDocumentInformation():
Promise<DocumentInformation>
Gets meta data information for the current document.
Returns
Promise<DocumentInformation>
Example
const docMetaInfo = await viewer.getDocumentInformation();
Inherited from
GcPdfViewer.getDocumentInformation
getDocumentSecurity()
getDocumentSecurity():
Promise<DocumentSecuritySummary>
Gets security information for the current document.
Returns
Promise<DocumentSecuritySummary>
Example
const docSecurityInfo = await viewer.getDocumentSecurity();
Inherited from
GcPdfViewer.getDocumentSecurity
getEvent()
getEvent(
eventName):EventFan<any>
Get event object.
Parameters
eventName
EventName
Returns
EventFan<any>
Example
viewer.getEvent("BeforeAddAnnotation").register(function(args) {
console.log(args);
});
viewer.getEvent("AfterAddAnnotation").register(function(args) {
console.log(args);
});
Inherited from
getPageLocation()
getPageLocation(
pageIndex):object
Returns position of the page view relative to the browser window.
Parameters
pageIndex
number
Returns
object
x
x:
number
y
y:
number
Examples
var pageLocation = viewer.getPageLocation(0);
console.log('The first page location is ' + location.x + ', ' + location.y);
// Draws a red rectangle over the annotation with id "10R".
(async function(viewer, annotationId) {
const pageLocation = viewer.getPageLocation(0), viewPort = viewer.getViewPort(0),
scale = viewPort.scale, viewBox = viewPort.viewBox;
const rect = (await viewer.findAnnotation(annotationId))[0].annotation.rect;
const x1 = rect[0] * scale + pageLocation.x, x2 = rect[2] * scale + pageLocation.x,
y1 = (viewBox[3] - rect[3]) * scale + pageLocation.y, y2 = (viewBox[3] - rect[1]) * scale + pageLocation.y;
const div = document.createElement('div');
div.style.position = 'absolute';
div.style.left = `${x1}px`; div.style.top = `${y1}px`;
div.style.width = `${x2 - x1}px`; div.style.height = `${y2 - y1}px`;
div.style.border = '1px solid red';
document.body.appendChild(div);
})(viewer, "10R");
// Add text annotation on mouse click
document.addEventListener("click", (e) => {
const target = (e["path"] || (e["composedPath"] && e["composedPath"]()) || [])[0] || e.target, page = target.closest(".page");
if(target.closest(".gc-annotation"))
return;
if(page) {
const pageIndex = page.getAttribute("data-index") * 1, pageLoc = viewer.getPageLocation(pageIndex), scale = viewer.getViewPort(pageIndex).scale;
const x = (e.clientX - pageLoc.x) / scale, y = (e.clientY - pageLoc.y) / scale;
const rect = viewer.changeBoundsOrigin(pageIndex, [x, y, x + 20, y + 20], "TopLeft", "BottomLeft");
viewer.addAnnotation(pageIndex, { annotationType: 1 , contents: "Text annotation content", rect });
}
});
Inherited from
getPageRotation()
getPageRotation(
pageIndex,includeViewRotation?):number
Get the page rotation value.
Parameters
pageIndex
number
includeViewRotation?
boolean
Include view rotation, default is true.
Returns
number
Example
// Get the first page rotation value:
var rotation = viewer.getPageRotation(0);
Inherited from
getPageSize()
getPageSize(
pageIndex,includeScale?):object
Returns the page size. By default, return size without scale, pass true for the includeScale argument if you want to get the scaled value.
Parameters
pageIndex
number
Page index (Zero based).
includeScale?
boolean
Optional. If true, the method will return scaled value.
Returns
object
height
height:
number
width
width:
number
Example
// Get first page size:
var pageSize = viewer.getPageSize(0);
Inherited from
getPageTabs()
getPageTabs(
pageIndex):"S"|"R"|"C"|"A"|"W"
Get page annotations tabs order. A name specifying the tab order that shall be used for annotations on the page. Possible values are: R - Row order. C - Column order. S - Structure order (not supported by DsPdfViewer). A - Annotations order. This order refers to the order of annotation in the annotations collection. W - Widgets order . This order uses the same ordering as "Annotations" order, but two passes are made, the first only picking the widget annotations and the second picking all other annotations.
Parameters
pageIndex
number
Returns
"S" | "R" | "C" | "A" | "W"
Inherited from
getSelectedText()
getSelectedText():
string
Returns the contents of the text selection.
Returns
string
Example
alert("Text selected by the user: " + viewer.getSelectedText());
Inherited from
getSharedDocuments()
getSharedDocuments():
Promise<SharedDocumentInfo[]>
Returns a list of shared documents available to the current user.
Returns
Promise<SharedDocumentInfo[]>
Example
var sharedDocuments = await viewer.getSharedDocuments();
Inherited from
GcPdfViewer.getSharedDocuments
getSignatureInfo()
getSignatureInfo():
Promise<SignatureInformation>
Get information about signature used in document.
Returns
Promise<SignatureInformation>
Example
// Example: check if the current document is signed and show information about signature:
var viewer = DsPdfViewer.findControl("#root");
const signatureInfo = await viewer.getSignatureInfo();
if(signatureInfo.signed) {
const signatureValue = signatureInfo.signedByFields[0].signatureValue;
const signerName = signatureValue.name;
const location = signatureValue.location;
const signDate = viewer.pdfStringToDate(signatureValue.modificationDate);
alert("The document was signed using digital signature. Signed by: " + signerName + ", location: " + location + ", sign date: " + signDate.toString());
} else {
alert("The document is not signed.");
}
Inherited from
getViewPort()
getViewPort(
pageIndex):PageViewport
Returns PDF page view port information.
Parameters
pageIndex
number
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
// Get the viewport object for the first page:
var viewPort = viewer.getViewPort(0);
Inherited from
goBack()
goBack():
void
Move back in the document history.
Returns
void
Inherited from
goForward()
goForward():
void
Move forward in the document history.
Returns
void
Inherited from
goToFirstPage()
goToFirstPage():
void
Go to the first page.
Returns
void
Example
viewer.goToFirstPage();
Inherited from
goToLastPage()
goToLastPage():
void
Go to the last page.
Returns
void
Example
viewer.goToLastPage();
Inherited from
goToNextPage()
goToNextPage():
void
Go to the next page.
Returns
void
Example
viewer.goToNextPage();
Inherited from
goToPage()
goToPage(
pageIndex):void
Go to the page with the specific page index.
Parameters
pageIndex
number
Returns
void
Since
2.3.1
Example
// Go to the first page:
viewer.goToPage(0);
Inherited from
goToPageNumber()
goToPageNumber(
pageNumber):void
Go to the page with the specific page number (numbering starts at 1).
Parameters
pageNumber
number
Returns
void
Deprecated
Method goToPageNumber deprecated since version 2.3.1, use goToPage method or pageIndex property instead.
Example
// Go to the second page:
viewer.goToPageNumber(2);
Inherited from
goToPrevPage()
goToPrevPage():
void
Go to the previous page.
Returns
void
Example
viewer.goToPrevPage();
Inherited from
hideSecondToolbar()
hideSecondToolbar():
void
Hide second toolbar.
Returns
void
Example
viewer.hideSecondToolbar();
Inherited from
highlightTextSegment()
highlightTextSegment(
pageIndex,startCharIndex,endCharIndex,args?):Promise<boolean>
Highlights a portion of text on a specified page.
This method creates a highlight for a segment of text on a page, with customizable properties. Optionally, it can clear previous highlights before adding the new one and skip the immediate repainting of the text layer.
Parameters
pageIndex
number
The index of the page where the text segment is located (0-based).
startCharIndex
number
The starting character index (0-based) of the text segment to highlight.
endCharIndex
number
The ending character index (0-based) of the text segment to highlight.
args?
HighlightArgs
Optional parameters to customize the appearance and behavior of the highlight.
Returns
Promise<boolean>
A promise that resolves once the highlight has been added and optionally the text layer has been repainted.
Examples
// Add a highlight for a text segment from index 10 to 20 on page 0, with custom color and border, and clear existing highlights:
await viewer.highlightTextSegment(0, 10, 20, { color: 'rgba(255, 255, 0, 0.5)', borderColor: 'rgba(255, 0, 0, 0.75)', borderWidth: 3, clearPrevious: true });
// Add a highlight and skip the immediate repaint of the text layer:
await viewer.highlightTextSegment(0, 10, 20, { color: '#00FF00', skipPaint: true });
// Repaint the text layer manually:
viewer.repaintTextLayer(0);
Inherited from
GcPdfViewer.highlightTextSegment
invalidate()
invalidate():
void
Ensures that all visual child elements of the viewer are properly updated for layout. Call this method to update the size of the inner content when the viewer is dynamically resized.
Returns
void
Example
viewer.eventBus.on("viewersizechanged", function() {
// Make viewer height equal to content height of inner pages, including the margins:
document.querySelector("#root").style.height = viewer.pageCount * 50 + viewer.pageCount * viewer.getPageSize(0, true).height + "px";
// Invalidate layout:
viewer.invalidate();
});
Inherited from
isFontUrlRegistered()
isFontUrlRegistered(
url):boolean
Checks if a font with the given URL is registered.
Parameters
url
any
The URL of the font to check.
Returns
boolean
- Returns true if a font with the given URL is registered, false otherwise.
Inherited from
GcPdfViewer.isFontUrlRegistered
loadAndScrollPageIntoView()
loadAndScrollPageIntoView(
pageIndex,destArray?,scrollIntoViewOptions?):Promise<boolean>
The method loads the page at the index specified by the pageIndex parameter, and scrolls the page into the view.
Parameters
pageIndex
number
Destination page index.
destArray?
any[]
Array with destination information. destArray[0] // not used, can be null, pdf page reference (for internal use only). destArray[1] // contains destination view fit type name: { name: 'XYZ' } - Destination specified as top-left corner point and a zoom factor (the lower-left corner of the page is the origin of the coordinate system (0, 0)). { name: 'Fit' } - Fits the page into the window { name: 'FitH' } - Fits the widths of the page into the window { name: 'FitV' } - Fits the height of the page into a window. { name: 'FitR' } - Fits the rectangle specified by its top-left and bottom-right corner points into the window. { name: 'FitB' } - Fits the rectangle containing all visible elements on the page into the window. { name: 'FitBH' } - Fits the width of the bounding box into the window. { name: 'FitBV' } - Fits the height of the bounding box into the window. destArray[2] // x position offset destArray[3] // y position offset (note, the lower-left corner of the page is the origin of the coordinate system (0, 0)) destArray[4] // can be null, contains bounding box width when view name is FitR, contains scale when view name is XYZ, destArray[5] // can be null, contains bounding box height when view name is FitR
scrollIntoViewOptions?
Optional scroll options. Used when the destArray parameter is not specified. If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value. If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"}.
boolean | ScrollPageIntoViewOptions
Returns
Promise<boolean>
Returns the boolean promise that resolves when the page is fully loaded (including text and annotation layers) and scrolled. A promise is resolved with false value when the page does not exist or an error occurs, otherwise the promise is resolved with true value.
Example
// Load and display the first page:
viewer.loadAndScrollPageIntoView(0);
Inherited from
GcPdfViewer.loadAndScrollPageIntoView
loadDocumentList()
loadDocumentList(
documentListUrl?):void
Load an updated document list into document list panel.
Parameters
documentListUrl?
Optional. Document list service URL or array with the document list items.
string | DocumentListItem[]
Returns
void
Examples
viewer.loadDocumentList();
// Load document list using DATA URI:
viewer.loadDocumentList('data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "doc 2", "title": "title 2"}]');
Inherited from
loadSharedDocuments()
loadSharedDocuments():
void
Loads the updated list of shared documents into the shared documents panel.
Returns
void
Example
viewer.loadSharedDocuments();
Inherited from
GcPdfViewer.loadSharedDocuments
lockAnnotation()
lockAnnotation(
id):Promise<AnnotationBase>
Lock annotation for editing.
Parameters
id
annotation id
string | AnnotationBase
Returns
Promise<AnnotationBase>
Inherited from
markAnnotationLayerDirty()
markAnnotationLayerDirty(
pageIndex):any
Marks the annotation layer as dirty for specific page index or indices. This method triggers the need for re-rendering the annotation layer in the page view due to changes in annotation data for the specified page index or indices.
Parameters
pageIndex
The index or indices of the page(s) for which the annotation layer is marked as dirty.
number | number[]
Returns
any
Example
// Example: Mark annotation layers for the first and third pages as dirty:
viewer.markAnnotationLayerDirty([0, 2]);
Inherited from
GcPdfViewer.markAnnotationLayerDirty
newDocument()
newDocument(
params?):Promise<any>
Creates and opens a new blank document. Requires SupportApi.
Parameters
params?
Parameters object: fileName - name of the file for a new document, confirm - show confirmation dialog if there are changes in the document.
string | { confirm: boolean; fileName: string; }
Returns
Promise<any>
Example
// Create a new blank document, name the file "test.pdf",
// display a confirmation dialog if the active document has been modified.
viewer.newDocument({ fileName: "test.pdf", confirm: true});
Inherited from
newPage()
newPage(
params?):Promise<void>
Adds a blank page to the document. Requires SupportApi.
Parameters
params?
parameters object: width - page width in points, height - page height in points, pageIndex - target page index.
height?
number
pageIndex?
number
width?
number
Returns
Promise<void>
Example
// Create a new blank page and insert it in the second position.
viewer.newPage({pageIndex: 1});
Inherited from
open()
open(
file?,openParameters?):Promise<LoadResult>
Opens a document for viewing.
This method allows loading a PDF document or its binary data for rendering and interaction.
The document can be provided as a URL string, a Uint8Array, or an array of bytes.
Additionally, you can specify loading parameters such as headers or authentication details.
Parameters
file?
any
The source of the document to open. This can be:
- A URL string or a
URLobject pointing to the PDF document. - Binary data of the document as a
Uint8Arrayor an array of bytes.
openParameters?
An optional object specifying parameters for loading the document. For example:
headers: An object containing HTTP headers for requests (e.g., authentication, custom headers).password: A password for encrypted PDF files.- Other custom loading options.
Returns
Promise<LoadResult>
A promise resolving to the result of loading the document.
Examples
// Open a PDF document from a URL
viewer.open("Documents/HelloWorld.pdf");
// Open a PDF document from binary data (Uint8Array)
const binaryData = new Uint8Array([37, 80, 68, 70, 45, ...]); // PDF file bytes
viewer.open(binaryData);
// Open a PDF document from a URL with authentication headers
viewer.open("http://localhost:5005/api/pdf-viewer/GetPdf?file=HelloWorld.pdf", {
headers: {
"Authorization": "Basic " + btoa(unescape(encodeURIComponent("USERNAME:PASSWORD"))),
"CustomHeader": "Custom header value"
}
});
// Open a PDF document from an array of bytes
const byteArray = [37, 80, 68, 70, 45, ...]; // Array representation of PDF bytes
viewer.open(byteArray);
Inherited from
openLocalFile()
openLocalFile():
any
Show the file open dialog where the user can select the PDF file.
Returns
any
Example
viewer.openLocalFile();
Inherited from
openPanel()
openPanel(
panelHandleOrId):void
Opens the side panel.
Parameters
panelHandleOrId
any
Panel handle or panel id to open.
Returns
void
Example
const layersPanelHandle = viewer.addLayersPanel();
viewer.open("house-plan.pdf").then(()=> {
viewer.openPanel(layersPanelHandle);
});
Inherited from
openSharedDocument()
openSharedDocument(
sharedDocumentId):Promise<OpenDocumentInfo>
Open shared document by it's id.
Parameters
sharedDocumentId
string
unique shared document identifier.
Returns
Promise<OpenDocumentInfo>
Examples
Open shared document using document index:
async function openSharedDocByIndex(viewer, sharedDocIndex) {
const sharedDocuments = await viewer.getSharedDocuments();
viewer.openSharedDocument(sharedDocuments[sharedDocIndex].documentId);
}
// Open first shared document:
openSharedDocByIndex(DsPdfViewer.findControl("#viewer"), 0);
Open shared document using document’s file name. Note, a document with the same name can be shared multiple times. In the example below, we open the first found document with the given fileName.
async function openSharedDocByName(viewer, fileName) {
const sharedDocuments = await viewer.getSharedDocuments();
const index = sharedDocuments.findIndex(d=>d.fileName === fileName);
if(index !== -1)
viewer.openSharedDocument(sharedDocuments[index].documentId);
}
// Open the first available shared document named "financial-report.pdf":
openSharedDocByName(DsPdfViewer.findControl("#viewer"), "financial-report.pdf");
Inherited from
GcPdfViewer.openSharedDocument
openSharedDocumentByIndex()
openSharedDocumentByIndex(
sharedDocIndex):Promise<OpenDocumentInfo>
Open shared document using document index.
Parameters
sharedDocIndex
number
Returns
Promise<OpenDocumentInfo>
Example
Open second shared document:
viewer.openSharedDocumentByIndex(1);
Inherited from
GcPdfViewer.openSharedDocumentByIndex
openSharedDocumentByName()
openSharedDocumentByName(
fileName):Promise<OpenDocumentInfo>
Open shared document using document’s file name. Note, a document with the same name can be shared multiple times. The openSharedDocumentByName opens the first found document with the given fileName.
Parameters
fileName
string
Returns
Promise<OpenDocumentInfo>
Example
// Open the first available shared document named "sample.pdf":
viewer.openSharedDocumentByName("sample.pdf");
Inherited from
GcPdfViewer.openSharedDocumentByName
pdfStringToDate()
pdfStringToDate(
input?):Date
Convert a PDF date string to a JavaScript Date object.
The PDF date string format is described in section 7.9.4 of the official
PDF 32000-1:2008 specification. The function handles optional apostrophes
and time zone offsets.
Parameters
input?
The PDF date string to convert.
string | Date
Returns
Date
- The corresponding JavaScript
Dateobject, ornullif the input is invalid.
Example
const pdfDateString = 'D:20230919123045Z'; // A PDF date string in UTC
const date = viewer.pdfStringToDate(pdfDateString);
console.log(date); // Outputs: Tue Sep 19 2023 12:30:45 GMT+0000 (Coordinated Universal Time)
Inherited from
print()
print():
void
Opens the browser's print document dialog box.
Returns
void
Example
viewer.print();
Inherited from
redoChanges()
redoChanges():
void
Redo document changes. Requires SupportApi.
Returns
void
Example
if(viewer.hasRedoChanges) {
viewer.redoChanges();
}
Inherited from
redrawTouchedAnnotations()
redrawTouchedAnnotations():
Promise<void>
Redraws all annotations marked as "touched" by the editor. This method iterates over all elements
with the class touched-by-editor, retrieves their associated annotation data, and redraws them
on their respective pages. If an error occurs during the process, it is logged to the console.
Returns
Promise<void>
A promise that resolves when all touched annotations have been processed.
Async
Throws
If an error occurs while fetching or redrawing an annotation, it is caught and logged.
Inherited from
GcPdfViewer.redrawTouchedAnnotations
registerFallbackFont()
registerFallbackFont(
fontNameOrUrl,url?,args?):void
Registers a fallback font with the given font name and URL. The fallback font will not be added to the UI for selection. Use this method to register a font that SupportApi will utilize when searching for fallback fonts. This method supports font collections in "ttc" format. The complete list of supported font formats includes "ttf", "otf", "woff", and "ttc".
Parameters
fontNameOrUrl
string
The name of the fallback font to register or the URL of the font file.
url?
string
The URL of the fallback font file.
args?
Optional parameters for font registration.
{ clientOnly: boolean; displayName: string; format: FontFormat; }
Optional parameters for font registration.
clientOnly?
boolean
If true, the font data will not be sent to the SupportApi server. This is useful if the font is already registered on the server.
displayName?
string
A user-friendly name for the font.
format?
The format of the font file ("truetype", "opentype", "woff", or "woff2"). If not provided, the function will attempt to determine the format from the URL.
Returns
void
Examples
// Registering a fallback font URL
viewer.registerFallbackFont('https://example.com/fonts/fallbackfont.woff');
// Registering a fallback font with name and URL
viewer.registerFallbackFont('SampleFont1', 'https://example.com/fonts/SampleFont1.woff');
// Registering a fallback font with name, URL, and format
viewer.registerFallbackFont('SampleFont2', 'https://example.com/fonts/SampleFont2.ttf', { format: 'truetype' });
Throws
Throws an error if the provided fallback font URL is already registered.
Inherited from
GcPdfViewer.registerFallbackFont
registerFont()
registerFont(
fontNameOrUrl,url?,args?):void
Registers a new @font-face style with the given font name and URL. The registered font will appear in the list of available fonts in the UI property grid unless the addToUI parameter is set to false. When the document is saved, the registered font will be uploaded to the SupportApi service unless the clientOnly parameter is set to true. If the serverOnly parameter is set to true, the font will not be registered on the client but will be sent to the SupportApi server. Supported font formats include "ttf", "otf", and "woff". Please note that "woff2" is not supported by the Wasm version of the SupportApi.
Parameters
fontNameOrUrl
string
The name of the font to register or the URL of the font file.
url?
string
The URL of the font file.
args?
Optional parameters for font registration.
{ addToUI: boolean; clientOnly: boolean; displayName: string; format: FontFormat; serverOnly: boolean; }
Optional parameters for font registration.
addToUI?
boolean
If true, the font will be added to the UI for selection. Default is true.
clientOnly?
boolean
If true, the font data will not be sent to the SupportApi server. This is useful if the font is already registered on the server.
displayName?
string
A user-friendly name for the font to be displayed in the UI.
format?
The format of the font file ("truetype", "opentype", "woff", or "woff2"). If not provided, the function will attempt to determine the format from the URL.
serverOnly?
boolean
If true, the font will not be registered on the client but will be sent to the SupportApi server.
Returns
void
Examples
// Registering a font with name and URL
viewer.registerFont('SampleFont3', 'https://example.com/fonts/SampleFont3.woff');
// Registering a font with name, URL, and format
viewer.registerFont('SampleFont4', 'https://example.com/fonts/SampleFont4.ttf', 'ttf');
// Registering a font without adding it to the UI for selection
viewer.registerFont('SampleFont5', 'https://example.com/fonts/SampleFont5.ttf', { format: 'ttf', addToUI: false });
// Registering a client-only font without sending it to the SupportApi server
viewer.registerFont('SampleFont6', 'https://example.com/fonts/SampleFont6.ttf', { format: 'ttf', clientOnly: true });
// Registering a server-only font without registering it on the client
viewer.registerFont('SampleFont7', 'https://example.com/fonts/SampleFont7.ttf', { format: 'ttf', serverOnly: true });
Throws
Throws an error if the provided font name is already registered.
Inherited from
removeAnnotation()
removeAnnotation(
pageIndex,annotationId,args?):Promise<boolean>
Remove annotation from document. Requires SupportApi.
Parameters
pageIndex
number
annotationId
string
args?
skipPageRefresh?
boolean
Returns
Promise<boolean>
Example
// Remove annotation with id '2R' located on the first page:
viewer.removeAnnotation(0, '2R');
Inherited from
removeViewAreaStyle()
removeViewAreaStyle(
id):boolean
Removes a css style from the view area by its id.
Parameters
id
string
style element identifier.
Returns
boolean
Example
const id = viewer.addViewAreaStyle(".gc-text-content { font-size: 20px !important; }");
viewer.removeViewAreaStyle(id);
Inherited from
GcPdfViewer.removeViewAreaStyle
repaint()
repaint(
indicesToRepaint?,options?):void
Repaints pages and redraws their annotations.
This method ensures that content and annotations are redrawn for the specified pages. If no indices are specified, the visible pages will be repainted by default. Optionally, you can ensure that invisible pages are repainted when they become visible.
Parameters
indicesToRepaint?
number[]
(Optional) An array of page indices to repaint. If omitted, the method repaints visible pages.
options?
(Optional) Additional options for repaint behavior.
repaintOnVisible?
boolean
If true, ensures that invisible pages will be repainted when they become visible. Defaults to true.
Returns
void
Throws
Will throw an error if indicesToRepaint is not an array of numbers.
Examples
// Redraw content and annotations for visible pages:
viewer.repaint();
// Redraw content and annotations for specific pages (0 and 3):
viewer.repaint([0, 3]);
// Ensure that invisible pages will be repainted as soon as they become visible:
viewer.repaint([1, 2], { repaintOnVisible: true });
Inherited from
repaintTextLayer()
repaintTextLayer(
indicesToRepaint?):void
Repaints the text layer for the visible pages if the text layer is available. This primarily involves repainting text selection and highlighting elements.
Parameters
indicesToRepaint?
number[]
If specified, an array of page indices for which the text layer should be repainted. If not specified, the method repaints the text layer for all visible pages.
Returns
void
Remarks
This method is useful when the text layer needs to be updated after changes to page content or visibility. It is particularly beneficial for improving performance when you want to repaint only text selection and highlighting elements without redrawing the entire PDF page and annotations.
Examples
// Repaint the text layer for all visible pages:
viewer.repaintTextLayer();
// Repaint the text layer for pages with indices 0 and 3:
viewer.repaintTextLayer([0, 3]);
Inherited from
resetForm()
resetForm():
void
Reset form values.
Returns
void
Inherited from
resolvePageIndex()
resolvePageIndex(
pageRef):Promise<number>
Resolve page index using PDF page reference.
Parameters
pageRef
any
Returns
Promise<number>
Example
const openAction = (await viewer.viewerPreferences).openAction;
if(openAction && openAction.dest) {
const pageRef = openAction.dest[0];
const targetPageIndex = await viewer.resolvePageIndex(pageRef);
}
Inherited from
resolveRegisteredFonts()
resolveRegisteredFonts():
Promise<string[]>
Resolves registered fonts by downloading their data and storing it.
This method iterates over the registered fonts, downloads the font data if it hasn't been resolved yet, and stores the data in the local storage. It returns a list of keys for the resolved font data.
Returns
Promise<string[]>
- A promise that resolves to an array of keys for the resolved font data.
Inherited from
GcPdfViewer.resolveRegisteredFonts
save()
save(
fileName?,settings?):Promise<boolean>
Save the modified PDF document to the local disk. Requires SupportApi.
Parameters
fileName?
string
Destination file name.
settings?
Additional save settings.
Returns
Promise<boolean>
Example
Specify destination file name
viewer.save('Test.pdf');
Inherited from
saveAsImages()
saveAsImages(
fileName?,settings?):Promise<boolean>
Saves the pages of the current PDF document as PNG images, zips the result images, and downloads the result zip archive. Requires SupportApi.
Parameters
fileName?
string
optional, destination zip archive file name.
settings?
Additional save settings.
Returns
Promise<boolean>
Examples
// Save the pages of the current PDF document as PNG images and specify destination zip file name:
viewer.saveAsImages('Test.zip');
// Save the pages of the current PDF document as PNG images,
// and specify destination view zoom factor:
viewer.saveAsImages("sample.pdf", { zoomFactor: 1.5 });
Inherited from
saveChanges()
saveChanges():
Promise<boolean>
Upload local changes to server. Requires SupportApi.
Returns
Promise<boolean>
Example
viewer.saveChanges().then(function(result) {
if(result) {
alert("The document saved on the server.");
} else {
alert("Cannot save the document on the server.");
}
});
Inherited from
scrollAnnotationIntoView()
scrollAnnotationIntoView(
pageIndexOrId,annotationOrScrollOptions?,scrollOptions?):Promise<void>
Scroll annotation into view.
Parameters
pageIndexOrId
string | number
annotationOrScrollOptions?
string | AnnotationBase | ScrollPageIntoViewOptions
scrollOptions?
ScrollPageIntoViewOptions | ScrollBehavior
Returns
Promise<void>
Examples
// Scroll the annotation located on the second page into view.
viewer.scrollAnnotationIntoView(1, annotation);
// Scroll annotation into view by id.
viewer.scrollAnnotationIntoView("2R");
// Scroll annotation into view by id using smooth scroll behavior.
viewer.scrollAnnotationIntoView("2R", { behavior: "smooth" });
Inherited from
GcPdfViewer.scrollAnnotationIntoView
scrollPageIntoView()
scrollPageIntoView(
params):void
Scroll page into view.
Parameters
params
object. Scroll parameters: pageNumber - number. Page number. destArray - Array with destination information: destArray[0] // not used, can be null, pdf page reference (for internal use only). destArray[1] // contains destination view fit type name: { name: 'XYZ' } - Destination specified as top-left corner point and a zoom factor (the lower-left corner of the page is the origin of the coordinate system (0, 0)). { name: 'Fit' } - Fits the page into the window { name: 'FitH' } - Fits the widths of the page into the window { name: 'FitV' } - Fits the height of the page into a window. { name: 'FitR' } - Fits the rectangle specified by its top-left and bottom-right corner points into the window. { name: 'FitB' } - Fits the rectangle containing all visible elements on the page into the window. { name: 'FitBH' } - Fits the width of the bounding box into the window. { name: 'FitBV' } - Fits the height of the bounding box into the window.
- destArray[2] // x position offset
- destArray[3] // y position offset (note, the lower-left corner of the page is the origin of the coordinate system (0, 0))
- destArray[4] // can be null, contains bounding box width when view name is FitR,
-
contains scale when view name is XYZ, - destArray[5] // can be null, contains bounding box height when view name is FitR
allowNegativeOffset?
boolean
destArray?
any[]
pageNumber
number
Returns
void
Deprecated
Method scrollPageIntoView deprecated since v2.3.1 use methods goToPage, scrollAnnotationIntoView instead.
Examples
-
// Scroll to page 10.
viewer.scrollPageIntoView( { pageNumber: 10 } )
-
-
// Scroll the annotation bounds rectangle into view:
var rectangle = annotation.rect;
var pagePosX = rectangle[0];
var pagePosY = rectangle[1] + Math.abs(rectangle[3] - rectangle[1]);
viewer.scrollPageIntoView({ pageNumber: pageIndex + 1, destArray: [null, { name: "XYZ" }, pagePosX, pagePosY, viewer.zoomValue / 100.0] });
-
Inherited from
GcPdfViewer.scrollPageIntoView
selectAnnotation()
selectAnnotation(
pageIndex,annotation?):Promise<boolean>
Select the annotation to edit. Requires SupportApi.
Parameters
pageIndex
Page index (zero based) or annotation id.
string | number
annotation?
Annotation id or annotation object itself.
string | AnnotationBase
Returns
Promise<boolean>
Examples
// Select an annotation with id 2R:
viewer.selectAnnotation("2R");
// Select an annotation with id 9R located on the last page:
viewer.selectAnnotation(viewer.pageCount - 1, "9R");
Inherited from
setAnnotationBounds()
setAnnotationBounds(
annotationId,bounds,origin?,select?):Promise<void>
Use the setAnnotationBounds method to set the position and / or size of the annotation.
Parameters
annotationId
string
annotation object or annotation id.
bounds
Destination bounds - x, y, width and height are optional.
h
number
w
number
x
number
y
number
origin?
Source coordinate system origin. Default is TopLeft
"TopLeft" | "BottomLeft"
select?
boolean
Select annotation after editing. Default is false.
Returns
Promise<void>
Example
// Set the location of the annotation to the top / left corner:
viewer.setAnnotationBounds('1R', {x: 0, y: 0});
// Set the location of the annotation to the bottom / left corner:
viewer.setAnnotationBounds('1R', {x: 0, y: 0}, 'BottomLeft');
// Set the annotation size to 40 x 40 points:
viewer.setAnnotationBounds('1R', {w: 40, h: 40});
// Set the annotation position to x=50, y=50 (origin top / left) and size to 40 x 40 points:
viewer.setAnnotationBounds('1R', {x: 50, y: 50, w: 40, h: 40});
Inherited from
GcPdfViewer.setAnnotationBounds
setPageRotation()
setPageRotation(
pageIndex,rotation,viewRotationIncluded?):Promise<boolean>
Set the absolute page rotation in degrees. Valid values are 0, 90, 180, and 270 degrees. Requires SupportApi.
Parameters
pageIndex
number
rotation
number
viewRotationIncluded?
boolean
Returns
Promise<boolean>
Example
// Set the first page rotation to 180 degrees:
await viewer.setPageRotation(0, 180);
Inherited from
setPageSize()
setPageSize(
pageIndex,size):Promise<boolean>
Set page size. Requires SupportApi.
Parameters
pageIndex
number
size
height
number
width
number
Returns
Promise<boolean>
Example
// Set new page size for the first page:
viewer.setPageSize(0, { width: 300, height: 500 } );
Inherited from
setPageTabs()
setPageTabs(
pageIndex,tabs):void
Set page annotations tabs order. A name specifying the tab order that shall be used for annotations on the page. Possible values are: R - Row order. C - Column order. S - Structure order (not supported by DsPdfViewer). A - Annotations order. This order refers to the order of annotation in the annotations collection. W - Widgets order . This order uses the same ordering as "Annotations" order, but two passes are made, the first only picking the widget annotations and the second picking all other annotations.
Parameters
pageIndex
number
tabs
"S" | "R" | "C" | "A" | "W"
Returns
void
Inherited from
setTheme()
setTheme(
theme?):void
Set active viewer theme.
Parameters
theme?
string
theme name, specified in themes option.
Returns
void
Example
viewer.setTheme("themes/light-blue");
Inherited from
showAnnotationFocusOutline()
showAnnotationFocusOutline(
annotationId,animationDelay?,color?):void
Show animated highlight for a specific annotation and then hide it with animation.
Parameters
annotationId
any
The ID or annotation object for which to show the highlight.
animationDelay?
number
Optional. The delay (in milliseconds) before hiding the animation. Minimum value is 1000 milliseconds (1 second).
color?
string
Returns
void
Inherited from
GcPdfViewer.showAnnotationFocusOutline
showFormFiller()
showFormFiller():
void
Displays 'Form filler' dialog.
Returns
void
Example
if(viewer.hasForm) {
viewer.showFormFiller();
}
Inherited from
showMessage()
showMessage(
message,details?,severity?):void
Shows the message for the user.
Parameters
message
string
details?
string
severity?
"info" | "error" | "warn" | "debug"
Returns
void
Example
// Show warning message
viewer.showMessage("Warning message text", "", "warn");
Inherited from
showPdfOrganizer()
showPdfOrganizer():
PdfOrganizerDialog
Show PDF Organizer dialog.
Returns
PdfOrganizerDialog
Example
viewer.showPdfOrganizer();
Inherited from
showSecondToolbar()
showSecondToolbar(
toolbarKey):Promise<void>
Show a second toolbar with a key specified by the toolbarKey argument.
Parameters
toolbarKey
string
Returns
Promise<void>
Example
viewer.showSecondToolbar("draw-tools");
Inherited from
showSignTool()
showSignTool(
preferredSettings?):void
Displays the 'Add Signature' dialog. Requires SupportApi.
Parameters
preferredSettings?
Optional. These settings will take priority over signSettings option.
Returns
void
Example
viewer.showSignTool();
Inherited from
submitForm()
submitForm(
submitUrl,options?):Promise<void>
Executes "Submit A Form action" to send filled form data to a web server or email. Form data is submitted as HTML form using HTML submit method.
Parameters
submitUrl
string
Destination URI.
options?
SubmitFormOptions
Optional, submit form options.
Returns
Promise<void>
Examples
Submit form to a web server using absolute URL:
viewer.submitForm("http://myhost.local/AcceptHtmlForm");
Submit form to a web server using relative URL:
viewer.submitForm("/CustomFormHandler");
Submit form to an email address:
viewer.submitForm("mailto:myform@example.com");
Inherited from
toggleSearchUI()
toggleSearchUI(
expand?,replaceMode?):void
Toggles the visibility of the Search UI, which includes both the search bar and search panel. Allows switching between Search and Replace modes, and optionally expanding or collapsing the UI.
Parameters
expand?
boolean
Whether to expand (true) or collapse (false) the Search UI. Default is true.
replaceMode?
boolean
Whether to enable Replace mode in the Search UI. Default is false.
Returns
void
Examples
// Example 1: Default behavior (expand the Search UI and disable Replace mode)
viewer.toggleSearchUI();
// The Search UI expands and displays in Search mode.
// Example 2: Expand the Search UI and enable Replace mode
viewer.toggleSearchUI(true, true);
// The Search UI expands and displays the Replace mode.
// Example 3: Collapse the Search UI
viewer.toggleSearchUI(false);
// The Search UI collapses, hiding the search components.
// Example 4: Expand the Search UI without enabling Replace mode
viewer.toggleSearchUI(true, false);
// The Search UI expands but remains in Search mode.
Inherited from
triggerEvent()
triggerEvent(
eventName,args?):void
Trigger event.
Parameters
eventName
EventName
args?
EventArgs | BeforeOpenEventArgs | ThemeChangedEventArgs
Returns
void
Example
// Listen CustomEvent:
viewer.getEvent("CustomEvent").register(function(args) {
console.log(args);
});
// Trigger CustomEvent:
viewer.triggerEvent("CustomEvent", { arg1: 1, arg2: 2});
Inherited from
undoChanges()
undoChanges():
void
Undo document changes. Requires SupportApi.
Returns
void
Example
if(viewer.hasUndoChanges) {
viewer.undoChanges();
}
Inherited from
unlockAnnotation()
unlockAnnotation(
id):Promise<AnnotationBase>
Unlock annotation for editing.
Parameters
id
annotation id
string | AnnotationBase
Returns
Promise<AnnotationBase>
Inherited from
unselectAnnotation()
unselectAnnotation():
any
Reset annotation selection. Requires SupportApi.
Returns
any
Example
viewer.unselectAnnotation();
Inherited from
GcPdfViewer.unselectAnnotation
updateAnnotation()
updateAnnotation(
pageIndex,annotation,args?):Promise<{annotation:AnnotationBase;pageIndex:number; }>
Update annotation. Requires SupportApi.
Parameters
pageIndex
number
annotation
args?
changedPageIndex?
number
prevPageIndex?
number
skipPageRefresh?
boolean
Returns
Promise<{ annotation: AnnotationBase; pageIndex: number; }>
Promise, resolved by updated annotation object.
Example
// Update annotation on the first page (page index is 0):
viewer.updateAnnotation(0, annotation1);
Inherited from
updateAnnotations()
updateAnnotations(
pageIndex,annotations,args?):Promise<{annotations:AnnotationBase[];pageIndex:number; }>
Update multiple annotations at the same time. Requires SupportApi.
Parameters
pageIndex
number
annotations
AnnotationBase | AnnotationBase[]
args?
skipPageRefresh?
boolean
Returns
Promise<{ annotations: AnnotationBase[]; pageIndex: number; }>
Promise, resolved by updated annotation objects.
Example
// Update annotations on the second page (page index is 1):
var annotationsToUpdate = [annotation1, annotation2];
viewer.updateAnnotations(1, annotationsToUpdate);
Inherited from
updateGroupFieldValue()
updateGroupFieldValue(
fieldName,newValue,args?):Promise<boolean>
Update radio buttons group given by parameter fieldName with new field value.
Parameters
fieldName
string
Grouped radio buttons field name
newValue
string
New fieldValue
args?
skipPageRefresh boolean - set to true if you don't need to update page display. Default is false. propertyName string - property name to update. Default is "fieldValue".
propertyName?
string
skipPageRefresh?
boolean
Returns
Promise<boolean>
Promise resolved by boolean value, true - radio buttons updated, false - an error occurred.
Examples
viewer.updateGroupFieldValue("radiogroup1", "3", { skipPageRefresh: true } );
viewer.updateGroupFieldValue("radiogroup1", "3", { propertyName: "alternativeText", skipPageRefresh: true } );
Inherited from
GcPdfViewer.updateGroupFieldValue
validateForm()
validateForm(
validator?,silent?,ignoreValidationAttrs?):string|boolean
Use this method to validate an active form and get the validation result.
Parameters
validator?
(fieldValue, field) => string | boolean
Optional. The validator function which will be called for each field in the form. You can return a string value with message about validation error, this message will be shown in UI. Return true or null for success result.
silent?
boolean
Optional. Pass true if you don't want to display any messages to the user, but just want to get the final validation result.
ignoreValidationAttrs?
boolean
Optional. Pass true to skip validation using field attributes such as required, min, max, minLength, maxLength, email and pattern, these attributes will be ignored.
Returns
string | boolean
Returns true if validation was successful, false, or a string with a validation error message when validation is failed.
Example
// Validate all form fields, each field must have the value "YES" or "NO".
viewer.validateForm((fieldValue, field) => { return (fieldValue === "YES" || fieldValue === "NO") ? true : "Possible value is YES or NO."; });
Inherited from
- Class: DsPdfViewer
- Example
- Extends
- Constructors
- new DsPdfViewer()
- Properties
- registeredFonts
- Accessors
- i18n
- LicenseKey
- activatedEditorMode
- annotations
- beforeUnloadConfirmation
- canEditDocument
- currentUserName
- dataLoader
- editMode
- eventBus
- fileData
- fileName
- fileSize
- fileUrl
- fingerprint
- gcPdfVersion
- hasChanges
- hasCopyData
- hasDocument
- hasForm
- hasPersistentConnection
- hasRedoChanges
- hasReplyTool
- hasUndoChanges
- hideAnnotations
- highlightManager
- isEditModeSticked
- isInEditorMode
- jsFormatFunctions
- language
- layoutMode
- leftSidebar
- logLevel
- modificationsState
- onAfterAddAnnotation
- onAfterOpen
- onAfterRemoveAnnotation
- onAfterUpdateAnnotation
- onBeforeAddAnnotation
- onBeforeOpen
- onBeforeRemoveAnnotation
- onBeforeUpdateAnnotation
- onError
- onThemeChanged
- optionalContentConfig
- options
- pageCount
- pageDisplay
- pageIndex
- requiredSupportApiVersion
- rightSidebar
- rotation
- scrollView
- searcher
- secondToolbar
- secondToolbarLayout
- signToolStorage
- storage
- structureTree
- supportApi
- supportApiVersion
- toolbarLayout
- undoCount
- undoIndex
- undoState
- version
- viewerPreferences
- zoomMode
- zoomValue
- Methods
- findControl()
- addAnnotation()
- addAnnotationEditorPanel()
- addArticlesPanel()
- addAttachmentsPanel()
- addDefaultPanels()
- addDocumentListPanel()
- addFormEditorPanel()
- addLayersPanel()
- addOutlinePanel()
- addReplyTool()
- addSearchPanel()
- addStamp()
- addStickyNote()
- addThumbnailsPanel()
- addViewAreaStyle()
- applyOptions()
- applyToolbarLayout()
- applyViewPortScale()
- changeBoundsOrigin()
- changeOrigin()
- changeOriginToBottom()
- changeOriginToTop()
- clearHighlightedSegments()
- cloneAnnotation()
- close()
- closePanel()
- collectQuadPoints()
- confirm()
- convertPdfRectToWindowCoordinates()
- dateToPdfString()
- deletePage()
- dispose()
- download()
- execCopyAction()
- execCutAction()
- execDeleteAction()
- execPasteAction()
- findAnnotations()
- getDocumentInformation()
- getDocumentSecurity()
- getEvent()
- getPageLocation()
- getPageRotation()
- getPageSize()
- getPageTabs()
- getSelectedText()
- getSignatureInfo()
- getViewPort()
- goBack()
- goForward()
- goToFirstPage()
- goToLastPage()
- goToNextPage()
- goToPage()
- goToPageNumber()
- goToPrevPage()
- hideSecondToolbar()
- highlightTextSegment()
- invalidate()
- isFontUrlRegistered()
- loadAndScrollPageIntoView()
- loadDocumentList()
- lockAnnotation()
- markAnnotationLayerDirty()
- newDocument()
- newPage()
- open()
- openLocalFile()
- openPanel()
- pdfStringToDate()
- print()
- redoChanges()
- redrawTouchedAnnotations()
- registerFallbackFont()
- registerFont()
- removeAnnotation()
- removeViewAreaStyle()
- repaint()
- repaintTextLayer()
- resetForm()
- resolvePageIndex()
- resolveRegisteredFonts()
- save()
- saveAsImages()
- saveChanges()
- scrollAnnotationIntoView()
- scrollPageIntoView()
- selectAnnotation()
- setAnnotationBounds()
- setPageRotation()
- setPageSize()
- setPageTabs()
- setTheme()
- showAnnotationFocusOutline()
- showFormFiller()
- showMessage()
- showPdfOrganizer()
- showSecondToolbar()
- showSignTool()
- submitForm()
- toggleSearchUI()
- triggerEvent()
- undoChanges()
- unlockAnnotation()
- unselectAnnotation()
- updateAnnotation()
- updateAnnotations()
- updateGroupFieldValue()
- validateForm()