ViewerOptions クラス

このオプションを使用して、デフォルトの SVG アイコンをカスタム アイコンに変更します。 利用可能なアイコン キー: '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'.

サンプル

var viewer = new DsPdfViewer(selector, {
 customIcons: {
 'open': '<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>',
 'search': '<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>'
 }
});

新しい注釈とフィールドのデフォルト値が含まれます。

サンプル

// デフォルトの付箋とテキスト注釈の色を赤に変更します。
var viewer = new DsPdfViewer("#root", {
 editorDefaults: {
 stickyNote: { color: "#ff0000" },
 textAnnotation: {color: "#ff0000" }
 },
 supportApi: 'api/pdf-viewer'
});

サンプル

// デフォルトの四角形注釈の外観を変更します。
var viewer = new DsPdfViewer("#root", {
 editorDefaults: {
 squareAnnotation: {
 annotationType: 5, // AnnotationTypeCode.SQUARE
 subtype: "Square",
 borderStyle: { width: 5, style: 1, horizontalCornerRadius: 0, verticalCornerRadius: 0 },
 color: [0, 0, 0],
 interiorColor: [255, 0, 0],
 }
 },
 supportApi: 'api/pdf-viewer'
});

このオプションを使用して、フォームエディタの注釈ツールまたは注釈エディタのフィールドツールを有効します。

既定値

{
 annotationEditor: 'annotations',
 formEditor: 'fields'
}

サンプル

viewer.options.allowedTools = { formEditor: 'all' };

フォームフィールドの外観の描画設定。このオプションを使用して、フォームフィールドの外観の特定の描画タイプをカスタマイズします。 利用可能な描画タイプは次のとおりです。

• 「Custom」：デフォルトのタイプ。 カスタムの外観には、Webの外観に比べていくつかの改善があります。例え ば、背景または境界線の色を指定できます。
• 「Web」：プラットフォームネイティブのスタイルを使用した標準フォームフィールドの外観。詳細については、https://developer.mozilla.org/ja/docs/Web/CSS/appearanceを参照します。
• 「Predefined」：利用可能な場合はPDFからの事前定義された外観ストリーム。外観ストリームが利用できない場合は、カスタム外観が使用されます。

サンプル

// ラジオボタンとチェックボックスボタンにプラットフォームネイティブのスタイルを使用して、標準のフォームフィールドの外観を使用します。
var viewer = new DsPdfViewer("#root", { fieldsAppearance: { radioButton: "Web", checkBoxButton: "Web" } });

サンプル

// PDFからの事前定義された外観ストリームを使用します。
var viewer = new DsPdfViewer("#root", { fieldsAppearance: { radioButton: "Predefined", checkBoxButton: "Predefined" } });

オープンタイムアウト期間をミリ秒単位でロックします。 ユーザーは、lockOpenTimeoutオプションで指定された期間中、または前のドキュメントがロードされるまで、「open」メソッドを使用して別のドキュメントを開くことはできません。

既定値

20000

サンプル

