@grapecity/gcpdfviewer
Version:
GcDocs PDF Viewer
1,287 lines • 297 kB
HTML
<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>ViewerOptions | Document Solutions PDF Viewer - v7.2.3</title><meta name="description" content="Documentation for Document Solutions PDF Viewer - v7.2.3"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><link rel="stylesheet" href="../assets/custom.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
<div class="tsd-toolbar-contents container">
<div class="table-cell" id="tsd-search" data-base="..">
<div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Document Solutions PDF Viewer - v7.2.3</a></div>
<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
<div class="container container-main">
<div class="col-8 col-content">
<div class="tsd-page-title">
<ul class="tsd-breadcrumb">
<li><a href="../index.html">Document Solutions PDF Viewer - v7.2.3</a></li>
<li><a href="ViewerOptions.html">ViewerOptions</a></li></ul>
<h1>Class ViewerOptions</h1></div>
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography"><p>GcDocs PDF Viewer options class.</p>
</div></section>
<section class="tsd-panel tsd-hierarchy">
<h4>Hierarchy</h4>
<ul class="tsd-hierarchy">
<li><span class="target">ViewerOptions</span></li></ul></section>
<section class="tsd-panel-group tsd-index-group">
<section class="tsd-panel tsd-index-panel">
<details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
<h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex=0><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z" fill="var(--color-text)"></path></svg> Index</h5></summary>
<div class="tsd-accordion-details">
<section class="tsd-index-section">
<h3 class="tsd-index-heading">Properties</h3>
<div class="tsd-index-list"><a href="ViewerOptions.html#allowedTools" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="#FF984D" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="12" id="icon-1024-path"></rect><path d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z" fill="var(--color-text)" id="icon-1024-text"></path></svg><span>allowed<wbr/>Tools</span></a>
<a href="ViewerOptions.html#baseUrl" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>base<wbr/>Url</span></a>
<a href="ViewerOptions.html#cMapPacked" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>c<wbr/>Map<wbr/>Packed</span></a>
<a href="ViewerOptions.html#cMapUrl" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>c<wbr/>Map<wbr/>Url</span></a>
<a href="ViewerOptions.html#caret" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>caret</span></a>
<a href="ViewerOptions.html#coordinatesOrigin" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>coordinates<wbr/>Origin</span></a>
<a href="ViewerOptions.html#coordinatesPrecision" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>coordinates<wbr/>Precision</span></a>
<a href="ViewerOptions.html#customIcons" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>custom<wbr/>Icons</span></a>
<a href="ViewerOptions.html#disableFeatures" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>disable<wbr/>Features</span></a>
<a href="ViewerOptions.html#disableHistory" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>disable<wbr/>History</span></a>
<a href="ViewerOptions.html#disablePageLabels" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>disable<wbr/>Page<wbr/>Labels</span></a>
<a href="ViewerOptions.html#documentListUrl" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>document<wbr/>List<wbr/>Url</span></a>
<a href="ViewerOptions.html#editorDefaults" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>editor<wbr/>Defaults</span></a>
<a href="ViewerOptions.html#enableXfa" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>enable<wbr/>Xfa</span></a>
<a href="ViewerOptions.html#externalLinkTarget" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>external<wbr/>Link<wbr/>Target</span></a>
<a href="ViewerOptions.html#fieldsAppearance" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>fields<wbr/>Appearance</span></a>
<a href="ViewerOptions.html#file" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>file</span></a>
<a href="ViewerOptions.html#formFiller" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>form<wbr/>Filler</span></a>
<a href="ViewerOptions.html#friendlyFileName" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>friendly<wbr/>File<wbr/>Name</span></a>
<a href="ViewerOptions.html#hideAnnotationPopups" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>hide<wbr/>Annotation<wbr/>Popups</span></a>
<a href="ViewerOptions.html#hideAnnotationTypes" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>hide<wbr/>Annotation<wbr/>Types</span></a>
<a href="ViewerOptions.html#ignoreInitialView" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>ignore<wbr/>Initial<wbr/>View</span></a>
<a href="ViewerOptions.html#jsExecutionConfig" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>js<wbr/>Execution<wbr/>Config</span></a>
<a href="ViewerOptions.html#keepFileData" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>keep<wbr/>File<wbr/>Data</span></a>
<a href="ViewerOptions.html#language" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>language</span></a>
<a href="ViewerOptions.html#lockOpenTimeout" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>lock<wbr/>Open<wbr/>Timeout</span></a>
<a href="ViewerOptions.html#logLevel" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>log<wbr/>Level</span></a>
<a href="ViewerOptions.html#maxCanvasPixels" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>max<wbr/>Canvas<wbr/>Pixels</span></a>
<a href="ViewerOptions.html#newDocumentFileName" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>new<wbr/>Document<wbr/>File<wbr/>Name</span></a>
<a href="ViewerOptions.html#onBeforeCloseContextMenu" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>on<wbr/>Before<wbr/>Close<wbr/>Context<wbr/>Menu</span></a>
<a href="ViewerOptions.html#onBeforeOpenContextMenu" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>on<wbr/>Before<wbr/>Open<wbr/>Context<wbr/>Menu</span></a>
<a href="ViewerOptions.html#onInitialized" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>on<wbr/>Initialized</span></a>
<a href="ViewerOptions.html#openParameters" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>open<wbr/>Parameters</span></a>
<a href="ViewerOptions.html#pageDisplay" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>page<wbr/>Display</span></a>
<a href="ViewerOptions.html#password" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>password</span></a>
<a href="ViewerOptions.html#renderInteractiveForms" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>render<wbr/>Interactive<wbr/>Forms</span></a>
<a href="ViewerOptions.html#renderer" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>renderer</span></a>
<a href="ViewerOptions.html#replyTool" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>reply<wbr/>Tool</span></a>
<a href="ViewerOptions.html#requireTheme" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>require<wbr/>Theme</span></a>
<a href="ViewerOptions.html#restoreViewStateOnLoad" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>restore<wbr/>View<wbr/>State<wbr/>On<wbr/>Load</span></a>
<a href="ViewerOptions.html#saveAsOptions" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>save<wbr/>As<wbr/>Options</span></a>
<a href="ViewerOptions.html#saveSettings" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>save<wbr/>Settings</span></a>
<a href="ViewerOptions.html#secondToolbar" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>second<wbr/>Toolbar</span></a>
<a href="ViewerOptions.html#sharing" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>sharing</span></a>
<a href="ViewerOptions.html#shortcuts" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>shortcuts</span></a>
<a href="ViewerOptions.html#showContextMenuOnSelection" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>show<wbr/>Context<wbr/>Menu<wbr/>On<wbr/>Selection</span></a>
<a href="ViewerOptions.html#signTool" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>sign<wbr/>Tool</span></a>
<a href="ViewerOptions.html#snapAlignment" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>snap<wbr/>Alignment</span></a>
<a href="ViewerOptions.html#stamp" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>stamp</span></a>
<a href="ViewerOptions.html#supportApi" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>support<wbr/>Api</span></a>
<a href="ViewerOptions.html#textMarkupContextMenu" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>text<wbr/>Markup<wbr/>Context<wbr/>Menu</span></a>
<a href="ViewerOptions.html#theme" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>theme</span></a>
<a href="ViewerOptions.html#themes" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>themes</span></a>
<a href="ViewerOptions.html#useCanvasForSelection" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>use<wbr/>Canvas<wbr/>For<wbr/>Selection</span></a>
<a href="ViewerOptions.html#useFloatingSearchBar" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>use<wbr/>Floating<wbr/>Search<wbr/>Bar</span></a>
<a href="ViewerOptions.html#useNativeContextMenu" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>use<wbr/>Native<wbr/>Context<wbr/>Menu</span></a>
<a href="ViewerOptions.html#userData" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>user<wbr/>Data</span></a>
<a href="ViewerOptions.html#userName" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>user<wbr/>Name</span></a>
<a href="ViewerOptions.html#workerSrc" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>worker<wbr/>Src</span></a>
<a href="ViewerOptions.html#zoomByMouseWheel" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>zoom<wbr/>By<wbr/>Mouse<wbr/>Wheel</span></a>
<a href="ViewerOptions.html#zoomOptions" class="tsd-index-link tsd-kind-property tsd-parent-kind-class"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>zoom<wbr/>Options</span></a>
</div></section></div></details></section></section>
<section class="tsd-panel-group tsd-member-group">
<h2>Properties</h2>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="allowedTools" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>allowed<wbr/>Tools</span><a href="#allowedTools" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></h3>
<div class="tsd-signature">allowed<wbr/>Tools<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>annotationEditor<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"all"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"annotations"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"fields"</span><span class="tsd-signature-symbol">; </span>formEditor<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"all"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"annotations"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"fields"</span><span class="tsd-signature-symbol">; </span>viewer<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"all"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"annotations"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"fields"</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol"> = ...</span></div>
<div class="tsd-comment tsd-typography"><p>Use this option to enable annotation tools from the form editor or field tools from the annotation editor.</p>
<h3>Default</h3><pre><code class="language-javascript"><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-14">annotationEditor</span><span class="hl-1">: </span><span class="hl-4">'annotations'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-14">formEditor</span><span class="hl-1">: </span><span class="hl-4">'fields'</span><br/><span class="hl-1">}</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">allowedTools</span><span class="hl-1"> = { </span><span class="hl-2">formEditor:</span><span class="hl-1"> </span><span class="hl-4">'all'</span><span class="hl-1"> };</span>
</code></pre>
</div>
<div class="tsd-type-declaration">
<h4>Type declaration</h4>
<ul class="tsd-parameters">
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> annotation<wbr/>Editor<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"all"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"annotations"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"fields"</span></h5></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> form<wbr/>Editor<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"all"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"annotations"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"fields"</span></h5></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> viewer<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"all"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"annotations"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"fields"</span></h5></li></ul></div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="baseUrl" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>base<wbr/>Url</span><a href="#baseUrl" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">base<wbr/>Url<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = ""</span></div>
<div class="tsd-comment tsd-typography"><p>Used by form submission and for theme urls.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">baseUrl:</span><span class="hl-1"> </span><span class="hl-4">"http://localhost/mysite/"</span><span class="hl-1"> });</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="cMapPacked" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>c<wbr/>Map<wbr/>Packed</span><a href="#cMapPacked" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">c<wbr/>Map<wbr/>Packed<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span></div>
<div class="tsd-comment tsd-typography"><p>Indicates if the viewer should look for a compressed version of the CMap file with the extension '.bin'.</p>
<h3>Default</h3><p>true</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">cMapPacked:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="cMapUrl" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>c<wbr/>Map<wbr/>Url</span><a href="#cMapUrl" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">c<wbr/>Map<wbr/>Url<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div>
<div class="tsd-comment tsd-typography"><p>The URI to a folder where the external font CMap tables are stored.</p>
<h3>Default</h3><p>'resources/bcmaps/'</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">cMapUrl:</span><span class="hl-1"> </span><span class="hl-4">"../data/cmaps/"</span><span class="hl-1"> } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="caret" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>caret</span><a href="#caret" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">caret<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">{ </span>allowForPan<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>caretBlinkTime<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>caretStopBlinkTime<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>color<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>width<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol"> = ...</span></div>
<div class="tsd-comment tsd-typography"><p>Text selection cursor settings.</p>
<h3>Description</h3><pre><code class="language-javascript"><span class="hl-2">Settings</span><span class="hl-1"> </span><span class="hl-14">description</span><span class="hl-1">:</span><br/><span class="hl-2">caretBlinkTime</span><span class="hl-1"> - </span><span class="hl-2">milliseconds</span><span class="hl-1">, </span><span class="hl-2">caret</span><span class="hl-1"> </span><span class="hl-2">blink</span><span class="hl-1"> </span><span class="hl-2">period</span><br/><span class="hl-2">caretStopBlinkTime</span><span class="hl-1"> - </span><span class="hl-2">milliseconds</span><span class="hl-1">, </span><span class="hl-2">stop</span><span class="hl-1"> </span><span class="hl-2">caret</span><span class="hl-1"> </span><span class="hl-2">blink</span><span class="hl-1"> </span><span class="hl-2">time</span><span class="hl-1">, </span><span class="hl-8">0</span><span class="hl-1"> - </span><span class="hl-2">don</span><span class="hl-4">'t sto</span><span class="hl-15">p</span><br/><span class="hl-2">color</span><span class="hl-1"> - </span><span class="hl-2">The</span><span class="hl-1"> </span><span class="hl-2">caret</span><span class="hl-1"> </span><span class="hl-2">color</span><br/><span class="hl-2">width</span><span class="hl-1"> - </span><span class="hl-2">The</span><span class="hl-1"> </span><span class="hl-2">caret</span><span class="hl-1"> </span><span class="hl-2">width</span><br/><span class="hl-2">allowForPan</span><span class="hl-1"> - </span><span class="hl-2">Allow</span><span class="hl-1"> </span><span class="hl-2">to</span><span class="hl-1"> </span><span class="hl-2">move</span><span class="hl-1"> </span><span class="hl-2">caret</span><span class="hl-1"> </span><span class="hl-2">using</span><span class="hl-1"> </span><span class="hl-2">keys</span><span class="hl-1"> </span><span class="hl-2">even</span><span class="hl-1"> </span><span class="hl-2">when</span><span class="hl-1"> </span><span class="hl-2">pan</span><span class="hl-1"> </span><span class="hl-2">tool</span><span class="hl-1"> </span><span class="hl-2">activated</span><span class="hl-1">.</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Hide the caret:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">caret:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> } );</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Change the caret color and width:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">caret:</span><span class="hl-1"> {</span><span class="hl-4">"color"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">"#ff0000"</span><span class="hl-1">, </span><span class="hl-4">"width"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-8">2</span><span class="hl-1">} } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="coordinatesOrigin" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>coordinates<wbr/>Origin</span><a href="#coordinatesOrigin" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">coordinates<wbr/>Origin<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">"TopLeft"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"BottomLeft"</span><span class="tsd-signature-symbol"> = 'TopLeft'</span></div>
<div class="tsd-comment tsd-typography"><p>Origin coordinates for the PDF page.
The option is used for a properties panel of the Annotation and Form editor.</p>
<h3>Default</h3><p>TopLeft</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Change the coordinates origin to bottom/left point:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">coordinatesOrigin:</span><span class="hl-1"> </span><span class="hl-4">"BottomLeft"</span><span class="hl-1"> } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="coordinatesPrecision" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>coordinates<wbr/>Precision</span><a href="#coordinatesPrecision" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">coordinates<wbr/>Precision<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
<div class="tsd-comment tsd-typography"><p>Annotation coordinates round precision. Used by the Annotation and Form editor.</p>
<h3>Default</h3><p>1</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Change the default rounding precision to 0.001:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">coordinatesPrecision:</span><span class="hl-1"> </span><span class="hl-8">0.001</span><span class="hl-1"> } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="customIcons" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>custom<wbr/>Icons</span><a href="#customIcons" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">custom<wbr/>Icons<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">{ </span>[iconKey: <span class="tsd-signature-type">string</span>]<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></div>
<div class="tsd-comment tsd-typography"><p>Use this option to change the default SVG icons to custom ones.
Available icon keys: 'undo2', 'font-bold', 'font-italic', 'checkbox-checked', 'checkbox-unchecked', 'close', 'aspect-ratio', 'search', 'chevron', 'chevron-accent',
'animated-spinner', 'drag-handle', 'download', 'keyboard', 'brush', 'image', 'image-list', 'save', 'theme-change', 'single-page', 'continuous-view', 'view-mode', 'show-view-tools',
'show-edit-tools', 'show-form-editor', 'toggle-annotation-properties', 'toggle-form-properties', 'edit-converted-to-content', 'edit-free-text', 'edit-ink', 'edit-text', 'edit-square',
'edit-line', 'edit-link', 'edit-circle', 'edit-stamp', 'add-stamp-accent', 'edit-sign-tool', 'edit-file-attachment', 'edit-sound', 'edit-polyline', 'edit-polygon', 'edit-popup',
'edit-redact', 'edit-redact-apply', 'edit-redact-applied', 'edit-unknown-type', 'edit-widget-signature', 'edit-widget-tx-field', 'edit-widget-tx-text-area', 'edit-widget-tx-comb',
'edit-widget-tx-password', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio', 'edit-widget-btn-push', 'edit-widget-btn-submit', 'edit-widget-btn-reset', 'edit-widget-ch-combo',
'edit-widget-ch-list-box', 'edit-widget-unknown-type', 'edit-undo', 'edit-redo', 'remove-attachment', 'edit-select', 'edit-erase', 'form-filler', 'field-invalid', 'new-document',
'new-page', 'delete-page', 'print', 'rotate', 'confirm-ok', 'confirm-cancel', 'open', 'open-pdf', 'text-selection', 'hide-annotations', 'pan', 'bookmarks', 'structure-tree', 'layers', 'thumbnails', 'articles', 'attachments', 'documents-list', 'share', 'shared-documents-list', 'view-mode-on', 'view-mode-off', 'edit-mode-on', 'edit-mode-off', 'remove-user', 'doc-properties', 'about', 'pdf-doc-title', 'close-icon-sm', 'menu-dots', 'comments-status-accepted', 'comments-status-cancelled', 'comments-status-completed', 'comments-status-rejected', 'context-copy', 'context-paste', 'context-cut', 'context-delete', 'move-to-top-page', 'move-to-bottom-page', 'arrow-expand-horizontal', 'arrow-expand-all', 'magnify-minus-outline', 'magnify-plus-outline', 'magnify', 'text-tools', 'draw-tools', 'attachment-tools', 'form-tools', 'page-tools', 'resize-handle-h'.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-2">selector</span><span class="hl-1">, { </span><br/><span class="hl-1"> </span><span class="hl-2">customIcons:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">'open'</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"></path></svg>'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">'search'</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"></path></svg>'</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
</code></pre>
</div>
<div class="tsd-type-declaration">
<h4>Type declaration</h4>
<ul class="tsd-parameters">
<li class="tsd-parameter-index-signature">
<h5><span class="tsd-signature-symbol">[</span>iconKey: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">]: </span><span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span></h5></li></ul></div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="disableFeatures" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>disable<wbr/>Features</span><a href="#disableFeatures" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">disable<wbr/>Features<span class="tsd-signature-symbol">?:</span> <a href="../types/ViewerFeatureName.html" class="tsd-signature-type" data-tsd-kind="Type alias">ViewerFeatureName</a><span class="tsd-signature-symbol">[]</span></div>
<div class="tsd-comment tsd-typography"><p>Use the disableFeatures option to disable certain features
of the DsPdfViewer depending on your company security policy.
Note, you can specify the disableFeatures option only during the DsPdfViewer initialization.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Disable DragAndDrop operations, JavaScript actions, File and Sound attachments:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">disableFeatures:</span><span class="hl-1"> [</span><span class="hl-4">'DragAndDrop'</span><span class="hl-1">, </span><span class="hl-4">'JavaScript'</span><span class="hl-1">, </span><span class="hl-4">'AllAttachments'</span><span class="hl-1">] } );</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Disable DragAndDrop for the DsPdfViewer:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-2">selector</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">disableFeatures:</span><span class="hl-1"> [</span><span class="hl-4">'DragAndDrop'</span><span class="hl-1">]</span><br/><span class="hl-1">});</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="disableHistory" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>disable<wbr/>History</span><a href="#disableHistory" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">disable<wbr/>History<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<div class="tsd-comment tsd-typography"><p>If set to true, disables browser history during navigation inside PDF document.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-2">selector</span><span class="hl-1">, { </span><br/><span class="hl-1"> </span><span class="hl-2">disableHistory:</span><span class="hl-1"> </span><span class="hl-0">true</span><br/><span class="hl-1">});</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="disablePageLabels" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>disable<wbr/>Page<wbr/>Labels</span><a href="#disablePageLabels" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">disable<wbr/>Page<wbr/>Labels<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></div>
<div class="tsd-comment tsd-typography"><p>Set this option to true if you wish to disable page labels.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">disablePageLabels:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1"> } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="documentListUrl" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>document<wbr/>List<wbr/>Url</span><a href="#documentListUrl" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">document<wbr/>List<wbr/>Url<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><a href="../types/DocumentListItem.html" class="tsd-signature-type" data-tsd-kind="Type alias">DocumentListItem</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> = "/documents"</span></div>
<div class="tsd-comment tsd-typography"><p>URL to document list service used by DocumentListPanel (see addDocumentListPanel method).
The service should return JSON string with available documents array, e.g.:
[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "Hello doc 2", "title": "title 2"}]
or
["pdf1.pdf", "pdf2.pdf"]</p>
<h3>Default</h3><p>"/documents"</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Load document list from external service:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">documentListUrl:</span><span class="hl-1"> </span><span class="hl-4">"documents.json"</span><span class="hl-1"> } );</span>
</code></pre>
<p>Here is the content of the documents.json file:</p>
<pre><code><span class="hl-1">[ </span><br/><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-4">"path"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">"/sample1.pdf"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">"name"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">"Simple text"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">"title"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">"Sample 1"</span><br/><span class="hl-1"> }, </span><br/><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-4">"path"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">"/sample2.pdf"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">"previewContent"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">"<b>Preview HTML content</b> goes here."</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">"title"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">"Sample 2"</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-4">"path"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">"/sample3.pdf"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">"name"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">"Open sample3.pdf"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">"title"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">"Sample 3"</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">]</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Load document list using DATA URI:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">documentListUrl:</span><span class="hl-1"> </span><span class="hl-4">'data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "Hello doc 2", "title": "title 2"}]'</span><span class="hl-1"> } );</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Use predefined document list:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">options</span><span class="hl-1"> = {};</span><br/><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">documentListUrl</span><span class="hl-1"> = [ </span><br/><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-2">path:</span><span class="hl-1"> </span><span class="hl-4">"/sample1.pdf"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-4">"Open sample1.pdf"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-4">"Sample 1"</span><br/><span class="hl-1"> }, </span><br/><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-2">path:</span><span class="hl-1"> </span><span class="hl-4">"/sample2.pdf"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-4">"Open sample2.pdf"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-4">"Sample 2"</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-2">path:</span><span class="hl-1"> </span><span class="hl-4">"/sample3.pdf"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-4">"Open sample3.pdf"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-4">"Sample 3"</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">];</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, </span><span class="hl-2">options</span><span class="hl-1">);</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Use predefined document list with custom preview content:</span><br/><span class="hl-1"> </span><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">options</span><span class="hl-1"> = {};</span><br/><span class="hl-1"> </span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">documentListUrl</span><span class="hl-1"> = [ </span><br/><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-2">path:</span><span class="hl-1"> </span><span class="hl-4">"/sample1.pdf"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-4">"Sample 1"</span><span class="hl-1">, </span><br/><span class="hl-1"> </span><span class="hl-2">previewContent:</span><span class="hl-1"> </span><span class="hl-4">`<div class="card" style="position: relative;"></span><br/><span class="hl-4"> <h2 class="header" style="line-height: 30px;height: 30px;display: block;text-align: center;"></span><br/><span class="hl-4"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 17 24" style="position: absolute;top: 3px;left: 0px;"><path class="gc-icon-color--text" d="M15.429 3.429h-13.714v16.634l6.857-6.576 1.192 1.138 5.665 5.438v-16.634zM15.589 1.714c0.201 0 0.402 0.040 0.589 0.121 0.589 0.228 0.964 0.777 0.964 1.379v17.263c0 0.603-0.375 1.152-0.964 1.379-0.188 0.080-0.388 0.107-0.589 0.107-0.415 0-0.804-0.147-1.112-0.429l-5.906-5.679-5.906 5.679c-0.308 0.281-0.696 0.442-1.112 0.442-0.201 0-0.402-0.040-0.589-0.121-0.589-0.228-0.964-0.777-0.964-1.379v-17.263c0-0.603 0.375-1.152 0.964-1.379 0.188-0.080 0.388-0.121 0.589-0.121h14.036z"></path></svg><span style="padding-left: 10px; width: 100%; text-align: center;">Sample 1</span></span><br/><span class="hl-4"> </h2></span><br/><span class="hl-4"> <div class="container"></span><br/><span class="hl-4"> <p>Long sample 1 description goes here.</p><div style="width: 100%;text-align: center;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" style="</span><br/><span class="hl-4"> border: 1px dashed #cccccc; padding: 10px; width: 100px; height: 100px; display: inline-block; fill: #999999;</span><br/><span class="hl-4"> "></span><br/><span class="hl-4"> <title>eye</title></span><br/><span class="hl-4"> <path d="M25 9.375c-10.904 0-20.356 6.35-25 15.625 4.644 9.275 14.096 15.625 25 15.625s20.355-6.35 25-15.625c-4.644-9.275-14.096-15.625-25-15.625zM37.327 17.661c2.938 1.874 5.427 4.383 7.297 7.339-1.87 2.955-4.359 5.465-7.297 7.339-3.691 2.354-7.954 3.599-12.327 3.599s-8.636-1.244-12.327-3.599c-2.937-1.874-5.427-4.383-7.296-7.339 1.87-2.955 4.359-5.465 7.297-7.339 0.191-0.122 0.385-0.24 0.579-0.356-0.486 1.334-0.752 2.775-0.752 4.277 0 6.903 5.596 12.5 12.5 12.5s12.5-5.597 12.5-12.5c0-1.503-0.266-2.943-0.752-4.277 0.194 0.116 0.388 0.234 0.579 0.357v0zM25 20.313c0 2.589-2.099 4.688-4.688 4.688s-4.688-2.099-4.688-4.688 2.099-4.688 4.688-4.688 4.688 2.099 4.688 4.688z"></path></span><br/><span class="hl-4"> </svg></span><br/><span class="hl-4"> <p></p></div></span><br/><span class="hl-4"> </div></span><br/><span class="hl-4"> </div>`</span><br/><span class="hl-1"> }, </span><br/><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-2">path:</span><span class="hl-1"> </span><span class="hl-4">"/sample2.pdf"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-4">"Sample 2"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">previewContent:</span><span class="hl-1"> </span><span class="hl-4">`<div class="card" style="position: relative;"></span><br/><span class="hl-4"> <h2 class="header" style="line-height: 30px;height: 30px;display: block;text-align: center;"></span><br/><span class="hl-4"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 17 24" style="position: absolute;top: 3px;left: 0px;"><path class="gc-icon-color--text" d="M15.429 3.429h-13.714v16.634l6.857-6.576 1.192 1.138 5.665 5.438v-16.634zM15.589 1.714c0.201 0 0.402 0.040 0.589 0.121 0.589 0.228 0.964 0.777 0.964 1.379v17.263c0 0.603-0.375 1.152-0.964 1.379-0.188 0.080-0.388 0.107-0.589 0.107-0.415 0-0.804-0.147-1.112-0.429l-5.906-5.679-5.906 5.679c-0.308 0.281-0.696 0.442-1.112 0.442-0.201 0-0.402-0.040-0.589-0.121-0.589-0.228-0.964-0.777-0.964-1.379v-17.263c0-0.603 0.375-1.152 0.964-1.379 0.188-0.080 0.388-0.121 0.589-0.121h14.036z"></path></svg><span style="padding-left: 10px;width: 100%;text-align: center;">Sample 2</span></span><br/><span class="hl-4"> </h2></span><br/><span class="hl-4"> <div class="container"></span><br/><span class="hl-4"> <p>Long sample 2 description goes here.</p><div style="width: 100%;text-align: center;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" style="</span><br/><span class="hl-4"> border: 1px dashed #cccccc; padding: 10px; width: 100px; height: 100px; display: inline-block; fill: #999999;"></span><br/><span class="hl-4"> <title>eye</title></span><br/><span class="hl-4"> <path d="M25 9.375c-10.904 0-20.356 6.35-25 15.625 4.644 9.275 14.096 15.625 25 15.625s20.355-6.35 25-15.625c-4.644-9.275-14.096-15.625-25-15.625zM37.327 17.661c2.938 1.874 5.427 4.383 7.297 7.339-1.87 2.955-4.359 5.465-7.297 7.339-3.691 2.354-7.954 3.599-12.327 3.599s-8.636-1.244-12.327-3.599c-2.937-1.874-5.427-4.383-7.296-7.339 1.87-2.955 4.359-5.465 7.297-7.339 0.191-0.122 0.385-0.24 0.579-0.356-0.486 1.334-0.752 2.775-0.752 4.277 0 6.903 5.596 12.5 12.5 12.5s12.5-5.597 12.5-12.5c0-1.503-0.266-2.943-0.752-4.277 0.194 0.116 0.388 0.234 0.579 0.357v0zM25 20.313c0 2.589-2.099 4.688-4.688 4.688s-4.688-2.099-4.688-4.688 2.099-4.688 4.688-4.688 4.688 2.099 4.688 4.688z"></path></span><br/><span class="hl-4"> </svg></span><br/><span class="hl-4"> <p></p></div></span><br/><span class="hl-4"> </div></span><br/><span class="hl-4"> </div>`</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-2">path:</span><span class="hl-1"> </span><span class="hl-4">"/sample3.pdf"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-4">"Open sample3.pdf"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-4">"Sample 3 without custom preview content"</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> ];</span><br/><br/><span class="hl-1"> </span><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, </span><span class="hl-2">options</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">addDefaultPanels</span><span class="hl-1">(); </span><br/><span class="hl-1"> </span><span class="hl-0">const</span><span class="hl-1"> </span><span class="hl-6">documentListPanelHandle</span><span class="hl-1"> = </span><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">addDocumentListPanel</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">onAfterOpen</span><span class="hl-1">.</span><span class="hl-3">register</span><span class="hl-1">(</span><span class="hl-0">function</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">leftSidebar</span><span class="hl-1">.</span><span class="hl-2">menu</span><span class="hl-1">.</span><span class="hl-2">panels</span><span class="hl-1">.</span><span class="hl-3">open</span><span class="hl-1">(</span><span class="hl-2">documentListPanelHandle</span><span class="hl-1">.</span><span class="hl-2">id</span><span class="hl-1">);</span><br/><span class="hl-1"> });</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="editorDefaults" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>editor<wbr/>Defaults</span><a href="#editorDefaults" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">editor<wbr/>Defaults<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>checkBoxButton<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="ButtonWidget.html" class="tsd-signature-type" data-tsd-kind="Class">ButtonWidget</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>circleAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="CircleAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">CircleAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>combTextField<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="TextWidget.html" class="tsd-signature-type" data-tsd-kind="Class">TextWidget</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>comboChoice<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="ChoiceWidget.html" class="tsd-signature-type" data-tsd-kind="Class">ChoiceWidget</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>dotHandleSize<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>fileAttachmentAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="FileAttachmentAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">FileAttachmentAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>fontNames<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-symbol">{ </span>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">; </span>freeTextAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="FreeTextAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">FreeTextAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>hideFloatingBar<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>highlightAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="HighlightAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">HighlightAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>inkAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="InkAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">InkAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>lastValueKeys<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">; </span>lineAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="LineAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">LineAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>linkAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="LinkAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">LinkAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>listBoxChoice<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="ChoiceWidget.html" class="tsd-signature-type" data-tsd-kind="Class">ChoiceWidget</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>moveHandleSize<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>passwordField<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="TextWidget.html" class="tsd-signature-type" data-tsd-kind="Class">TextWidget</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>polyLineAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="PolyLineAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">PolyLineAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>polygonAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="PolygonAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">PolygonAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>popupAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="PopupAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">PopupAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>printResolution<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>pushButton<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="ButtonWidget.html" class="tsd-signature-type" data-tsd-kind="Class">ButtonWidget</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>radioButton<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="ButtonWidget.html" class="tsd-signature-type" data-tsd-kind="Class">ButtonWidget</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>redactAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="RedactAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">RedactAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>rememberLastValues<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>resetButton<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="ButtonWidget.html" class="tsd-signature-type" data-tsd-kind="Class">ButtonWidget</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>resizeHandleSize<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>richMediaAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">RichMediaAnnotation</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>signatureField<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="SignatureAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">SignatureAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>soundAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="SoundAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">SoundAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>squareAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="SquareAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">SquareAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>squigglyAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="SquigglyAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">SquigglyAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>stampAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="StampAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">StampAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>standardFontDataUrl<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>stickyNote<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-symbol">{ </span>color<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>contents<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol">; </span>strikeOutAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="StrikeOutAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">StrikeOutAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>submitButton<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="ButtonWidget.html" class="tsd-signature-type" data-tsd-kind="Class">ButtonWidget</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>textAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="TextAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">TextAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>textArea<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="TextWidget.html" class="tsd-signature-type" data-tsd-kind="Class">TextWidget</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>textField<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="TextWidget.html" class="tsd-signature-type" data-tsd-kind="Class">TextWidget</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">; </span>underlineAnnotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="UnderlineAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">UnderlineAnnotation</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol"> = ...</span></div>
<div class="tsd-comment tsd-typography"><p>Contains default values for a new annotations and fields.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Change the default sticky note and text annotation color to Red:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><br/><span class="hl-1"> </span><span class="hl-2">editorDefaults:</span><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-2">stickyNote:</span><span class="hl-1"> { </span><span class="hl-2">color:</span><span class="hl-1"> </span><span class="hl-4">"#ff0000"</span><span class="hl-1"> }, </span><br/><span class="hl-1"> </span><span class="hl-2">textAnnotation:</span><span class="hl-1"> {</span><span class="hl-2">color:</span><span class="hl-1"> </span><span class="hl-4">"#ff0000"</span><span class="hl-1"> } </span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">supportApi:</span><span class="hl-1"> </span><span class="hl-4">'api/pdf-viewer'</span><br/><span class="hl-1">});</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Change the default square annotation appearance:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">editorDefaults:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">squareAnnotation:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">annotationType:</span><span class="hl-1"> </span><span class="hl-8">5</span><span class="hl-1">, </span><span class="hl-5">// AnnotationTypeCode.SQUARE</span><br/><span class="hl-1"> </span><span class="hl-2">subtype:</span><span class="hl-1"> </span><span class="hl-4">"Square"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">borderStyle:</span><span class="hl-1"> { </span><span class="hl-2">width:</span><span class="hl-1"> </span><span class="hl-8">5</span><span class="hl-1">, </span><span class="hl-2">style:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">horizontalCornerRadius:</span><span class="hl-1"> </span><span class="hl-8">0</span><span class="hl-1">, </span><span class="hl-2">verticalCornerRadius:</span><span class="hl-1"> </span><span class="hl-8">0</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">color:</span><span class="hl-1"> [</span><span class="hl-8">0</span><span class="hl-1">, </span><span class="hl-8">0</span><span class="hl-1">, </span><span class="hl-8">0</span><span class="hl-1">],</span><br/><span class="hl-1"> </span><span class="hl-2">interiorColor:</span><span class="hl-1"> [</span><span class="hl-8">255</span><span class="hl-1">, </span><span class="hl-8">0</span><span class="hl-1">, </span><span class="hl-8">0</span><span class="hl-1">],</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">supportApi:</span><span class="hl-1"> </span><span class="hl-4">'api/pdf-viewer'</span><br/><span class="hl-1">});</span>
</code></pre>
</div>
<div class="tsd-type-declaration">
<h4>Type declaration</h4>
<ul class="tsd-parameters">
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> check<wbr/>Box<wbr/>Button<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="ButtonWidget.html" class="tsd-signature-type" data-tsd-kind="Class">ButtonWidget</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for CheckBox button widget.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> circle<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="CircleAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">CircleAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Circle annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> comb<wbr/>Text<wbr/>Field<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="TextWidget.html" class="tsd-signature-type" data-tsd-kind="Class">TextWidget</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Comb Text field widget.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> combo<wbr/>Choice<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="ChoiceWidget.html" class="tsd-signature-type" data-tsd-kind="Class">ChoiceWidget</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Combo choice widget.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> dot<wbr/>Handle<wbr/>Size<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography"><p>Dot handle size in pixels. Used for callout points.</p>
<h3>Default</h3><p>8</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">editorDefaults:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">dotHandleSize:</span><span class="hl-1"> </span><span class="hl-8">20</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">supportApi:</span><span class="hl-1"> { </span><span class="hl-2">apiUrl:</span><span class="hl-1"> </span><span class="hl-4">'support-api/gc-pdf-viewer'</span><span class="hl-1">, </span><span class="hl-2">webSocketUrl:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
</code></pre>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> file<wbr/>Attachment<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="FileAttachmentAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">FileAttachmentAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for FileAttachment annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> font<wbr/>Names<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-symbol">{ </span>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol">[]</span></h5>
<div class="tsd-comment tsd-typography"><p>Array of the available font names.</p>
<h3>Default</h3><p>[
{ value: 'Helv', name: 'Helvetica' }, { value: 'HelveticaRegular', name: 'Helvetica-Oblique' }, { value: 'HelveticaBold', name: 'Helvetica-Bold' }, { value: 'HelveticaBoldItalic', name: 'Helvetica-BoldOblique' },
{ value: 'TimesRegular', name: 'Times-Roman' }, { value: 'TimesItalic', name: 'Times-Italic' }, { value: 'TimesBold', name: 'Times-Bold' }, { value: 'TimesBoldItalic', name: 'Times-BoldItalic' },
{ value: 'CourierRegular', name: 'Courier' }, { value: 'CourierItalic', name: 'Courier-Oblique' }, { value: 'CourierBold', name: 'Courier-Bold' }, { value: 'CourierBoldItalic', name: 'Courier-BoldOblique' },
{ value: 'Symbol', name: 'Symbol' }
]</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">editorDefaults:</span><span class="hl-1"> { </span><span class="hl-2">fontNames:</span><span class="hl-1"> [{</span><span class="hl-2">value:</span><span class="hl-1"> </span><span class="hl-4">'Arial'</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-4">'Arial'</span><span class="hl-1">}, {</span><span class="hl-2">value:</span><span class="hl-1"> </span><span class="hl-4">'Verdana'</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-4">'Verdana'</span><span class="hl-1">}] },</span><br/><span class="hl-1"> </span><span class="hl-2">supportApi:</span><span class="hl-1"> { </span><span class="hl-2">apiUrl:</span><span class="hl-1"> </span><span class="hl-4">'support-api/gc-pdf-viewer'</span><span class="hl-1">, </span><span class="hl-2">webSocketUrl:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
</code></pre>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> free<wbr/>Text<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="FreeTextAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">FreeTextAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for FreeText annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> hide<wbr/>Floating<wbr/>Bar<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography"><p>Set this setting to true if you do not want to display an additional floating bar for editor mode.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">editorDefaults:</span><span class="hl-1"> { </span><span class="hl-2">hideFloatingBar:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">supportApi:</span><span class="hl-1"> { </span><span class="hl-2">apiUrl:</span><span class="hl-1"> </span><span class="hl-4">'support-api/gc-pdf-viewer'</span><span class="hl-1">, </span><span class="hl-2">webSocketUrl:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
</code></pre>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> highlight<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="HighlightAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">HighlightAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Highlight annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> ink<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="InkAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">InkAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Ink annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> last<wbr/>Value<wbr/>Keys<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></h5>
<div class="tsd-comment tsd-typography"><p>Last values keys.</p>
<h3>Default</h3><p>["appearanceColor", "borderStyle", "color", "interiorColor", "backgroundColor", "borderColor", "opacity", "textAlignment", "printableFlag", "open",
"lineStart", "lineEnd", "markBorderColor", "markFillColor", "overlayFillColor", "overlayText", "overlayTextJustification", "newWindow", "calloutLineEnd", "fontSize",
"fontName", "name", "readOnly", "required", "hasEditFlag"]</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Remember only the borderStyle property:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">editorDefaults:</span><span class="hl-1"> { </span><span class="hl-2">rememberLastValues:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1">, </span><span class="hl-2">lastValueKeys:</span><span class="hl-1"> [</span><span class="hl-4">"borderStyle"</span><span class="hl-1">] } });</span>
</code></pre>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> line<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="LineAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">LineAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Line annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> link<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="LinkAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">LinkAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Link annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> list<wbr/>Box<wbr/>Choice<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="ChoiceWidget.html" class="tsd-signature-type" data-tsd-kind="Class">ChoiceWidget</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for ListBox choice widget.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> move<wbr/>Handle<wbr/>Size<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography"><p>Move handle size in pixels.</p>
<h3>Default</h3><p>14</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">editorDefaults:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">moveHandleSize:</span><span class="hl-1"> </span><span class="hl-8">40</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">supportApi:</span><span class="hl-1"> { </span><span class="hl-2">apiUrl:</span><span class="hl-1"> </span><span class="hl-4">'support-api/gc-pdf-viewer'</span><span class="hl-1">, </span><span class="hl-2">webSocketUrl:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
</code></pre>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> password<wbr/>Field<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="TextWidget.html" class="tsd-signature-type" data-tsd-kind="Class">TextWidget</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Password field widget.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> poly<wbr/>Line<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="PolyLineAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">PolyLineAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for PolyLine annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> polygon<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="PolygonAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">PolygonAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Polygon annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> popup<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="PopupAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">PopupAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Popup annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> print<wbr/>Resolution<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography"><p>The 'printResolution' option allows you to specify the resolution (in dots per inch - DPI) for printing purposes.
When rendering and preparing PDF documents for printing, this option determines the quality and detail of the
generated images used in the printing process. A higher DPI value generally results in crisper and more detailed
printed output but may also lead to larger memory usage.</p>
<h3>Default</h3><p>If not specified, the default value is 150 DPI.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Example: Set the print resolution to 300 DPI</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">printResolution:</span><span class="hl-1"> </span><span class="hl-8">300</span><br/><span class="hl-1">});</span>
</code></pre>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> push<wbr/>Button<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="ButtonWidget.html" class="tsd-signature-type" data-tsd-kind="Class">ButtonWidget</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Push button widget.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> radio<wbr/>Button<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="ButtonWidget.html" class="tsd-signature-type" data-tsd-kind="Class">ButtonWidget</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Radio button widget.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> redact<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="RedactAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">RedactAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Redact annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> remember<wbr/>Last<wbr/>Values<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography"><p>When the rememberLastValues setting is set to true (or undefined), the last used property values will be used as default values for new annotations.</p>
<h3>Default</h3><p>undefined</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Do not use the last used property values as defaults:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">editorDefaults:</span><span class="hl-1"> { </span><span class="hl-2">rememberLastValues:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> } });</span>
</code></pre>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> reset<wbr/>Button<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="ButtonWidget.html" class="tsd-signature-type" data-tsd-kind="Class">ButtonWidget</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Reset button widget.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> resize<wbr/>Handle<wbr/>Size<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography"><p>Resize handle size in pixels.</p>
<h3>Default</h3><p>8</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">editorDefaults:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">resizeHandleSize:</span><span class="hl-1"> </span><span class="hl-8">20</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">moveHandleSize:</span><span class="hl-1"> </span><span class="hl-8">40</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">supportApi:</span><span class="hl-1"> { </span><span class="hl-2">apiUrl:</span><span class="hl-1"> </span><span class="hl-4">'support-api/gc-pdf-viewer'</span><span class="hl-1">, </span><span class="hl-2">webSocketUrl:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
</code></pre>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> rich<wbr/>Media<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">RichMediaAnnotation</span><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Rich Media annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> signature<wbr/>Field<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="SignatureAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">SignatureAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Signature field widget.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> sound<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="SoundAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">SoundAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Sound annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> square<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="SquareAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">SquareAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Square annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> squiggly<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="SquigglyAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">SquigglyAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Squiggly annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> stamp<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="StampAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">StampAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Stamp annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> standard<wbr/>Font<wbr/>Data<wbr/>Url<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography"><p>The URL where the standard font files are located. Include the trailing slash.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-1"> </span><span class="hl-5">// Example with relative URL:</span><br/><span class="hl-1"> </span><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">standardFontDataUrl:</span><span class="hl-1"> </span><span class="hl-4">"resources/standard_fonts/"</span><span class="hl-1"> });</span><br/><br/><span class="hl-1"> </span><span class="hl-5">// Example with absolute URL:</span><br/><span class="hl-1"> </span><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">standardFontDataUrl:</span><span class="hl-1"> </span><span class="hl-4">"http://localhost:8080/resources/standard_fonts/"</span><span class="hl-1"> });</span>
</code></pre>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> sticky<wbr/>Note<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-symbol">{ </span>color<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>contents<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Sticky note.</p>
</div>
<ul class="tsd-parameters">
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> color<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span></h5></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> contents<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span></h5></li></ul></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> strike<wbr/>Out<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="StrikeOutAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">StrikeOutAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for StrikeOut annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> submit<wbr/>Button<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="ButtonWidget.html" class="tsd-signature-type" data-tsd-kind="Class">ButtonWidget</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Submit button widget.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> text<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="TextAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">TextAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Text annotation.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> text<wbr/>Area<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="TextWidget.html" class="tsd-signature-type" data-tsd-kind="Class">TextWidget</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for TextArea widget.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> text<wbr/>Field<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="TextWidget.html" class="tsd-signature-type" data-tsd-kind="Class">TextWidget</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Text field widget.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> underline<wbr/>Annotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="UnderlineAnnotation.html" class="tsd-signature-type" data-tsd-kind="Class">UnderlineAnnotation</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography"><p>Default properties for Underline annotation.</p>
</div></li></ul></div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="enableXfa" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>enable<wbr/>Xfa</span><a href="#enableXfa" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">enable<wbr/>Xfa<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = true</span></div>
<div class="tsd-comment tsd-typography"><p>Render dynamic Xfa forms if any.</p>
<h3>Default</h3><p>The default value is true.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Turn off XFA forms rendering.</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-2">selector</span><span class="hl-1">, { </span><span class="hl-2">enableXfa:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> });</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="externalLinkTarget" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>external<wbr/>Link<wbr/>Target</span><a href="#externalLinkTarget" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">external<wbr/>Link<wbr/>Target<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">"none"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"blank"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"self"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"parent"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"top"</span></div>
<div class="tsd-comment tsd-typography"><p>The externalLinkTarget option sets the value of the target attribute of a link annotation.
The externalLinkTarget option specifies where to open the linked document.
Possible values are: 'blank', 'self', 'parent', 'top', 'none'.</p>
<h3>Default</h3><p>'none'</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">externalLinkTarget:</span><span class="hl-1"> </span><span class="hl-4">"blank"</span><span class="hl-1"> } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="fieldsAppearance" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>fields<wbr/>Appearance</span><a href="#fieldsAppearance" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">fields<wbr/>Appearance<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>checkBoxButton<span class="tsd-signature-symbol">?: </span><a href="../types/FieldAppearanceRenderingType.html" class="tsd-signature-type" data-tsd-kind="Type alias">FieldAppearanceRenderingType</a><span class="tsd-signature-symbol">; </span>pushButton<span class="tsd-signature-symbol">?: </span><a href="../types/FieldAppearanceRenderingType.html" class="tsd-signature-type" data-tsd-kind="Type alias">FieldAppearanceRenderingType</a><span class="tsd-signature-symbol">; </span>radioButton<span class="tsd-signature-symbol">?: </span><a href="../types/FieldAppearanceRenderingType.html" class="tsd-signature-type" data-tsd-kind="Type alias">FieldAppearanceRenderingType</a><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol"> = ...</span></div>
<div class="tsd-comment tsd-typography"><p>Form fields appearance rendering settings.
Use this option to customize a specific rendering type for the appearance of form fields.
Available appearance rendering types:</p>
<ul>
<li>"Custom" - Default. The custom appearance has some improvements over the web appearance,
for example you can specify background / border colors.</li>
<li>"Web" - Standard form field appearance using platform-native styling. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance">https://developer.mozilla.org/en-US/docs/Web/CSS/appearance</a> for details.</li>
<li>"Predefined" - Predefined appearance stream from PDF when available, if appearance stream is not available, custom appearance will be used.</li>
</ul>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Use standard form field appearance using platform-native styling for radio and checkbox buttons.</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">fieldsAppearance:</span><span class="hl-1"> { </span><span class="hl-2">radioButton:</span><span class="hl-1"> </span><span class="hl-4">"Web"</span><span class="hl-1">, </span><span class="hl-2">checkBoxButton:</span><span class="hl-1"> </span><span class="hl-4">"Web"</span><span class="hl-1"> } });</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Use predefined appearance stream from PDF when available:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">fieldsAppearance:</span><span class="hl-1"> { </span><span class="hl-2">radioButton:</span><span class="hl-1"> </span><span class="hl-4">"Predefined"</span><span class="hl-1">, </span><span class="hl-2">checkBoxButton:</span><span class="hl-1"> </span><span class="hl-4">"Predefined"</span><span class="hl-1"> } });</span>
</code></pre>
</div>
<div class="tsd-type-declaration">
<h4>Type declaration</h4>
<ul class="tsd-parameters">
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> check<wbr/>Box<wbr/>Button<span class="tsd-signature-symbol">?: </span><a href="../types/FieldAppearanceRenderingType.html" class="tsd-signature-type" data-tsd-kind="Type alias">FieldAppearanceRenderingType</a></h5>
<div class="tsd-comment tsd-typography"><p>Check-box button appearance rendering type.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> push<wbr/>Button<span class="tsd-signature-symbol">?: </span><a href="../types/FieldAppearanceRenderingType.html" class="tsd-signature-type" data-tsd-kind="Type alias">FieldAppearanceRenderingType</a></h5>
<div class="tsd-comment tsd-typography"><p>Push button appearance rendering type.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> radio<wbr/>Button<span class="tsd-signature-symbol">?: </span><a href="../types/FieldAppearanceRenderingType.html" class="tsd-signature-type" data-tsd-kind="Type alias">FieldAppearanceRenderingType</a></h5>
<div class="tsd-comment tsd-typography"><p>Radio button appearance rendering type.</p>
</div></li></ul></div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="file" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>file</span><a href="#file" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">file<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> = ""</span></div>
<div class="tsd-comment tsd-typography"><p>Specifies the PDF file name, URL, or binary data to be loaded in the Viewer.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">file:</span><span class="hl-1"> </span><span class="hl-4">'GcPdf.pdf'</span><span class="hl-1"> } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="formFiller" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>form<wbr/>Filler</span><a href="#formFiller" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">form<wbr/>Filler<span class="tsd-signature-symbol">?:</span> <a href="../types/FormFillerSettings.html" class="tsd-signature-type" data-tsd-kind="Type alias">FormFillerSettings</a></div>
<div class="tsd-comment tsd-typography"><p>Form filler dialog settings.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">formFiller</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-2">mapping:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">'UserNameField1'</span><span class="hl-2">:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-4">'User Name'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">displayname:</span><span class="hl-1"> </span><span class="hl-4">'username'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">placeholder:</span><span class="hl-1"> </span><span class="hl-4">'Enter here...'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">validateoninput:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">validator</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-0">function</span><span class="hl-1">(</span><span class="hl-2">fieldValue</span><span class="hl-1">, </span><span class="hl-2">field</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-7">if</span><span class="hl-1">(</span><span class="hl-2">fieldValue</span><span class="hl-1">.</span><span class="hl-2">length</span><span class="hl-1"> >= </span><span class="hl-8">3</span><span class="hl-1">)</span><br/><span class="hl-1"> </span><span class="hl-7">return</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">else</span><br/><span class="hl-1"> </span><span class="hl-7">return</span><span class="hl-1"> </span><span class="hl-4">'username must be at least 3 characters'</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-4">'fld2'</span><span class="hl-2">:</span><span class="hl-1"> { </span><span class="hl-2">hidden:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-4">'Country Combo Box'</span><span class="hl-2">:</span><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-2">displayname:</span><span class="hl-1"> </span><span class="hl-4">'Country'</span><span class="hl-1">, </span><br/><span class="hl-1"> </span><span class="hl-2">required:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1"> </span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-4">'fld3'</span><span class="hl-2">:</span><span class="hl-1"> { </span><span class="hl-2">displayName:</span><span class="hl-1"> </span><span class="hl-4">'First name!'</span><span class="hl-1">, </span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-4">'Please enter your first name.'</span><span class="hl-1">, </span><br/><span class="hl-1"> </span><span class="hl-2">rowCustomCSS:</span><span class="hl-1"> </span><span class="hl-4">'given-name-row'</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">};</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">'#root'</span><span class="hl-1">, { </span><span class="hl-2">formFiller:</span><span class="hl-1"> </span><span class="hl-2">formFiller</span><span class="hl-1"> });</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">addDefaultPanels</span><span class="hl-1">();</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-2">selector</span><span class="hl-1">, { </span><br/><span class="hl-1"> </span><span class="hl-2">renderInteractiveForms:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1">, </span><br/><span class="hl-1"> </span><span class="hl-2">formFiller:</span><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-3">validator</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-0">function</span><span class="hl-1">(</span><span class="hl-2">val</span><span class="hl-1">) {</span><span class="hl-7">return</span><span class="hl-1"> (</span><span class="hl-2">val</span><span class="hl-1"> ? </span><span class="hl-0">null</span><span class="hl-1"> : </span><span class="hl-4">'The field cannot be empty'</span><span class="hl-1">); } </span><br/><span class="hl-1"> } </span><br/><span class="hl-1">});</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="friendlyFileName" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>friendly<wbr/>File<wbr/>Name</span><a href="#friendlyFileName" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">friendly<wbr/>File<wbr/>Name<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = ""</span></div>
<div class="tsd-comment tsd-typography"><p>Used when file name not available.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">friendlyFileName</span><span class="hl-1"> = </span><span class="hl-4">"myFileName.pdf"</span><span class="hl-1">;</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">applyOptions</span><span class="hl-1">();</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="hideAnnotationPopups" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>hide<wbr/>Annotation<wbr/>Popups</span><a href="#hideAnnotationPopups" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">hide<wbr/>Annotation<wbr/>Popups<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"None"</span><span class="tsd-signature-symbol"> | </span><a href="../types/AnnotationTypeName.html" class="tsd-signature-type" data-tsd-kind="Type alias">AnnotationTypeName</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"All"</span></div>
<div class="tsd-comment tsd-typography"><p>Use this option if you want to hide annotation popups.
Possible values are:
['Text', 'Link', 'Line', 'Square', 'Circle', 'Polygon', 'PolyLine',<br> 'Ink', 'Popup', 'FileAttachment', 'Sound', 'Redact', 'Stamp'] or true or 'All' (true and 'All' have the same behavior).</p>
<h3>Default</h3><p>undefined</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Example: hide popups for all annotations:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">hideAnnotationPopups:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1"> });</span><br/><span class="hl-5">// Example: hide popups for Redact, Circle and Square annotations:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">hideAnnotationPopups:</span><span class="hl-1"> [</span><span class="hl-4">"Redact"</span><span class="hl-1">, </span><span class="hl-4">"Circle"</span><span class="hl-1">, </span><span class="hl-4">"Square"</span><span class="hl-1">] });</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="hideAnnotationTypes" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>hide<wbr/>Annotation<wbr/>Types</span><a href="#hideAnnotationTypes" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">hide<wbr/>Annotation<wbr/>Types<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"None"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"All"</span><span class="tsd-signature-symbol"> | </span><a href="../types/AnnotationTypeName.html" class="tsd-signature-type" data-tsd-kind="Type alias">AnnotationTypeName</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> = ...</span></div>
<div class="tsd-comment tsd-typography"><p>Specifies annotation types which will be hidden when 'hide-annotations' button is checked.
Possible values are: ['Text', 'Link', 'FreeText', 'Line', 'Square', 'Circle', 'Polygon',
'PolyLine', 'Ink', 'Popup', 'FileAttachment', 'Sound', 'ThreadBead', 'RadioButton', 'Checkbox',
'PushButton', 'Choice', 'TextWidget', 'Redact', 'Stamp', 'Highlight', 'Underline', 'Squiggly', 'StrikeOut'] or true or 'All' (true and 'All' have the same behavior).</p>
<h3>Default</h3><p>['Text', 'FreeText', 'Line', 'Square', 'Circle', 'Polygon', 'PolyLine', 'Ink', 'Popup', 'Sound', 'Polygon', 'RadioButton', 'Checkbox', 'PushButton', 'Choice', 'TextWidget', 'Redact', 'Stamp', 'Highlight', 'Underline', 'Squiggly', 'StrikeOut'];</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Hide all possible annotations.</span><br/><span class="hl-0">let</span><span class="hl-1"> </span><span class="hl-2">options</span><span class="hl-1"> = { </span><span class="hl-2">hideAnnotationTypes:</span><span class="hl-1"> </span><span class="hl-4">'All'</span><span class="hl-1"> };</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Hide Push button and Redact annotations only.</span><br/><span class="hl-0">let</span><span class="hl-1"> </span><span class="hl-2">options</span><span class="hl-1"> = { </span><span class="hl-2">hideAnnotationTypes:</span><span class="hl-1"> [</span><span class="hl-4">'PushButton'</span><span class="hl-1">, </span><span class="hl-4">'Redact'</span><span class="hl-1">] };</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="ignoreInitialView" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>ignore<wbr/>Initial<wbr/>View</span><a href="#ignoreInitialView" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">ignore<wbr/>Initial<wbr/>View<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></div>
<div class="tsd-comment tsd-typography"><p>Set this option to true if you wish to disable initial view settings specified in a PDF document.</p>
<h3>Default</h3><p>false</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">ignoreInitialView:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1"> } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="jsExecutionConfig" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>js<wbr/>Execution<wbr/>Config</span><a href="#jsExecutionConfig" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">js<wbr/>Execution<wbr/>Config<span class="tsd-signature-symbol">?:</span> <a href="../types/JsExecutionConfig.html" class="tsd-signature-type" data-tsd-kind="Type alias">JsExecutionConfig</a></div>
<div class="tsd-comment tsd-typography"><p>Optional JS actions execution configuration.</p>
<h3>Example</h3><p>Execute long operation before JS execution and repaint visible pages after JS execution.</p>
<pre><code class="language-javascript"><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">jsExecutionConfig</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-3">before</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-0">function</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-5">// Returned promise will be awaited before further JS execution.</span><br/><span class="hl-1"> </span><span class="hl-7">return</span><span class="hl-1"> </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-9">Promise</span><span class="hl-1">(</span><span class="hl-0">function</span><span class="hl-1">(</span><span class="hl-2">resolve</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-3">setTimeout</span><span class="hl-1">(</span><span class="hl-2">resolve</span><span class="hl-1">, </span><span class="hl-8">1000</span><span class="hl-1">);</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-3">after</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-0">function</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">repaint</span><span class="hl-1">();</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span>
</code></pre>
<h3>Example</h3><p>Adjust jsCode before execution</p>
<pre><code class="language-javascript"><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">jsExecutionConfig</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-3">before</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-0">function</span><span class="hl-1">(</span><span class="hl-2">args</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-2">args</span><span class="hl-1">.</span><span class="hl-2">jsCode</span><span class="hl-1"> = </span><span class="hl-2">args</span><span class="hl-1">.</span><span class="hl-2">jsCode</span><span class="hl-1">.</span><span class="hl-3">replace</span><span class="hl-1">(</span><span class="hl-4">"app.alert"</span><span class="hl-1">, </span><span class="hl-4">"app.showMessage"</span><span class="hl-1">);</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">}</span>
</code></pre>
<h3>Example</h3><p>Cancel JS execution</p>
<pre><code class="language-javascript"><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">jsExecutionConfig</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-3">before</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-0">function</span><span class="hl-1">(</span><span class="hl-2">args</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-2">args</span><span class="hl-1">.</span><span class="hl-2">cancel</span><span class="hl-1"> = </span><span class="hl-0">true</span><span class="hl-1">;</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">}</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="keepFileData" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>keep<wbr/>File<wbr/>Data</span><a href="#keepFileData" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">keep<wbr/>File<wbr/>Data<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></div>
<div class="tsd-comment tsd-typography"><p>Set this option to true if you want to use the fileData property even if the document cannot be parsed as a valid PDF document.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Below is an example of how to display invalid file data when an error occurs:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">'#root'</span><span class="hl-1">, { </span><span class="hl-2">keepFileData:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1"> });</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">onError</span><span class="hl-1">.</span><span class="hl-3">register</span><span class="hl-1">(</span><span class="hl-0">function</span><span class="hl-1">(</span><span class="hl-2">eventArgs</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">message</span><span class="hl-1"> = </span><span class="hl-2">eventArgs</span><span class="hl-1">.</span><span class="hl-2">message</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">if</span><span class="hl-1"> (</span><span class="hl-2">message</span><span class="hl-1">.</span><span class="hl-3">indexOf</span><span class="hl-1">(</span><span class="hl-4">"Invalid PDF structure"</span><span class="hl-1">) !== -</span><span class="hl-8">1</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-3">log</span><span class="hl-1">(</span><span class="hl-4">'Unable to load pdf document, pdf document is broken.'</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-3">log</span><span class="hl-1">(</span><span class="hl-4">"File data:"</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-5">// Output file data to console:</span><br/><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-3">log</span><span class="hl-1">(</span><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">fileData</span><span class="hl-1">);</span><br/><span class="hl-1"> } </span><span class="hl-7">else</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-3">log</span><span class="hl-1">(</span><span class="hl-4">'Unexpected error: '</span><span class="hl-1"> + </span><span class="hl-2">message</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">open</span><span class="hl-1">(</span><span class="hl-4">'sample.pdf'</span><span class="hl-1">);</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="language" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>language</span><a href="#language" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">language<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div>
<div class="tsd-comment tsd-typography"><p>User interface language.
Note, in order to use the language option,
you must specify the language option value during
the viewer initialization phase.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Set UI language to Japanese:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-2">selector</span><span class="hl-1">, { </span><span class="hl-2">language:</span><span class="hl-1"> </span><span class="hl-4">'ja'</span><span class="hl-1"> });</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">addDefaultPanels</span><span class="hl-1">();</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">function</span><span class="hl-1"> </span><span class="hl-3">loadPdfViewer</span><span class="hl-1">(</span><span class="hl-2">selector</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-5">// Define custom translations:</span><br/><span class="hl-1"> </span><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">myTranslations</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-4">"toolbar"</span><span class="hl-2">:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">"open-document"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">"Open MY document"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">"pan"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">"My Pan tool"</span><span class="hl-1">,</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> };</span><br/><span class="hl-1"> </span><span class="hl-5">// Initialize translations:</span><br/><span class="hl-1"> </span><span class="hl-2">DsPdfViewer</span><span class="hl-1">.</span><span class="hl-2">i18n</span><span class="hl-1">.</span><span class="hl-3">init</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">resources:</span><span class="hl-1"> { </span><span class="hl-2">myLang:</span><span class="hl-1"> { </span><span class="hl-2">translation:</span><span class="hl-1"> </span><span class="hl-2">myTranslations</span><span class="hl-1"> } }</span><br/><span class="hl-1"> }).</span><span class="hl-3">then</span><span class="hl-1">(</span><span class="hl-0">function</span><span class="hl-1">(</span><span class="hl-2">t</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-5">// Translations initialized and ready to go.</span><br/><span class="hl-1"> </span><span class="hl-5">// Now create PDF viewer:</span><br/><span class="hl-1"> </span><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-2">selector</span><span class="hl-1">, { </span><span class="hl-2">language:</span><span class="hl-1"> </span><span class="hl-4">'myLang'</span><span class="hl-1"> });</span><br/><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">addDefaultPanels</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-5">//viewer.open("sample.pdf");</span><br/><span class="hl-1"> });</span><br/><span class="hl-1">}</span><br/><span class="hl-3">loadPdfViewer</span><span class="hl-1">(</span><span class="hl-4">'#root'</span><span class="hl-1">);</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="lockOpenTimeout" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>lock<wbr/>Open<wbr/>Timeout</span><a href="#lockOpenTimeout" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">lock<wbr/>Open<wbr/>Timeout<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
<div class="tsd-comment tsd-typography"><p>Lock open timeout period in milliseconds.
The user will not be able to open another document using the "open" method during the period
specified by the lockOpenTimeout option or until the previous document is loaded.</p>
<h3>Default</h3><p>20000</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Change lock open timeout to 5 sec:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">lockOpenTimeout:</span><span class="hl-1"> </span><span class="hl-8">5000</span><span class="hl-1"> );</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">open</span><span class="hl-1">(</span><span class="hl-4">"doc1.pdf"</span><span class="hl-1">); </span><br/><span class="hl-5">// The next time the open method is called, the viewer will </span><br/><span class="hl-5">// wait a maximum of 5 seconds for the previous document to open.</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">open</span><span class="hl-1">(</span><span class="hl-4">"doc2.pdf"</span><span class="hl-1">);</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="logLevel" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>log<wbr/>Level</span><a href="#logLevel" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">log<wbr/>Level<span class="tsd-signature-symbol">?:</span> <a href="../types/LogLevel.html" class="tsd-signature-type" data-tsd-kind="Type alias">LogLevel</a></div>
<div class="tsd-comment tsd-typography"><p>The logging level used for persistent connections using signalr client.
Note that the ASP .NET version of the signalr client supports only 'Trace' log level.</p>
<h3>Example</h3><p>Turn on logging.</p>
<pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">'#root'</span><span class="hl-1">, { </span><span class="hl-2">logLevel:</span><span class="hl-1"> </span><span class="hl-4">'Trace'</span><span class="hl-1"> } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="maxCanvasPixels" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>max<wbr/>Canvas<wbr/>Pixels</span><a href="#maxCanvasPixels" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">max<wbr/>Canvas<wbr/>Pixels<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">number</span></div>
<div class="tsd-comment tsd-typography"><p>The maximum supported canvas size in total pixels, i.e. width * height.
When the canvas scaling exceeds the maxCanvasPixels option, the CSS scaling will be used instead of re-rendering page to the canvas.</p>
<h3>Default</h3><p>The default value for PC/Mac is 4096 * 4096 = 16777216 (16 mega-pixels).
The default value for iOS/Android is 2560 x 2048 = 5242880 (5 mega-pixels).</p>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="newDocumentFileName" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>new<wbr/>Document<wbr/>File<wbr/>Name</span><a href="#newDocumentFileName" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">new<wbr/>Document<wbr/>File<wbr/>Name<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = "new-document.pdf"</span></div>
<div class="tsd-comment tsd-typography"><p>Specifies the default file name to be used when creating a new document within the viewer.
This option is different from <code>friendlyFileName</code> as it specifically sets the name for newly created documents,
rather than naming an existing document.</p>
<h3>Default</h3><p>"new-document.pdf"</p>
<h3>Example</h3><pre><code class="language-ts"><span class="hl-5">// Initialize the viewer with a custom file name for new documents</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">newDocumentFileName:</span><span class="hl-1"> </span><span class="hl-4">"sample.pdf"</span><span class="hl-1"> });</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="onBeforeCloseContextMenu" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>on<wbr/>Before<wbr/>Close<wbr/>Context<wbr/>Menu</span><a href="#onBeforeCloseContextMenu" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">on<wbr/>Before<wbr/>Close<wbr/>Context<wbr/>Menu<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">Function</span></div>
<div class="tsd-comment tsd-typography"><p>This function will be called when context menu is about to be hidden.
Return false if you want to prevent close context menu action.</p>
<h3>Default</h3><p>undefined</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-3">onBeforeCloseContextMenu</span><span class="hl-1"> = </span><span class="hl-0">function</span><span class="hl-1">(</span><span class="hl-2">e</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-3">log</span><span class="hl-1">(</span><span class="hl-4">"The context menu will be closed soon."</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-7">return</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1">;</span><br/><span class="hl-1">};</span>
</code></pre>
<h3>Default</h3><p>undefined</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-3">onBeforeCloseContextMenu</span><span class="hl-1"> = </span><span class="hl-0">function</span><span class="hl-1">(</span><span class="hl-2">e</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-7">if</span><span class="hl-1">(!</span><span class="hl-3">confirm</span><span class="hl-1">(</span><span class="hl-4">"Do you want to close context menu?"</span><span class="hl-1">)) {</span><br/><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-3">log</span><span class="hl-1">(</span><span class="hl-4">"The context menu will not be closed."</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-7">return</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-3">log</span><span class="hl-1">(</span><span class="hl-4">"The context menu will be closed."</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-7">return</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1">;</span><br/><span class="hl-1">};</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="onBeforeOpenContextMenu" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>on<wbr/>Before<wbr/>Open<wbr/>Context<wbr/>Menu</span><a href="#onBeforeOpenContextMenu" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">on<wbr/>Before<wbr/>Open<wbr/>Context<wbr/>Menu<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">Function</span></div>
<div class="tsd-comment tsd-typography"><p>This function will be called when context menu is about to be shown.
You can use this function to customize context menu.
Return false if you want to prevent open context menu action.</p>
<h3>Default</h3><p>undefined</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-1"> </span><span class="hl-5">// This code shows how to modify the context menu and </span><br/><span class="hl-1"> </span><span class="hl-5">// add search using Google and Bing search engines:</span><br/><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-3">onBeforeOpenContextMenu</span><span class="hl-1"> = </span><span class="hl-0">function</span><span class="hl-1"> (</span><span class="hl-2">items</span><span class="hl-1">, </span><span class="hl-2">mousePosition</span><span class="hl-1">, </span><span class="hl-2">viewer</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">selectedText</span><span class="hl-1"> = </span><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">getSelectedText</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-7">if</span><span class="hl-1"> (</span><span class="hl-2">selectedText</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-5">// Remove existent items:</span><br/><span class="hl-1"> </span><span class="hl-2">items</span><span class="hl-1">.</span><span class="hl-3">splice</span><span class="hl-1">(</span><span class="hl-8">0</span><span class="hl-1">, </span><span class="hl-2">items</span><span class="hl-1">.</span><span class="hl-2">length</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-5">// Add own menu items:</span><br/><span class="hl-1"> </span><span class="hl-2">items</span><span class="hl-1">.</span><span class="hl-3">push</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-4">'button'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">text:</span><span class="hl-1"> </span><span class="hl-4">'Search using Google'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">onClick</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-0">function</span><span class="hl-1"> () {</span><br/><span class="hl-1"> </span><span class="hl-2">window</span><span class="hl-1">.</span><span class="hl-3">open</span><span class="hl-1">(</span><span class="hl-4">'http://www.google.com/search?q='</span><span class="hl-1"> + </span><span class="hl-3">encodeURI</span><span class="hl-1">(</span><span class="hl-2">selectedText</span><span class="hl-1">), </span><span class="hl-4">'_blank'</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> </span><span class="hl-2">items</span><span class="hl-1">.</span><span class="hl-3">push</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-4">'button'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">text:</span><span class="hl-1"> </span><span class="hl-4">'Search using Bing'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">onClick</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-0">function</span><span class="hl-1"> () {</span><br/><span class="hl-1"> </span><span class="hl-2">window</span><span class="hl-1">.</span><span class="hl-3">open</span><span class="hl-1">(</span><span class="hl-4">'https://www.bing.com/search?q='</span><span class="hl-1"> + </span><span class="hl-3">encodeURI</span><span class="hl-1">(</span><span class="hl-2">selectedText</span><span class="hl-1">), </span><span class="hl-4">'_blank'</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> </span><span class="hl-7">return</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1">;</span><br/><span class="hl-1"> };</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="onInitialized" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>on<wbr/>Initialized</span><a href="#onInitialized" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">on<wbr/>Initialized<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>viewer<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span></div>
<div class="tsd-type-declaration">
<h4>Type declaration</h4>
<ul class="tsd-parameters">
<li class="tsd-parameter-signature">
<ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-class">
<li class="tsd-signature" id="__type-5.__type-6"><span class="tsd-signature-symbol">(</span>viewer<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
<li class="tsd-description">
<div class="tsd-comment tsd-typography"><p>The onInitialized handler will be called immediately after the viewer is instantiated.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><br/><span class="hl-1"> </span><span class="hl-3">onInitialized</span><span class="hl-2">:</span><span class="hl-1"> (</span><span class="hl-2">viewer</span><span class="hl-1">)</span><span class="hl-0">=></span><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-5">// put viewer initialization code here. </span><br/><span class="hl-1"> } </span><br/><span class="hl-1">});</span>
</code></pre>
</div>
<div class="tsd-parameters">
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameter-list">
<li>
<h5>viewer: <span class="tsd-signature-type">any</span></h5></li></ul></div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="openParameters" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>open<wbr/>Parameters</span><a href="#openParameters" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">open<wbr/>Parameters<span class="tsd-signature-symbol">?:</span> <a href="../types/OpenParameters.html" class="tsd-signature-type" data-tsd-kind="Type alias">OpenParameters</a></div>
<div class="tsd-comment tsd-typography"><p>Parameters object used by the "open" method.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Include Basic Authentication headers:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">'#root'</span><span class="hl-1">, { </span><br/><span class="hl-1"> </span><span class="hl-2">openParameters:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">headers:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">"Authorization"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">"Basic "</span><span class="hl-1"> + </span><span class="hl-3">btoa</span><span class="hl-1">(</span><span class="hl-3">unescape</span><span class="hl-1">(</span><span class="hl-3">encodeURIComponent</span><span class="hl-1">(</span><span class="hl-4">"USERNAME:PASSWORD"</span><span class="hl-1">))),</span><br/><span class="hl-1"> </span><span class="hl-4">"CustomHeader"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">"Custom header value"</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="pageDisplay" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>page<wbr/>Display</span><a href="#pageDisplay" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">page<wbr/>Display<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">PageDisplayType</span></div>
<div class="tsd-comment tsd-typography"><p>Page display type.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Example: Switch the page display mode to "TwoPage".</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><br/><span class="hl-1"> </span><span class="hl-2">pageDisplay:</span><span class="hl-1"> </span><span class="hl-4">"TwoPage"</span><br/><span class="hl-1">});</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="password" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>password</span><a href="#password" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">password<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = ""</span></div>
<div class="tsd-comment tsd-typography"><p>A predefined password for protected pdf documents.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">password</span><span class="hl-1"> = </span><span class="hl-4">"abc123"</span><span class="hl-1">;</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">open</span><span class="hl-1">(</span><span class="hl-4">"protected.pdf"</span><span class="hl-1">);</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="renderInteractiveForms" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>render<wbr/>Interactive<wbr/>Forms</span><a href="#renderInteractiveForms" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">render<wbr/>Interactive<wbr/>Forms<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = true</span></div>
<div class="tsd-comment tsd-typography"><p>Render interactive form elements.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Do not render interactive form:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">renderInteractiveForms:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="renderer" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>renderer</span><a href="#renderer" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">renderer<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">"canvas"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"svg"</span><span class="tsd-signature-symbol"> = 'canvas'</span></div>
<div class="tsd-comment tsd-typography"><p>PDF document renderer type - canvas or svg.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">renderer:</span><span class="hl-1"> </span><span class="hl-4">"svg"</span><span class="hl-1"> } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="replyTool" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>reply<wbr/>Tool</span><a href="#replyTool" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">reply<wbr/>Tool<span class="tsd-signature-symbol">?:</span> <a href="../types/ReplyToolSettings.html" class="tsd-signature-type" data-tsd-kind="Type alias">ReplyToolSettings</a></div>
<div class="tsd-comment tsd-typography"><p>The Reply Tool settings.</p>
<h3>Default</h3><p>Default settings are:</p>
<ul>
<li>readOnly: false,</li>
<li>allowAddNote: true,</li>
<li>allowChangeUserName: true,</li>
<li>allowAddReply: true,</li>
<li>allowDelete: true,</li>
<li>allowStatus: true,</li>
<li>allowChangeOtherUser: true,</li>
<li>allowDeleteOtherUser: true,</li>
<li>allowStatusOtherUser: true,</li>
<li>allowAddReplyOtherUser: true</li>
</ul>
<pre><code class="language-javascript"><span class="hl-1"> </span><span class="hl-5">// Prevent changing or deleting another user's comments:</span><br/><span class="hl-1"> </span><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">'#root'</span><span class="hl-1">, { </span><span class="hl-2">replyTool:</span><span class="hl-1"> { </span><span class="hl-2">allowChangeOtherUser:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1">, </span><br/><span class="hl-1"> </span><span class="hl-2">allowDeleteOtherUser:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">userName:</span><span class="hl-1"> </span><span class="hl-4">'John'</span><span class="hl-1">, </span><span class="hl-2">supportApi:</span><span class="hl-1"> </span><span class="hl-4">'api/pdf-viewer'</span><span class="hl-1"> });</span><br/><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">addReplyTool</span><span class="hl-1">(</span><span class="hl-4">'expanded'</span><span class="hl-1">);</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Disallow change author name (allowChangeUserName is false)</span><br/><span class="hl-5">// and disallow add changes to comments of other users (allowChangeOtherUser is false):</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">'#root'</span><span class="hl-1">, { </span><span class="hl-2">replyTool:</span><span class="hl-1"> { </span><span class="hl-2">allowChangeOtherUser:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">allowChangeUserName:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> }, </span><br/><span class="hl-1"> </span><span class="hl-2">userName:</span><span class="hl-1"> </span><span class="hl-4">'John'</span><span class="hl-1">, </span><span class="hl-2">supportApi:</span><span class="hl-1"> </span><span class="hl-4">'api/pdf-viewer'</span><span class="hl-1"> });</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">addReplyTool</span><span class="hl-1">(</span><span class="hl-4">'expanded'</span><span class="hl-1">);</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Add read-only reply tool:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">'#root'</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">replyTool:</span><span class="hl-1"> { </span><span class="hl-2">readOnly:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">userName:</span><span class="hl-1"> </span><span class="hl-4">'John'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">supportApi:</span><span class="hl-1"> </span><span class="hl-4">'api/pdf-viewer'</span><span class="hl-1"> });</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">addReplyTool</span><span class="hl-1">(</span><span class="hl-4">'expanded'</span><span class="hl-1">);</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Hide "Add Sticky Note" item from context menu:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">'#root'</span><span class="hl-1">, { </span><span class="hl-2">replyTool:</span><span class="hl-1"> { </span><span class="hl-2">allowAddNote:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">userName:</span><span class="hl-1"> </span><span class="hl-4">'John'</span><span class="hl-1">, </span><span class="hl-2">supportApi:</span><span class="hl-1"> </span><span class="hl-4">'api/pdf-viewer'</span><span class="hl-1"> });</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">addReplyTool</span><span class="hl-1">();</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="requireTheme" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>require<wbr/>Theme</span><a href="#requireTheme" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">require<wbr/>Theme<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"themes/dark-yellow"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"light"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"dark"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"viewer"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"light-blue"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"gc-blue"</span></div>
<div class="tsd-comment tsd-typography"><p>Use the requireTheme option to apply built-in CSS theme, the option will inject theme styles directly into the page head.
Note, only known built-in theme can be specified, otherwise the viewer will fail.
Available built-in themes: "viewer", "dark", "dark-yellow", "gc-blue", "light", "light-blue".
This option takes precedence over the "theme" option which can be used to specify custom theme.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-2">selector</span><span class="hl-1">, {</span><br/><span class="hl-1"> * </span><span class="hl-2">requireTheme:</span><span class="hl-1"> </span><span class="hl-4">"light"</span><br/><span class="hl-1">});</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="restoreViewStateOnLoad" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>restore<wbr/>View<wbr/>State<wbr/>On<wbr/>Load</span><a href="#restoreViewStateOnLoad" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">restore<wbr/>View<wbr/>State<wbr/>On<wbr/>Load<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">{ </span>trackFile<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>trackFullScreen<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>trackMouseMode<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>trackPageRotation<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>trackScale<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>trackSidebar<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>trackSidebarWidth<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>trackTheme<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>trackViewMode<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol"> = ...</span></div>
<div class="tsd-comment tsd-typography"><p>Track view changes and restore previous state on next page load.
Note for trackFile - we are tracking opened file only when you open document using URI, not binary data.</p>
<h3>Default</h3><pre><code class="language-javascript"><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-14">trackViewMode</span><span class="hl-1">: </span><span class="hl-0">true</span><span class="hl-1">, </span><span class="hl-14">trackMouseMode</span><span class="hl-1">: </span><span class="hl-0">true</span><span class="hl-1">, </span><span class="hl-14">trackScale</span><span class="hl-1">: </span><span class="hl-0">true</span><span class="hl-1">, </span><span class="hl-14">trackSidebar</span><span class="hl-1">: </span><span class="hl-0">true</span><span class="hl-1">, </span><span class="hl-14">trackSidebarWidth</span><span class="hl-1">: </span><span class="hl-0">true</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-14">trackPageRotation</span><span class="hl-1">: </span><span class="hl-0">false</span><span class="hl-1">, </span><span class="hl-14">trackFullScreen</span><span class="hl-1">: </span><span class="hl-0">false</span><span class="hl-1">, </span><span class="hl-14">trackTheme</span><span class="hl-1">: </span><span class="hl-0">false</span><span class="hl-1">, </span><span class="hl-14">trackFile</span><span class="hl-1">: </span><span class="hl-0">false</span><span class="hl-1">,</span><br/><span class="hl-1">};</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// disable tracking view changes:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">restoreViewStateOnLoad:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> } );</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Track only scale (zoom):</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">restoreViewStateOnLoad:</span><span class="hl-1"> { </span><span class="hl-2">trackScale:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1"> } });</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="saveAsOptions" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>save<wbr/>As<wbr/>Options</span><a href="#saveAsOptions" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">save<wbr/>As<wbr/>Options<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">SaveAsFormat</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">SaveAsOptions</span></div>
<div class="tsd-comment tsd-typography"><p>"Save As" dropdown button options.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Limit the save as options available in the dropdown menu to "PDF" and "PNG".</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">saveAsOptions:</span><span class="hl-1"> { </span><span class="hl-2">availableFormats:</span><span class="hl-1"> [</span><span class="hl-4">"PDF"</span><span class="hl-1">, </span><span class="hl-4">"PNG"</span><span class="hl-1">] } });</span><br/><br/><span class="hl-5">// Show the "Save As" button dropdown with default available formats.</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">saveAsOptions:</span><span class="hl-1"> { </span><span class="hl-2">showSaveAsButton:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1"> } });</span><br/><br/><span class="hl-5">// Hide the "Save As" dropdown button.</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">saveAsOptions:</span><span class="hl-1"> { </span><span class="hl-2">showSaveAsButton:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> } });</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="saveSettings" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>save<wbr/>Settings</span><a href="#saveSettings" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">save<wbr/>Settings<span class="tsd-signature-symbol">:</span> <a href="../types/SaveSettings.html" class="tsd-signature-type" data-tsd-kind="Type alias">SaveSettings</a></div>
<div class="tsd-comment tsd-typography"><p>Default viewer's save settings, used when user clicks the Save button.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Save the document in PDF format with a custom progress message.</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">saveSettings:</span><span class="hl-1"> { </span><span class="hl-2">format:</span><span class="hl-1"> </span><span class="hl-4">"PDF"</span><span class="hl-1">, </span><span class="hl-2">progressMessage:</span><span class="hl-1"> </span><span class="hl-4">"Saving PDF..."</span><span class="hl-1"> } });</span><br/><br/><span class="hl-5">// Save only the first three pages of the document in PNG format.</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">saveSettings:</span><span class="hl-1"> { </span><span class="hl-2">format:</span><span class="hl-1"> </span><span class="hl-4">"PNG"</span><span class="hl-1">, </span><span class="hl-2">pages:</span><span class="hl-1"> </span><span class="hl-4">"0-2"</span><span class="hl-1"> } });</span><br/><br/><span class="hl-5">// Save the document with a signature and reload it in the viewer.</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">saveSettings:</span><span class="hl-1"> { </span><span class="hl-2">sign:</span><span class="hl-1"> { ...</span><span class="hl-2">signatureDetails</span><span class="hl-1"> }, </span><span class="hl-2">reload:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1"> } });</span><br/><br/><span class="hl-5">// Save the document with a zoom factor of 2.0 when saving as PNG.</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">saveSettings:</span><span class="hl-1"> { </span><span class="hl-2">format:</span><span class="hl-1"> </span><span class="hl-4">"PNG"</span><span class="hl-1">, </span><span class="hl-2">zoomFactor:</span><span class="hl-1"> </span><span class="hl-8">2.0</span><span class="hl-1"> } });</span><br/><br/><span class="hl-5">// Save the document in linearized PDF format for fast web viewing.</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">saveSettings:</span><span class="hl-1"> { </span><span class="hl-2">format:</span><span class="hl-1"> </span><span class="hl-4">"PDF"</span><span class="hl-1">, </span><span class="hl-2">saveMode:</span><span class="hl-1"> </span><span class="hl-4">"Linearized"</span><span class="hl-1"> } });</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="secondToolbar" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>second<wbr/>Toolbar</span><a href="#secondToolbar" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">second<wbr/>Toolbar<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">{ </span>render<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>toolbarKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> }</span></div>
<div class="tsd-comment tsd-typography"><p>Second toolbar options.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Create custom second toolbar with key "custom-toolbar-key":</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">React</span><span class="hl-1"> = </span><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">getType</span><span class="hl-1">(</span><span class="hl-4">"React"</span><span class="hl-1">);</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">toolbarControls</span><span class="hl-1"> =[</span><span class="hl-2">React</span><span class="hl-1">.</span><span class="hl-3">createElement</span><span class="hl-1">(</span><span class="hl-4">"label"</span><span class="hl-1">, </span><span class="hl-0">null</span><span class="hl-1">, </span><span class="hl-4">"Custom toolbar"</span><span class="hl-1">),</span><br/><span class="hl-2">React</span><span class="hl-1">.</span><span class="hl-3">createElement</span><span class="hl-1">(</span><span class="hl-4">"button"</span><span class="hl-1">, { </span><span class="hl-3">onClick</span><span class="hl-2">:</span><span class="hl-1"> () </span><span class="hl-0">=></span><span class="hl-1"> { </span><span class="hl-3">alert</span><span class="hl-1">(</span><span class="hl-4">"Execute action."</span><span class="hl-1">); }, </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-4">"Action title"</span><span class="hl-1"> }, </span><span class="hl-4">"Action"</span><span class="hl-1">)];</span><br/><span class="hl-5">// Register custom second toolbar for key "custom-toolbar-key":</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">secondToolbar</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-3">render</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-0">function</span><span class="hl-1">(</span><span class="hl-2">toolbarKey</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-7">if</span><span class="hl-1">(</span><span class="hl-2">toolbarKey</span><span class="hl-1"> === </span><span class="hl-4">"custom-toolbar-key"</span><span class="hl-1">)</span><br/><span class="hl-1"> </span><span class="hl-7">return</span><span class="hl-1"> </span><span class="hl-2">toolbarControls</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">return</span><span class="hl-1"> </span><span class="hl-0">null</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">};</span><br/><span class="hl-5">// Show custom second toolbar:</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">showSecondToolbar</span><span class="hl-1">(</span><span class="hl-4">"custom-toolbar-key"</span><span class="hl-1">);</span>
</code></pre>
</div>
<div class="tsd-type-declaration">
<h4>Type declaration</h4>
<ul class="tsd-parameters">
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> render<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>toolbarKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">)</span></h5>
<ul class="tsd-parameters">
<li class="tsd-parameter-signature">
<ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-literal">
<li class="tsd-signature" id="__type-7.__type-8.__type-9"><span class="tsd-signature-symbol">(</span>toolbarKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></li>
<li class="tsd-description">
<div class="tsd-comment tsd-typography"><p>Handler method which can be used to render custom second toolbar controls.
The method should return array of the JSX.Element controls or null.</p>
</div>
<div class="tsd-parameters">
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameter-list">
<li>
<h5>toolbarKey: <span class="tsd-signature-type">string</span></h5></li></ul></div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4></li></ul></li></ul></li></ul></div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="sharing" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>sharing</span><a href="#sharing" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">sharing<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">{ </span>disallowUnknownUsers<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>knownUserNames<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">; </span>presenceColors<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-symbol">{ </span>[userName: <span class="tsd-signature-type">string</span>]<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol">; </span>presenceMode<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"on"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"off"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"others"</span><span class="tsd-signature-symbol"> }</span></div>
<div class="tsd-comment tsd-typography"><p>Document's sharing settings.
The sharing is used only when the document is open in collaboration mode
using the Share dialog box or from the Shared documents panel.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Disallow user names unknown to the server:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">sharing:</span><span class="hl-1"> { </span><span class="hl-2">disallowUnknownUsers:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1"> }, </span><span class="hl-2">supportApi:</span><span class="hl-1"> </span><span class="hl-4">"api/pdf-viewer"</span><span class="hl-1"> } );</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Specify known user names, and disallow other user names:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><br/><span class="hl-1"> </span><span class="hl-2">sharing:</span><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-2">knownUserNames:</span><span class="hl-1"> [</span><span class="hl-4">"Jaime Smith"</span><span class="hl-1">, </span><span class="hl-4">"Jane Smith"</span><span class="hl-1">],</span><br/><span class="hl-1"> </span><span class="hl-2">disallowUnknownUsers:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1">,</span><br/><span class="hl-1"> }, </span><br/><span class="hl-1"> </span><span class="hl-2">supportApi:</span><span class="hl-1"> </span><span class="hl-4">"api/pdf-viewer"</span><span class="hl-1"> </span><br/><span class="hl-1">});</span>
</code></pre>
</div>
<div class="tsd-type-declaration">
<h4>Type declaration</h4>
<ul class="tsd-parameters">
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> disallow<wbr/>Unknown<wbr/>Users<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography"><p>Prevent sharing the document with users which are not known by the Server Api
or not specified in the knownUserNames setting.</p>
<h3>Default</h3><p>false</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> known<wbr/>User<wbr/>Names<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></h5>
<div class="tsd-comment tsd-typography"><p>Known user names. If specified, these user names will appear
as suggestions in the Sharing dialog, otherwise the Sharing dialog
will display the user names loaded from the Support Api.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> presence<wbr/>Colors<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-symbol">{ </span>[userName: <span class="tsd-signature-type">string</span>]<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></h5>
<div class="tsd-comment tsd-typography"><p>If specified, these colors will be used as color for presence indicators.
key - user name, value = color.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">sharing:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">knownUserNames:</span><span class="hl-1"> [</span><span class="hl-4">'Jame Smith'</span><span class="hl-1">, </span><span class="hl-4">'Lisa'</span><span class="hl-1">],</span><br/><span class="hl-1"> </span><span class="hl-2">presenceColors:</span><span class="hl-1"> { </span><span class="hl-4">'Anonymous'</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">'#999999'</span><span class="hl-1">, </span><span class="hl-4">'Jame Smith'</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">'red'</span><span class="hl-1">, </span><span class="hl-4">'Lisa'</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">'blue'</span><span class="hl-1"> }</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">supportApi:</span><span class="hl-1"> </span><span class="hl-4">"api/pdf-viewer"</span><br/><span class="hl-1">});</span>
</code></pre>
</div>
<ul class="tsd-parameters">
<li class="tsd-parameter-index-signature">
<h5><span class="tsd-signature-symbol">[</span>userName: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">]: </span><span class="tsd-signature-type">string</span></h5></li></ul></li>
<li class="tsd-parameter">
<h5>presence<wbr/>Mode<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"on"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"off"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"others"</span></h5>
<div class="tsd-comment tsd-typography"><p>Determines the type of presence for collaboration users.</p>
<ul>
<li>'on' - the presence of all users, including the active one, will be shown.</li>
<li>'others' - all users except the active user will be shown.</li>
<li>'off' - presence will not be shown.</li>
</ul>
<h3>Default</h3><p>'on'</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Change presence mode to 'others':</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">sharing:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">presenceMode:</span><span class="hl-1"> </span><span class="hl-4">'others'</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">supportApi:</span><span class="hl-1"> </span><span class="hl-4">"api/pdf-viewer"</span><br/><span class="hl-1">});</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Turn off presence indicators:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">sharing:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">presenceMode:</span><span class="hl-1"> </span><span class="hl-4">'off'</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">supportApi:</span><span class="hl-1"> </span><span class="hl-4">"api/pdf-viewer"</span><br/><span class="hl-1">});</span>
</code></pre>
</div></li></ul></div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="shortcuts" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>shortcuts</span><a href="#shortcuts" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">shortcuts<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>[keyCode: <span class="tsd-signature-type">string</span>]<span class="tsd-signature-symbol">: </span><a href="../types/KeyboardShortcutDefinition.html" class="tsd-signature-type" data-tsd-kind="Type alias">KeyboardShortcutDefinition</a><span class="tsd-signature-symbol"> | </span><a href="../types/KeyboardShortcutDefinition.html" class="tsd-signature-type" data-tsd-kind="Type alias">KeyboardShortcutDefinition</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol"> = ...</span></div>
<div class="tsd-comment tsd-typography"><p>Keyboard shortcut definitions.
Available built-in action tools: "zoomin" | "zoomout" | "zoom_pagesize" | "zoom_clientsize" | "select_all" | "rotate" | "pan" | "holdToPan" |
"selection" | "open" | "search" | "print" | "move_caret_left" | "move_caret_right" | "move_caret_up" | "move_caret_down" |
"move_caret_document_start" | "move_caret_document_end" | "move_caret_sequence_start" | "move_caret_sequence_end" |
"confirm-ok" | "confirm-cancel" | "scrollUp" | "scrollDown".</p>
<h3>Example</h3><p>Override keyboard shortcut "Ctrl +"</p>
<pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><br/><span class="hl-1"> </span><span class="hl-2">shortcuts:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">107</span><span class="hl-2">:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">ctrl:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">tool</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-0">function</span><span class="hl-1">(</span><span class="hl-2">event</span><span class="hl-1">) { </span><br/><span class="hl-1"> </span><span class="hl-2">DsPdfViewer</span><span class="hl-1">.</span><span class="hl-3">findControl</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">).</span><span class="hl-2">zoomValue</span><span class="hl-1"> += </span><span class="hl-8">10</span><span class="hl-1">; </span><br/><span class="hl-1"> </span><span class="hl-2">event</span><span class="hl-1">.</span><span class="hl-3">preventDefault</span><span class="hl-1">();</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
</code></pre>
<h3>Example</h3><p>Remove all default shortcuts</p>
<pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">);</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">shortcuts</span><span class="hl-1"> = {};</span>
</code></pre>
<h3>Example</h3><p>Disable grab when space is pressed</p>
<pre><code class="language-javascript"><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">shortcuts</span><span class="hl-1">[</span><span class="hl-4">"32"</span><span class="hl-1">] = () </span><span class="hl-0">=></span><span class="hl-1"> { };</span>
</code></pre>
<h3>Example</h3><p>Redefine and disable Ctrl+Z. Ctrl+Y</p>
<pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#viewer"</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">shortcuts:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">"Z"</span><span class="hl-2">:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">ctrl:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">tool</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-0">function</span><span class="hl-1">(</span><span class="hl-2">e</span><span class="hl-1">) { }</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-4">"Y"</span><span class="hl-2">:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">ctrl:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">tool</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-0">function</span><span class="hl-1">(</span><span class="hl-2">e</span><span class="hl-1">) { }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
</code></pre>
<h3>Example</h3><p>Bind the "P" shortcut to the holdToPan action, leave the Ctrl+P shortcut for the "print" action</p>
<pre><code class="language-javascript"><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">shortcuts</span><span class="hl-1">[</span><span class="hl-4">"P"</span><span class="hl-1">] = [{ </span><span class="hl-2">ctrl:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1">, </span><span class="hl-2">tool:</span><span class="hl-1"> </span><span class="hl-4">"print"</span><span class="hl-1"> }, { </span><span class="hl-2">tool:</span><span class="hl-1"> </span><span class="hl-4">"holdToPan"</span><span class="hl-1"> }];</span>
</code></pre>
<h3>Example</h3><p>Create custom shortcut</p>
<pre><code class="language-javascript"><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">shortcuts</span><span class="hl-1">[</span><span class="hl-4">"E"</span><span class="hl-1">] = {</span><br/><span class="hl-1"> </span><span class="hl-2">ctrl:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">alt:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">tool</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-0">function</span><span class="hl-1">(</span><span class="hl-2">e</span><span class="hl-1">) { </span><span class="hl-3">alert</span><span class="hl-1">(</span><span class="hl-4">"Ctrl+Alt+E pressed."</span><span class="hl-1">); }</span><br/><span class="hl-1">};</span>
</code></pre>
</div>
<div class="tsd-type-declaration">
<h4>Type declaration</h4>
<ul class="tsd-parameters">
<li class="tsd-parameter-index-signature">
<h5><span class="tsd-signature-symbol">[</span>keyCode: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">]: </span><a href="../types/KeyboardShortcutDefinition.html" class="tsd-signature-type" data-tsd-kind="Type alias">KeyboardShortcutDefinition</a><span class="tsd-signature-symbol"> | </span><a href="../types/KeyboardShortcutDefinition.html" class="tsd-signature-type" data-tsd-kind="Type alias">KeyboardShortcutDefinition</a><span class="tsd-signature-symbol">[]</span></h5></li></ul></div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="showContextMenuOnSelection" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>show<wbr/>Context<wbr/>Menu<wbr/>On<wbr/>Selection</span><a href="#showContextMenuOnSelection" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">show<wbr/>Context<wbr/>Menu<wbr/>On<wbr/>Selection<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"Auto"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"On"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"Off"</span><span class="tsd-signature-symbol"> = "Auto"</span></div>
<div class="tsd-comment tsd-typography"><p>Controls the display of the context menu when text is selected.</p>
<ul>
<li>"Auto": Automatically determines whether to show the context menu based on the device type.</li>
<li>"On": Always show the context menu when text is selected.</li>
<li>"Off": Never show the context menu when text is selected.
Default value is "Auto".
On systems with mice, "Auto" behaves like "Off".
On small devices (phones, tablets) without mice, "Auto" behaves like "On".</li>
</ul>
<h3>Example</h3><pre><code class="language-ts"><span class="hl-5">// Configure the viewer to always show the context menu when text is selected</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-2">selector</span><span class="hl-1">, { </span><br/><span class="hl-1"> </span><span class="hl-2">showContextMenuOnSelection:</span><span class="hl-1"> </span><span class="hl-4">"On"</span><br/><span class="hl-1">});</span>
</code></pre>
<h3>Example</h3><pre><code class="language-ts"><span class="hl-5">// Configure the viewer to never show the context menu when text is selected</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-2">selector</span><span class="hl-1">, { </span><br/><span class="hl-1"> </span><span class="hl-2">showContextMenuOnSelection:</span><span class="hl-1"> </span><span class="hl-4">"Off"</span><br/><span class="hl-1">});</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="signTool" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>sign<wbr/>Tool</span><a href="#signTool" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">sign<wbr/>Tool<span class="tsd-signature-symbol">?:</span> <a href="../types/SignToolSettings.html" class="tsd-signature-type" data-tsd-kind="Type alias">SignToolSettings</a></div>
<div class="tsd-comment tsd-typography"><p>Signature tool settings.</p>
<pre><code><span class="hl-1">@</span><span class="hl-2">example</span><br/><span class="hl-4">```javascript</span><br/><span class="hl-4">var viewer = new DsPdfViewer(selector, {</span><br/><span class="hl-4"> signTool: {</span><br/><span class="hl-4"> title: 'Sign document',</span><br/><span class="hl-4"> penColor: '#ff0000',</span><br/><span class="hl-4"> penWidth: 5</span><br/><span class="hl-4"> }</span><br/><span class="hl-4">});</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="snapAlignment" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>snap<wbr/>Alignment</span><a href="#snapAlignment" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">snap<wbr/>Alignment<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">{ </span>center<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">{ </span>horizontal<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>vertical<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol">; </span>margin<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">{ </span>horizontal<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>vertical<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol">; </span>tolerance<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">{ </span>horizontal<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">false</span><span class="tsd-signature-symbol">; </span>vertical<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">false</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol"> }</span></div>
<div class="tsd-comment tsd-typography"><p>The Snap Alignment feature customization settings.
The <em>tolerance</em> setting is the distance between the edges of two objects within which the object that is being
moved or resized snaps to the other object. Margin is the extra space before or after the edge of a field or page.
The <em>margin</em> setting is the distance from the target object to which the edge of the object being moved or resized snaps.
The <em>center</em> setting allows to snap objects to centers of other objects (in addition to edges).</p>
<h3>Default</h3><pre><code class="language-javascript"><span class="hl-1">{ </span><span class="hl-14">snapAlignment</span><span class="hl-1">: </span><span class="hl-0">true</span><span class="hl-1"> }</span><br/><span class="hl-2">By</span><span class="hl-1"> </span><span class="hl-7">default</span><span class="hl-1">, </span><span class="hl-2">snap</span><span class="hl-1"> </span><span class="hl-2">tolerance</span><span class="hl-1"> </span><span class="hl-2">is</span><span class="hl-1"> 5</span><span class="hl-2">pt</span><span class="hl-1">, </span><br/><span class="hl-2">snap</span><span class="hl-1"> </span><span class="hl-2">margin</span><span class="hl-1"> </span><span class="hl-2">between</span><span class="hl-1"> </span><span class="hl-2">objects</span><span class="hl-1"> </span><span class="hl-2">and</span><span class="hl-1"> </span><span class="hl-2">page</span><span class="hl-1"> </span><span class="hl-2">edges</span><span class="hl-1"> </span><span class="hl-2">is</span><span class="hl-1"> 10</span><span class="hl-2">pt</span><span class="hl-1">, </span><br/><span class="hl-2">snap</span><span class="hl-1"> </span><span class="hl-2">to</span><span class="hl-1"> </span><span class="hl-2">center</span><span class="hl-1"> </span><span class="hl-2">is</span><span class="hl-1"> </span><span class="hl-2">true</span><span class="hl-1">.</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Enable vertical snap margin:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">snapAlignment:</span><span class="hl-1"> { </span><span class="hl-2">margin:</span><span class="hl-1"> { </span><span class="hl-2">vertical:</span><span class="hl-1"> </span><span class="hl-8">10</span><span class="hl-1">, </span><span class="hl-2">horizontal:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1">} }, </span><span class="hl-2">supportApi:</span><span class="hl-1"> </span><span class="hl-4">'api/pdf-viewer'</span><span class="hl-1">});</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Change tolerance and snap margins:</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">snapAlignment</span><span class="hl-1"> = { </span><span class="hl-2">tolerance:</span><span class="hl-1"> </span><span class="hl-8">5</span><span class="hl-1">, </span><span class="hl-2">margin:</span><span class="hl-1"> </span><span class="hl-8">20</span><span class="hl-1"> };</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="stamp" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>stamp</span><a href="#stamp" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">stamp<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>dpi<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>selectedImageUrl<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>stampCategories<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><a href="../types/StampCategory.html" class="tsd-signature-type" data-tsd-kind="Type alias">StampCategory</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> }</span></div>
<div class="tsd-comment tsd-typography"><p>Use the stamp option to configure Stamp button settings.</p>
<h3>Default</h3><p>undefined</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Specify your own set of predefined stamps.</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">stamp:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">stampCategories:</span><span class="hl-1"> [</span><br/><span class="hl-1"> { </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-4">'Nature'</span><span class="hl-1">, </span><span class="hl-2">stampImageUrls:</span><span class="hl-1"> [</span><span class="hl-4">'http://localhost:8080/150/160/nature.png'</span><span class="hl-1">, </span><span class="hl-4">'http://localhost:8080/250/140/nature.png'</span><span class="hl-1">, </span><span class="hl-4">'http://localhost:8080/250/150/nature.png'</span><span class="hl-1">] },</span><br/><span class="hl-1"> { </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-4">'Nature 2'</span><span class="hl-1">, </span><span class="hl-2">stampImageUrls:</span><span class="hl-1"> [</span><span class="hl-4">'http://localhost:8080/170/150/nature.png'</span><span class="hl-1">, </span><span class="hl-4">'http://localhost:8080/210/130/nature.png'</span><span class="hl-1">, </span><span class="hl-4">'http://localhost:8080/250/120/nature.png'</span><span class="hl-1">] }</span><br/><span class="hl-1"> ]</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Disable predefined stamps drop-down.</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">stamp:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">stampCategories:</span><span class="hl-1"> </span><span class="hl-0">false</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
</code></pre>
</div>
<div class="tsd-type-declaration">
<h4>Type declaration</h4>
<ul class="tsd-parameters">
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> dpi<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography"><p>Optional. Default image resolution(DPI) for stamp images without DPI.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> selected<wbr/>Image<wbr/>Url<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography"><p>Optional. Selected image url.</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> stamp<wbr/>Categories<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><a href="../types/StampCategory.html" class="tsd-signature-type" data-tsd-kind="Type alias">StampCategory</a><span class="tsd-signature-symbol">[]</span></h5>
<div class="tsd-comment tsd-typography"><p>Stamp categories.</p>
</div></li></ul></div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="supportApi" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>support<wbr/>Api</span><a href="#supportApi" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">support<wbr/>Api<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><a href="../types/SupportApiSettings.html" class="tsd-signature-type" data-tsd-kind="Type alias">SupportApiSettings</a></div>
<div class="tsd-comment tsd-typography"><p>URL to an external Web API service which will be used to enable PDF editing features.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">'#root'</span><span class="hl-1">, { </span><span class="hl-2">supportApi:</span><span class="hl-1"> </span><span class="hl-4">'api/pdf-viewer'</span><span class="hl-1"> } );</span>
</code></pre>
<h3>Example</h3><p>Turn on debug logging for persistent connections.</p>
<pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">'#root'</span><span class="hl-1">, { </span><span class="hl-2">supportApi:</span><span class="hl-1"> </span><span class="hl-4">'api/pdf-viewer'</span><span class="hl-1">, </span><span class="hl-2">logLevel:</span><span class="hl-1"> </span><span class="hl-4">'Debug'</span><span class="hl-1"> } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="textMarkupContextMenu" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>text<wbr/>Markup<wbr/>Context<wbr/>Menu</span><a href="#textMarkupContextMenu" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">text<wbr/>Markup<wbr/>Context<wbr/>Menu<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">false</span><span class="tsd-signature-symbol"> | </span><a href="../types/TextMarkupContextMenuSettings.html" class="tsd-signature-type" data-tsd-kind="Type alias">TextMarkupContextMenuSettings</a></div>
<div class="tsd-comment tsd-typography"><p>Settings for the text markup context sub-menu.</p>
<h3>Example</h3><pre><code class="language-ts"><span class="hl-5">// Hide text markup sub-menu within the main context menu:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-2">selector</span><span class="hl-1">, { </span><br/><span class="hl-1"> </span><span class="hl-2">textMarkupContextMenu:</span><span class="hl-1"> </span><span class="hl-0">false</span><br/><span class="hl-1">});</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Change available colors:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-2">selector</span><span class="hl-1">, { </span><br/><span class="hl-1"> </span><span class="hl-2">textMarkupContextMenu:</span><span class="hl-1"> { </span><span class="hl-2">colors:</span><span class="hl-1"> [{</span><span class="hl-2">value:</span><span class="hl-1"> </span><span class="hl-4">"#ff0000"</span><span class="hl-1">, </span><span class="hl-2">displayName:</span><span class="hl-1"> </span><span class="hl-4">"Red"</span><span class="hl-1">}, {</span><span class="hl-2">value:</span><span class="hl-1"> </span><span class="hl-4">"#000000"</span><span class="hl-1">, </span><span class="hl-2">displayName:</span><span class="hl-1"> </span><span class="hl-4">"Black"</span><span class="hl-1">}] }</span><br/><span class="hl-1">});</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Customize available colors for different text markup types in the text markup context menu:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-2">selector</span><span class="hl-1">, { </span><br/><span class="hl-1"> </span><span class="hl-2">textMarkupContextMenu:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">colors:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">highlight:</span><span class="hl-1"> [</span><br/><span class="hl-1"> {</span><span class="hl-2">value:</span><span class="hl-1"> </span><span class="hl-4">"#ff0000"</span><span class="hl-1">, </span><span class="hl-2">displayName:</span><span class="hl-1"> </span><span class="hl-4">"Red"</span><span class="hl-1">}, </span><br/><span class="hl-1"> {</span><span class="hl-2">value:</span><span class="hl-1"> </span><span class="hl-4">"#000000"</span><span class="hl-1">, </span><span class="hl-2">displayName:</span><span class="hl-1"> </span><span class="hl-4">"Black"</span><span class="hl-1">}</span><br/><span class="hl-1"> ],</span><br/><span class="hl-1"> </span><span class="hl-2">underline:</span><span class="hl-1"> [</span><br/><span class="hl-1"> {</span><span class="hl-2">value:</span><span class="hl-1"> </span><span class="hl-4">"#ff0000"</span><span class="hl-1">, </span><span class="hl-2">displayName:</span><span class="hl-1"> </span><span class="hl-4">"Red"</span><span class="hl-1">}</span><br/><span class="hl-1"> ]</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span><br/><span class="hl-1">@</span><span class="hl-2">example</span><br/><span class="hl-4">```javascript</span><br/><span class="hl-4">// Hide color groups in the text markup sub-menu:</span><br/><span class="hl-4">textMarkupContextMenu: { colors: [] }</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="theme" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>theme</span><a href="#theme" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">theme<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">false</span><span class="tsd-signature-symbol"> = "themes/viewer"</span></div>
<div class="tsd-comment tsd-typography"><p>Use theme option to change default viewer theme.
Set this option to false if you want to disable the loading of
the built-in theme - this can be useful when you are already has theme css reference.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Load dark-yellow theme:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">theme:</span><span class="hl-1"> </span><span class="hl-4">"dark-yellow.css"</span><span class="hl-1">, </span><span class="hl-2">themes:</span><span class="hl-1"> [</span><span class="hl-4">"themes/viewer"</span><span class="hl-1">, </span><span class="hl-4">"themes/light-blue"</span><span class="hl-1">, </span><span class="hl-4">"themes/dark-yellow"</span><span class="hl-1">] } );</span>
</code></pre>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// <link href="~/Content/light-blue.css" rel="stylesheet" /></span><br/><span class="hl-5">// Don't load built-in theme:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">theme:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="themes" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>themes</span><a href="#themes" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">themes<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> = ...</span></div>
<div class="tsd-comment tsd-typography"><p>Available viewer themes.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">themes:</span><span class="hl-1"> [</span><span class="hl-4">"themes/viewer"</span><span class="hl-1">, </span><span class="hl-4">"themes/light-blue"</span><span class="hl-1">, </span><span class="hl-4">"themes/dark-yellow"</span><span class="hl-1">] } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="useCanvasForSelection" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>use<wbr/>Canvas<wbr/>For<wbr/>Selection</span><a href="#useCanvasForSelection" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">use<wbr/>Canvas<wbr/>For<wbr/>Selection<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> = ...</span></div>
<div class="tsd-comment tsd-typography"><p>Color settings for text selection and for active / inactive search result highlight.</p>
<ul>
<li>selectionColor: Changes the default color used to highlight the currently selected search result from the search results list, in the document.</li>
<li>inactiveHighlightColor: Changes the default color used to highlight all the search results in the document.</li>
<li>selectionColor: Changes the default color used to mark the selected text in the document.</li>
</ul>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">options</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-2">useCanvasForSelection:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">selectionColor:</span><span class="hl-1"> </span><span class="hl-4">"rgba(0, 0, 0, 0.25)"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">highlightColor:</span><span class="hl-1"> </span><span class="hl-4">"rgba(255, 94, 255, 0.35)"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">inactiveHighlightColor:</span><span class="hl-1"> </span><span class="hl-4">"rgba(125, 30, 176, 0.35)"</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">};</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, </span><span class="hl-2">options</span><span class="hl-1"> );</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">addSearchPanel</span><span class="hl-1">();</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">open</span><span class="hl-1">(</span><span class="hl-4">"sample.pdf"</span><span class="hl-1">);</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="useFloatingSearchBar" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>use<wbr/>Floating<wbr/>Search<wbr/>Bar</span><a href="#useFloatingSearchBar" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">use<wbr/>Floating<wbr/>Search<wbr/>Bar<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = true</span></div>
<div class="tsd-comment tsd-typography"><p>Enable a floating search bar instead of the sidebar search panel.</p>
<h3>Default</h3><p>Default value is true.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">useFloatingSearchBar:</span><span class="hl-1"> </span><span class="hl-0">false</span><span class="hl-1"> });</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="useNativeContextMenu" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>use<wbr/>Native<wbr/>Context<wbr/>Menu</span><a href="#useNativeContextMenu" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">use<wbr/>Native<wbr/>Context<wbr/>Menu<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></div>
<div class="tsd-comment tsd-typography"><p>By default, the viewer uses its own context menu.
Set this option to true if you want to use the browser context menu.
Please, note, if you set this option to true, some functions of the
context menu will not be available (for example, actions of the Editor and Reply tool).</p>
<h3>Default</h3><p>false</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Enable native browser context menu:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">useNativeContextMenu:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1"> } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="userData" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>user<wbr/>Data</span><a href="#userData" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">user<wbr/>Data<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span></div>
<div class="tsd-comment tsd-typography"><p>Arbitrary data associated with the viewer.
This data is sent to the server when the document is saved.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">'#root'</span><span class="hl-1">, { </span><span class="hl-2">supportApi:</span><span class="hl-1"> </span><span class="hl-4">'api/pdf-viewer'</span><span class="hl-1"> } );</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">userData</span><span class="hl-1"> = { </span><span class="hl-2">secretNumber:</span><span class="hl-1"> </span><span class="hl-8">5</span><span class="hl-1">, </span><span class="hl-2">innerData:</span><span class="hl-1"> { </span><span class="hl-2">innerContent:</span><span class="hl-1"> </span><span class="hl-4">'content'</span><span class="hl-1"> } };</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">applyOptions</span><span class="hl-1">();</span><br/><span class="hl-2">viewer</span><span class="hl-1">.</span><span class="hl-3">open</span><span class="hl-1">(</span><span class="hl-4">'sample.pdf'</span><span class="hl-1">);</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="userName" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>user<wbr/>Name</span><a href="#userName" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">user<wbr/>Name<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = ""</span></div>
<div class="tsd-comment tsd-typography"><p>Author's user name.
This option is used by the Annotation Editor and Reply Tool as the default for the Author field.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">'#root'</span><span class="hl-1">, { </span><span class="hl-2">userName:</span><span class="hl-1"> </span><span class="hl-4">'John'</span><span class="hl-1">, </span><span class="hl-2">supportApi:</span><span class="hl-1"> </span><span class="hl-4">'api/pdf-viewer'</span><span class="hl-1"> });</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="workerSrc" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>worker<wbr/>Src</span><a href="#workerSrc" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">worker<wbr/>Src<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = WORKER_SRC_NAME</span></div>
<div class="tsd-comment tsd-typography"><p>URL to the Web Worker script.
The Web Worker script runs in the background and is used to load
and render PDF documents in a parallel background thread.
Please, note, that rendering a PDF on the main thread (without a Web Worker script)
can slow down the performance of the PDF viewer when loading large PDF files.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">workerSrc:</span><span class="hl-1"> </span><span class="hl-4">"http://localhost:5000/dspdfviewer.worker.js"</span><span class="hl-1"> } );</span>
</code></pre>
</div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="zoomByMouseWheel" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><span>zoom<wbr/>By<wbr/>Mouse<wbr/>Wheel</span><a href="#zoomByMouseWheel" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">zoom<wbr/>By<wbr/>Mouse<wbr/>Wheel<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>always<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>ctrlKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>metaKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol"> = ...</span></div>
<div class="tsd-comment tsd-typography"><p>Zoom by mouse wheel settings.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-5">// Enable zoom with the mouse wheel without pressing the Control or Meta keys:</span><br/><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><span class="hl-2">zoomByMouseWheel:</span><span class="hl-1"> { </span><span class="hl-2">always:</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1"> } } );</span>
</code></pre>
</div>
<div class="tsd-type-declaration">
<h4>Type declaration</h4>
<ul class="tsd-parameters">
<li class="tsd-parameter">
<h5>always<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></h5></li>
<li class="tsd-parameter">
<h5>ctrl<wbr/>Key<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></h5></li>
<li class="tsd-parameter">
<h5>meta<wbr/>Key<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></h5></li></ul></div></section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="zoomOptions" class="tsd-anchor"></a>
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>zoom<wbr/>Options</span><a href="#zoomOptions" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
<div class="tsd-signature">zoom<wbr/>Options<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">{ </span>dropdownZoomFactorValues<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">; </span>maxZoom<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>minZoom<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> }</span></div>
<div class="tsd-comment tsd-typography"><p>Zoom control options.</p>
<h3>Example</h3><pre><code class="language-javascript"><span class="hl-0">var</span><span class="hl-1"> </span><span class="hl-2">viewer</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">DsPdfViewer</span><span class="hl-1">(</span><span class="hl-4">"#root"</span><span class="hl-1">, { </span><br/><span class="hl-1"> </span><span class="hl-2">zoomOptions:</span><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-2">minZoom:</span><span class="hl-1"> </span><span class="hl-8">0.5</span><span class="hl-1">, </span><br/><span class="hl-1"> </span><span class="hl-2">maxZoom:</span><span class="hl-1"> </span><span class="hl-8">1.5</span><span class="hl-1">, </span><br/><span class="hl-1"> </span><span class="hl-2">dropdownZoomFactorValues:</span><span class="hl-1"> [</span><span class="hl-8">0.5</span><span class="hl-1">, </span><span class="hl-8">0.7</span><span class="hl-1">, </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-8">1.5</span><span class="hl-1">] </span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
</code></pre>
</div>
<div class="tsd-type-declaration">
<h4>Type declaration</h4>
<ul class="tsd-parameters">
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> dropdown<wbr/>Zoom<wbr/>Factor<wbr/>Values<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">[]</span></h5>
<div class="tsd-comment tsd-typography"><p>Defines zoom factor array to show in Zoom Control Dropdown in Toolbar</p>
<h3>Default</h3><p>[0.5, 1, 1.5, 2, 3]</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> max<wbr/>Zoom<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography"><p>Defines max zoom factor</p>
<h3>Default</h3><p>3 (300%)</p>
</div></li>
<li class="tsd-parameter">
<h5><code class="tsd-tag ts-flagOptional">Optional</code> min<wbr/>Zoom<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography"><p>Defines min zoom factor</p>
<h3>Default</h3><p>0.25 (25%)</p>
</div></li></ul></div></section></section></div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
<div class="tsd-accordion-details">
<div class="tsd-filter-visibility">
<h4 class="uppercase">Member Visibility</h4><form>
<ul id="tsd-filter-options">
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></form></div>
<div class="tsd-theme-toggle">
<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
<nav class="tsd-navigation primary">
<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
<div class="tsd-accordion-details">
<ul>
<li><a href="../index.html">Document <wbr/>Solutions PDF <wbr/>Viewer -<wbr/> v7.2.3</a>
<ul></ul></li></ul></div></details></nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul>
<li class="current tsd-kind-class"><a href="ViewerOptions.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg><span>Viewer<wbr/>Options</span></a>
<ul>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#allowedTools" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>allowed<wbr/>Tools</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#baseUrl" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>base<wbr/>Url</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#cMapPacked" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>c<wbr/>Map<wbr/>Packed</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#cMapUrl" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>c<wbr/>Map<wbr/>Url</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#caret" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>caret</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#coordinatesOrigin" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>coordinates<wbr/>Origin</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#coordinatesPrecision" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>coordinates<wbr/>Precision</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#customIcons" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>custom<wbr/>Icons</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#disableFeatures" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>disable<wbr/>Features</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#disableHistory" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>disable<wbr/>History</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#disablePageLabels" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>disable<wbr/>Page<wbr/>Labels</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#documentListUrl" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>document<wbr/>List<wbr/>Url</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#editorDefaults" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>editor<wbr/>Defaults</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#enableXfa" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>enable<wbr/>Xfa</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#externalLinkTarget" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>external<wbr/>Link<wbr/>Target</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#fieldsAppearance" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>fields<wbr/>Appearance</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#file" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>file</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#formFiller" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>form<wbr/>Filler</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#friendlyFileName" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>friendly<wbr/>File<wbr/>Name</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#hideAnnotationPopups" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>hide<wbr/>Annotation<wbr/>Popups</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#hideAnnotationTypes" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>hide<wbr/>Annotation<wbr/>Types</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#ignoreInitialView" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>ignore<wbr/>Initial<wbr/>View</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#jsExecutionConfig" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>js<wbr/>Execution<wbr/>Config</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#keepFileData" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>keep<wbr/>File<wbr/>Data</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#language" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>language</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#lockOpenTimeout" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>lock<wbr/>Open<wbr/>Timeout</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#logLevel" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>log<wbr/>Level</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#maxCanvasPixels" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>max<wbr/>Canvas<wbr/>Pixels</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#newDocumentFileName" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>new<wbr/>Document<wbr/>File<wbr/>Name</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#onBeforeCloseContextMenu" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>on<wbr/>Before<wbr/>Close<wbr/>Context<wbr/>Menu</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#onBeforeOpenContextMenu" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>on<wbr/>Before<wbr/>Open<wbr/>Context<wbr/>Menu</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#onInitialized" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>on<wbr/>Initialized</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#openParameters" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>open<wbr/>Parameters</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#pageDisplay" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>page<wbr/>Display</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#password" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>password</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#renderInteractiveForms" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>render<wbr/>Interactive<wbr/>Forms</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#renderer" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>renderer</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#replyTool" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>reply<wbr/>Tool</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#requireTheme" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>require<wbr/>Theme</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#restoreViewStateOnLoad" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>restore<wbr/>View<wbr/>State<wbr/>On<wbr/>Load</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#saveAsOptions" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>save<wbr/>As<wbr/>Options</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#saveSettings" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>save<wbr/>Settings</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#secondToolbar" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>second<wbr/>Toolbar</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#sharing" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>sharing</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#shortcuts" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>shortcuts</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#showContextMenuOnSelection" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>show<wbr/>Context<wbr/>Menu<wbr/>On<wbr/>Selection</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#signTool" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>sign<wbr/>Tool</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#snapAlignment" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>snap<wbr/>Alignment</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#stamp" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>stamp</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#supportApi" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>support<wbr/>Api</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#textMarkupContextMenu" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>text<wbr/>Markup<wbr/>Context<wbr/>Menu</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#theme" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>theme</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#themes" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>themes</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#useCanvasForSelection" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>use<wbr/>Canvas<wbr/>For<wbr/>Selection</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#useFloatingSearchBar" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>use<wbr/>Floating<wbr/>Search<wbr/>Bar</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#useNativeContextMenu" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>use<wbr/>Native<wbr/>Context<wbr/>Menu</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#userData" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>user<wbr/>Data</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#userName" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>user<wbr/>Name</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#workerSrc" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>worker<wbr/>Src</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#zoomByMouseWheel" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>zoom<wbr/>By<wbr/>Mouse<wbr/>Wheel</a></li>
<li class="tsd-kind-property tsd-parent-kind-class"><a href="ViewerOptions.html#zoomOptions" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>zoom<wbr/>Options</a></li></ul></li></ul></nav></div></div>
<div class="overlay"></div><script src="../assets/main.js"></script></body></html>