// オープンタイムアウトを5秒に変更します。
var viewer = new DsPdfViewer("#root", { lockOpenTimeout: 5000 );
viewer.open("doc1.pdf"); 
// 次にopenメソッドが呼び出されると、ビューワは
// 前のドキュメントが開くまで最大5秒を待ちます。
viewer.open("doc2.pdf");

位置合わせ機能を使用して設定をカスタマイズできます。tolerance は、移動またはサイズ変更されているオブジェクトとスナップされる他のオブジェクトの端の間の距離です。余白は、フィールドまたはページの端の前後の余分な間隔です。marginは、移動またはサイズ変更されているオブジェクトの端からスナップされるターゲットオブジェクトまでの距離です。centerは,オブジェクトを他のオブジェクトの中心にスナップします。

既定値

{ snapAlignment: true }
By default, snap tolerance is 5pt, 
snap margin between objects and page edges is 10pt, 
snap to center is true.

サンプル

// 垂直方向の余白にスナップを有効します。
var viewer = new DsPdfViewer("#root", { snapAlignment: { margin: { vertical: 10, horizontal: false} }, supportApi: 'api/pdf-viewer'});

サンプル

// 公差とスナップマージンの変更します。
viewer.options.snapAlignment = { tolerance: 5, margin: 20 };

デフォルトでは、ビューワは独自のコンテキストメニューを使用します。ブラウザのコンテキストメニューを使用する場合は、このオプションをtrueに設定します。メモ：このオプションをtrueに設定すると、コンテキストメニューの一部の機能が使用できなくななります（たとえば、エディタと返信ツールのアクション）。

既定値

false

サンプル

// ブブラウザのコンテキストメニューを有効します。
var viewer = new DsPdfViewer("#root", { useNativeContextMenu: true } );

この関数は、コンテキストメニューが表示になりそうなときに呼び出されます。この関数を使用して、コンテキストメニューをカスタマイズできます。コンテキストメニューアクションを開かないようにする場合は、falseを返します。

既定値

undefined

サンプル

// 次のサンプルは、GoogleとBingの検索エンジンを使用して
 // コンテキストメニューを変更し、検索を追加する方法を示します。
 viewer.options.onBeforeOpenContextMenu = function (items, mousePosition, viewer) {
 var selectedText = viewer.getSelectedText();
 if (selectedText) {
 // 既存の項目を削除します。
 items.splice(0, items.length);
 // カスタムメニュー項目を追加します。
 items.push({
 type: 'button',
 text: 'Googleで検索',
 onClick: function () {
 window.open('http://www.google.com/search?q=' + encodeURI(selectedText), '_blank');
 }
 });
 items.push({
 type: 'button',
 text: 'Bingで検索'',
 onClick: function () {
 window.open('https://www.bing.com/search?q=' + encodeURI(selectedText), '_blank');
 }
 });
 }
 return true;
 };

この関数は、コンテキストメニューが非表示になりそうなときに呼び出されます。コンテキストメニューアクションを閉じないようにする場合は、falseを返します。

既定値

undefined

サンプル

viewer.options.onBeforeCloseContextMenu = function(e) {
 console.log("The context menu will be closed soon.");
 return true;
};

既定値

undefined

サンプル

viewer.options.onBeforeCloseContextMenu = function(e) {
 if(!confirm("Do you want to close context menu?")) {
 console.log("The context menu will not be closed.");
 return false;
 }
 console.log("The context menu will be closed.");
 return true;
};

返信ツールの設定。

既定値

デフォルト設定は次のとおりです。

• readOnly: false,
• allowAddNote: true,
• allowChangeUserName: true,
• allowAddReply: true,
• allowDelete: true,
• allowStatus: true,
• allowChangeOtherUser: true,
• allowDeleteOtherUser: true,
• allowStatusOtherUser: true,
• allowAddReplyOtherUser: true

// 別のユーザーのコメントを変更または削除しないようにします。
 var viewer = new DsPdfViewer('#root', { replyTool: { allowChangeOtherUser: false,
 allowDeleteOtherUser: false },
 userName: 'John', supportApi: 'api/pdf-viewer' });
 viewer.addReplyTool('expanded');

サンプル

// 作成者名の変更を禁止し（allowChangeUserNameはfalse）、
// 別のユーザーのコメントの変更を禁止します（allowChangeOtherUserはfalse）。
var viewer = new DsPdfViewer('#root', { replyTool: { allowChangeOtherUser: false,
 allowChangeUserName: false },
 userName: 'John', supportApi: 'api/pdf-viewer' });
viewer.addReplyTool('expanded');

サンプル

// 読み取り専用の返信ツールを追加します。
var viewer = new DsPdfViewer('#root', {
 replyTool: { readOnly: true },
 userName: 'John',
 supportApi: 'api/pdf-viewer' });
viewer.addReplyTool('expanded');

サンプル

// コンテキストメニューから[付箋の追加]項目を非表示にします。
var viewer = new DsPdfViewer('#root', { replyTool: { allowAddNote: false },
 userName: 'John', supportApi: 'api/pdf-viewer' });
viewer.addReplyTool();

作成者名。このオプションは、注釈エディタと返信ツールによって[作成者]フィールドのデフォルトとして使用されます。

サンプル

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

フォームの送信およびテーマのURLに使用されます。

サンプル

var viewer = new DsPdfViewer("#root", { baseUrl: "http://localhost/mysite/" });

テキスト選択カーソルの設定。

説明

Settings description:
caretBlinkTime - milliseconds, caret blink period
caretStopBlinkTime - milliseconds, stop caret blink time, 0 - don't stop
color - The caret color
width - The caret width
allowForPan - Allow to move caret using keys even when pan tool activated.

サンプル

// キャレットを非表示にします。
var viewer = new DsPdfViewer("#root", { caret: false } );

サンプル

// キャレットの色と幅を変更します。
var viewer = new DsPdfViewer("#root", { caret: {"color": "#ff0000", "width": 2} } );

ドキュメントの共有設定。[共有]ダイアログボックスまたは[共有ドキュメント]パネルを使用して、ドキュメントが共有モードで開かれている場合にのみ使用されます。

サンプル

// サーバーに不明なユーザー名を禁止します。
var viewer = new DsPdfViewer("#root", { sharing: { disallowUnknownUsers: true }, supportApi: "api/pdf-viewer" } );

サンプル

// 既知のユーザー名を指定し、他のユーザー名を禁止します。
var viewer = new DsPdfViewer("#root", {
 sharing: {
 knownUserNames: ["Jaime Smith", "Jane Smith"],
 disallowUnknownUsers: true,
 },
 supportApi: "api/pdf-viewer" 
});

注釈座標の丸め精度。注釈およびフォームエディタによって使用されます。

既定値

1

サンプル

// デフォルトの丸め精度を0.001に変更します。
var viewer = new DsPdfViewer("#root", { coordinatesPrecision: 0.001 } );

PDFページの原点座標。このオプションは、注釈エディタおよびフォームエディタのプロパティパネルに使用されます。

既定値

TopLeft

サンプル

// 座標の原点を左下の点に変更します。
var viewer = new DsPdfViewer("#root", { coordinatesOrigin: "BottomLeft" } );

会社のセキュリティ ポリシーに応じて、disableFeatures オプションを使用して DsPdfViewer の特定の機能を無効にします。 disableFeatures オプションは、DsPdfViewer の初期化中にのみ指定できることに注意してください。

サンプル

// ドラッグ アンド ドロップ操作、JavaScript アクション、ファイルとサウンドの添付ファイルを無効にします。
var viewer = new DsPdfViewer("#root", { disableFeatures: ['DragAndDrop', 'JavaScript', 'AllAttachments'] } );

サンプル

// DsPdfViewer のドラッグ アンド ドロップを無効にします。
var viewer = new DsPdfViewer(selector, {
 disableFeatures: ['DragAndDrop']
});

PDF ドキュメントで指定された初期表示の設定を無効にする場合は、このオプションを true に設定します。

既定値

false

サンプル

var viewer = new DsPdfViewer("#root", { ignoreInitialView: true } );

ページラベルを無効にする場合、このオプションをtrueに設定します。

サンプル

var viewer = new DsPdfViewer("#root", { disablePageLabels: true } );

externalLinkTargetオプションは、リンク注釈のターゲット属性の値を設定します。リンクされたドキュメントを開く場所を指定します。設定できる値は、「blank」、「self」、「parent」、「top」および「none」。

既定値

「none」

サンプル

var viewer = new DsPdfViewer("#root", { externalLinkTarget: "blank" } );

[フォームフィラー]ダイアログの設定。

サンプル

var formFiller = {
 mapping: {
 'UserNameField1': {
 title: 'User Name',
 displayname: 'username',
 placeholder: 'Enter here...',
 validateoninput: true,
 validator: function(fieldValue, field) {
 if(fieldValue.length >= 3)
 return true;
 else
 return 'username must be at least 3 characters';
 }
 },
 'fld2': { hidden: true },
 'Country Combo Box': {
 displayname: 'Country',
 required: true 
},
 'fld3': { displayName: 'First name!',
 title: 'Please enter your first name.',
 rowCustomCSS: 'given-name-row'
 }
 }
};
var viewer = new DsPdfViewer('#root', { formFiller: formFiller });
viewer.addDefaultPanels();

サンプル

var viewer = new DsPdfViewer(selector, {
 renderInteractiveForms: true,
 formFiller: {
 validator: function(val) {return (val ? null : 'The field cannot be empty'); }
 } 
});

JSアクションの実行設定（オプション）。

サンプル

JS の実行前に長い操作を実行し、JS の実行後に表示されているページを再描画します。

viewer.options.jsExecutionConfig = {
 before: function() {
 // 返された Promise は、さらに JS を実行する前に待機されます。
 return new Promise(function(resolve) {
 setTimeout(resolve, 1000);
 });
 },
 after: function() {
 viewer.repaint();
 }
}

サンプル

実行前に jsCode を調整します。

viewer.options.jsExecutionConfig = {
 before: function(args) {
 args.jsCode = args.jsCode.replace("app.alert", "app.showMessage");
 },
}

サンプル

JS の実行をキャンセルします。

viewer.options.jsExecutionConfig = {
 before: function(args) {
 args.cancel = true;
 },
}

動的XFAフォームがある場合は描画します。

既定値

デフォルト値Trueです。

サンプル

// XFAフォームの描画をオフにします。
var viewer = new DsPdfViewer(selector, { enableXfa: false });

2番目のツールバーのオプション。

サンプル

// 「custom-toolbar-key」キーを使用してカスタムの2番目のツールバーを作成します。
var React = viewer.getType("React");
var toolbarControls =[React.createElement("label", null, "Custom toolbar"),
React.createElement("button", { onClick: () => { alert("Execute action."); }, title: "Action title" }, "Action")];
// 「custom-toolbar-key」キーのカスタム2番目のツールバーを登録します。
viewer.options.secondToolbar = {
 render: function(toolbarKey) {
 if(toolbarKey === "custom-toolbar-key")
 return toolbarControls;
 return null;
 }
};
// カスタムの2番目のツールバーを表示します。
viewer.showSecondToolbar("custom-toolbar-key");

署名ツールの設定。

@example
```javascript
var viewer = new DsPdfViewer(selector, {
 signTool: {
 title: 'Sign document',
 penColor: '#ff0000',
 penWidth: 5
 }
});

ユーザーインターフェイス言語。メモ：言語オプションを使用するには、ビューワの初期化フで言語オプションの値を指定する必要があります。

サンプル

// UI言語を日本語に設定します。
var viewer = new DsPdfViewer(selector, { language: 'ja' });
viewer.addDefaultPanels();

サンプル

function loadPdfViewer(selector) {
 // カスタム翻訳を定義します。
 var myTranslations = {
 "toolbar": {
 "open-document": "Open MY document",
 "pan": "My Pan tool",
 }
 };
 // 翻訳を初期化します。
 DsPdfViewer.i18n.init({
 resources: { myLang: { translation: myTranslations } }
 }).then(function(t) {
 // 新しい翻訳が初期化されます。
 // PDFビューワを作成します。
 var viewer = new DsPdfViewer(selector, { language: 'myLang' });
 viewer.addDefaultPanels();
 //viewer.open("sample.pdf");
 });
}
loadPdfViewer('#root');

サポートされているキャンバスの最大サイズ（ピクセル単位）、つまり幅*高さ。キャンバスのスケーリングがmaxCanvasPixelsオプションを超えると、ページをキャンバスに再描画する代わりに、CSSスケーリングが使用されます。

既定値

パソコンまたはMacのデフォルト値は「4096 * 4096 = 16777216（16メガピクセル）」です。 iOSまたはAndroidのデフォルト値は「2560x 2048 = 5242880（5メガピクセル）」です。

ビューワに関連付けられた任意のデータ。このデータは、ドキュメントが保存されるときにサーバーに送信されます。

サンプル

var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
viewer.options.userData = { secretNumber: 5, innerData: { innerContent: 'content' } };
viewer.applyOptions();
viewer.open('sample.pdf');

サイドバー検索パネルの代わりにフローティング検索バーを有効にします。

既定値

デフォルト値Trueです。

サンプル

var viewer = new DsPdfViewer("#root", { useFloatingSearchBar: false });

テキスト選択とアクティブ・非アクティブな検索結果のハイライト表示の色設定。

• selectionColor: ドキュメント内の検索結果リストから選択される検索結果を強調表示するに使用されるデフォルトの色を変更します。
• inactiveHighlightColor: ドキュメント内のすべての検索結果を強調表示するに使用されるデフォルトの色を変更します。
• selectionColor: ドキュメントで選択したテキストをマークするに使用されるデフォルトの色を変更します。

サンプル

var options = {
 useCanvasForSelection: {
 selectionColor: "rgba(0, 0, 0, 0.25)",
 highlightColor: "rgba(255, 94, 255, 0.35)",
 inactiveHighlightColor: "rgba(125, 30, 176, 0.35)"
 }
};
var viewer = new DsPdfViewer("#root", options );
viewer.addSearchPanel();
viewer.open("sample.pdf");

対話式のフォーム要素を描画します。

サンプル

// 対話式のフォームを描画しません。
var viewer = new DsPdfViewer("#root", { renderInteractiveForms: false } );

ドキュメントを有効なPDFドキュメントとして解析できないでも、fileDataプロパティを使用する場合は、このオプションをtrueに設定します。

サンプル

// 次の例では、エラーが発生したときに無効なファイルデータを表示する方法を示します。
var viewer = new DsPdfViewer('#root', { keepFileData: true });
viewer.onError.register(function(eventArgs) {
 var message = eventArgs.message;
 if (message.indexOf("Invalid PDF structure") !== -1) {
 console.log('Unable to load pdf document, pdf document is broken.');
 console.log("File data:");
 // ファイルデータをコンソールに出力します。
 console.log(viewer.fileData);
 } else {
 console.log('Unexpected error: ' + message);
 }
});
viewer.open('sample.pdf');

PDFドキュメントのレンダラーの種類をcanvasまたはsvgとして指定します。

サンプル

var viewer = new DsPdfViewer("#root", { renderer: "svg" } );

ファイル名が利用できない場合に使用されます。

サンプル

viewer.options.friendlyFileName = "myFileName.pdf";
viewer.applyOptions();

ビューワにロードするPDFファイル名、URL、またはバイナリデータを指定します。

サンプル

var viewer = new DsPdfViewer("#root", { file: 'GcPdf.pdf' } );

「open」メソッドによって使用されるパラメータオブジェクト。

サンプル

// Basic認証のヘッダーを含めます。
var viewer = new DsPdfViewer('#root', {
 openParameters: {
 headers: {
 "Authorization": "Basic " + btoa(unescape(encodeURIComponent("USERNAME:PASSWORD"))),
 "CustomHeader": "Custom header value"
 }
 }
});

保護されたPDFドキュメントの事前定義されたパスワード。

サンプル

viewer.options.password = "abc123";
viewer.open("protected.pdf");

ビューの変更を追跡し、次のページをロードする時に前の状態を復元します。trackFileの場合、バイナリデータではなく、URIを使用してドキュメントを開いたときに、開いたファイルのみを追跡します。

既定値

{
 trackViewMode: true, trackMouseMode: true, trackScale: true, trackSidebar: true, trackSidebarWidth: true,
 trackPageRotation: false, trackFullScreen: false, trackTheme: false, trackFile: false,
};

サンプル

// ビューの変更の追跡を無効します。
var viewer = new DsPdfViewer("#root", { restoreViewStateOnLoad: false } );

サンプル

// スケール(拡大縮小)のみを追跡します。
var viewer = new DsPdfViewer("#root", { restoreViewStateOnLoad: { trackScale: true } });

DocumentListPanelによって使用されるドキュメントリストサービスへのURL（addDocumentListPanelメソッドを参照します）。サービスは、利用可能なドキュメント配列を含むJSON文字列を返す必要があります（例：[{"path": "doc1.pdf"}、 {"path": "doc2.pdf", "name": "Hello doc 2", "title": "title 2"}] または ["pdf1.pdf", "pdf2.pdf"]。

既定値

「/documents」

サンプル

// 外部サービスからドキュメントリストをロードします。
var viewer = new DsPdfViewer("#root", { documentListUrl: "documents.json" } );

documents.json ファイルの内容は次のとおりです。

[
 {
 "path": "/sample1.pdf",
 "name": "Simple text",
 "title": "Sample 1"
 },
 {
 "path": "/sample2.pdf",
 "previewContent": "<b>Preview HTML content</b> goes here.",
 "title": "Sample 2"
 },
 {
 "path": "/sample3.pdf",
 "name": "Open sample3.pdf",
 "title": "Sample 3"
 }
]

サンプル

// DATA URIを使用してドキュメントリストをロードします。
var viewer = new DsPdfViewer("#root", { documentListUrl: 'data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "Hello doc 2", "title": "title 2"}]' } );

サンプル

// 事前定義されたドキュメントリストを使用します。
var options = {};
options.documentListUrl = [
 {
 path: "/sample1.pdf",
 name: "Open sample1.pdf",
 title: "Sample 1"
 },
 {
 path: "/sample2.pdf",
 name: "Open sample2.pdf",
 title: "Sample 2"
 },
 {
 path: "/sample3.pdf",
 name: "Open sample3.pdf",
 title: "Sample 3"
 }
];
var viewer = new DsPdfViewer("#root", options);

サンプル

// 事前定義されたドキュメントリストを使用し、カスタムプレビューコンテンツを表示します。
 var options = {};
 options.documentListUrl = [
 {
 path: "/sample1.pdf",
 title: "Sample 1",
 previewContent: `<div class="card" style="position: relative;">
 <h2 class="header" style="line-height: 30px;height: 30px;display: block;text-align: center;">
 <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>
 </h2>
 <div class="container">
 <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="
 border: 1px dashed #cccccc; padding: 10px; width: 100px; height: 100px; display: inline-block; fill: #999999;
 ">
 <title>eye</title>
 <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>
 </svg>
 <p></p></div>
 </div>
 </div>`
 },
 {
 path: "/sample2.pdf",
 title: "Sample 2",
 previewContent: `<div class="card" style="position: relative;">
 <h2 class="header" style="line-height: 30px;height: 30px;display: block;text-align: center;">
 <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>
 </h2>
 <div class="container">
 <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="
 border: 1px dashed #cccccc; padding: 10px; width: 100px; height: 100px; display: inline-block; fill: #999999;">
 <title>eye</title>
 <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>
 </svg>
 <p></p></div>
 </div>
 </div>`
 },
 {
 path: "/sample3.pdf",
 name: "Open sample3.pdf",
 title: "Sample 3 without custom preview content"
 }
 ];

 var viewer = new DsPdfViewer("#root", options);
 viewer.addDefaultPanels();
 const documentListPanelHandle = viewer.addDocumentListPanel();
 viewer.onAfterOpen.register(function() {
 viewer.leftSidebar.menu.panels.open(documentListPanelHandle.id);
 });

Web　WorkerスクリプトへのURL。Web WorkerスクリプトはバックグラウンドスレッドでPDFドキュメントをロードおよ描画するに使用されます。メモ：（Web Workerスクリプトを使用せずに）メインスレッドでPDFをレンダリングすると、大きなPDFファイルをロードするときにPDFビューわのパフォーマンスが低下します。

サンプル

var viewer = new DsPdfViewer("#root", { workerSrc: "http://localhost:5000/dspdfviewer.worker.js" } );

ズーム制御のオプション。

サンプル

var viewer = new DsPdfViewer("#root", {
 zoomOptions: {
 minZoom: 0.5,
 maxZoom: 1.5,
 dropdownZoomFactorValues: [0.5, 0.7, 1, 1.5]
 }
});

マウスホイールによってドキュメントを拡大縮小します。

サンプル

// CtrlキーまたはMetaキーを押さずに、マウスホイールによって拡大縮小を有効します。
var viewer = new DsPdfViewer("#root", { zoomByMouseWheel: { always: true } } );

テーマオプションを使用して、デフォルトのビューワテーマを変更します。組み込みのテーマのロードを無効にする場合、このオプションをfalseに設定します。これは、テーマのcss参照が既にある場合に役立ちます。

サンプル

// 濃い黄色のテーマをロードします。
var viewer = new DsPdfViewer("#root", { theme: "dark-yellow.css", themes: ["themes/viewer", "themes/light-blue", "themes/dark-yellow"] } );

サンプル

// <link href="~/Content/light-blue.css" rel="stylesheet" />
// 組み込みのテーマをロードしないでください。
var viewer = new DsPdfViewer("#root", { theme: false } );

ビューワの利用可能なテーマ。

サンプル

var viewer = new DsPdfViewer("#root", { themes: ["themes/viewer", "themes/light-blue", "themes/dark-yellow"] } );

requireThemeオプションを使用して、組み込みのCSSテーマを適用します。このオプションは、テーマのスタイルをページのヘッドに直接適用します。メモ：組み込みのテーマのみを指定でき、それ以外の場合、ビューワが失敗します。利用可能な組み込みのテーマは次のとおりです。「viewer」、「dark」、「dark-yellow」、「gc-blue」、「light」　および「light-blue」です。このオプションは、カスタムテーマを指定するために使用できる「theme」オプションよりも優先されます。

サンプル

var viewer = new DsPdfViewer(selector, {
 * requireTheme: "light"
});

このオプションを使用して、注釈のポップアップを非表示にします。可能な値は次のとおりです。['Text'、'Link'、'Line'、'Square'、'Circle'、'Polygon'、
'PolyLine'、'Ink'、'Popup'、'FileAttachment'、'Sound'、' Redact'、'Stamp'] または true または 'All’（true と 'All' は同じ動作です）。

既定値

undefined

サンプル

// 例：すべての注釈のポップアップを非表示にします。
var viewer = new DsPdfViewer("#root", { hideAnnotationPopups: true });
// 例：墨消し、円と四角形注釈を非表示にします。
var viewer = new DsPdfViewer("#root", { hideAnnotationPopups: ["Redact", "Circle", "Square"] });

「hide-annotations」ボタンがチェックされたときに非表示になる注釈の種類を指定します。可能な値は次のとおりです。[「Text」、「Link」、「FreeText」、「Line」、「Square」、「Circle」、「Polygon」、「PolyLine」、「Ink」、「Popup」、「FileAttachment」、「Sound」、「ThreadBead」、「RadioButton」、「Checkbox」、「PushButton」、「Choice」、「TextWidget」、「Redact」] 、「Stamp」、「Highlight」、「Underline」、「Squiggly」、「StrikeOut」または true または「All」（true と 'All' は同じ動作です）。

既定値

['Text', 'FreeText', 'Line', 'Square', 'Circle', 'Polygon', ‘PolyLine', 'Ink', 'Popup', 'Sound', 'Polygon', 'RadioButton', 'Checkbox', 'PushButton', 'Choice', 'TextWidget', 'Redact', 'Stamp', 'Highlight', 'Underline', 'Squiggly', 'StrikeOut'];

サンプル

// 可能なすべての注釈を非表示にします。
let options = { hideAnnotationTypes: 'All' };

サンプル

// プッシュボタンと改訂注釈のみを非表示にします。
let options = { hideAnnotationTypes: ['PushButton', 'Redact'] };

外部フォントのCMapテーブルが保存されるフォルダへのURI。

既定値

「resources/bcmaps/」

サンプル

var viewer = new DsPdfViewer("#root", { cMapUrl: "../data/cmaps/" } );

ビューワが拡張子「.bin」のCMapファイルの圧縮バージョンを検索する必要があるかどうかを示します。

既定値

true

サンプル

var viewer = new DsPdfViewer("#root", { cMapPacked: false } );

テキスト マークアップ コンテキスト メニューの設定。

サンプル

// テキスト マークアップのコンテキストメニューを無効にします。
var viewer = new DsPdfViewer(selector, {
 textMarkupContextMenu: false
});

スタンプオプションを使用して、スタンプボタンの設定を構成します。

既定値

undefined

サンプル

// 定義済みスタンプのカスタムセットを指定します。
var viewer = new DsPdfViewer("#root", {
  stamp: {
    stampCategories: [
           { name: 'Nature', stampImageUrls: ['http://localhost:8080/150/160/nature.png', 'http://localhost:8080/250/140/nature.png', 'http://localhost:8080/250/150/nature.png'] },
           { name: 'Nature 2', stampImageUrls: ['http://localhost:8080/170/150/nature.png', 'http://localhost:8080/210/130/nature.png', 'http://localhost:8080/250/120/nature.png'] }
    ]
  }
});

サンプル

// 定義済みスタンプのドロップダウンを無効にします。
var viewer = new DsPdfViewer("#root", {
  stamp: {
    stampCategories: false
  }
});

PDF編集機能を有効するに使用される外部WebAPIサービスへのURL。

サンプル

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

サンプル

永続的な接続用のデバッグログをオンにします。

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

Signalrクライアントを使用した永続的な接続に使用されるログレベル。メモ：SignalrクライアントのASP.NETバージョンは、「トレース」ログレベルのみをサポートします。

キーボードショートカットの定義。使用可能な組み込みアクションツールは次の通りです。"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"。

サンプル

キーボード ショートカット「Ctrl +」をオーバーライドします。

var viewer = new DsPdfViewer("#root", {
 shortcuts: {
 107: {
 ctrl: true,
 tool: function(event) {
 DsPdfViewer.findControl("#root").zoomValue += 10;
 event.preventDefault();
 }
 }
 }
});

サンプル

すべてのデフォルトのショートカットを削除します。

var viewer = new DsPdfViewer("#root");
viewer.options.shortcuts = {};

サンプル

スペースキーが押されたときのグラブを無効にします。

viewer.options.shortcuts["32"] = () => { };

サンプル

Ctrl+YとCtrl+Z を再定義して無効にします。

var viewer = new DsPdfViewer("#viewer", {
 shortcuts: {
 "Z": {
 ctrl: true,
 tool: function(e) { }
 },
 "Y": {
 ctrl: true,
 tool: function(e) { }
 }
 }
});

サンプル

「P」ショートカットをholdToPanアクションにバインドし、Ctrl+Pショートカットは「print」アクションのままにします。

viewer.options.shortcuts["P"] = [{ ctrl: true, tool: "print" }, { tool: "holdToPan" }];

サンプル

カスタムショートカットを作成します。

viewer.options.shortcuts["E"] = {
 ctrl: true,
 alt: true,
 tool: function(e) { alert("Ctrl+Alt+E pressed."); }
};