ViewerOptions クラス

PDFビューワオプションのクラス。

階層

  • ViewerOptions

プロパティ

allowedTools: { annotationEditor?: string[] | "all" | "annotations" | "fields"; formEditor?: string[] | "all" | "annotations" | "fields"; viewer?: string[] | "all" | "annotations" | "fields" } = ...

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

既定値

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

サンプル

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

型宣言

  • オプション annotationEditor?: string[] | "all" | "annotations" | "fields"
  • オプション formEditor?: string[] | "all" | "annotations" | "fields"
  • オプション viewer?: string[] | "all" | "annotations" | "fields"
baseUrl?: string = ""

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

サンプル

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

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

既定値

true

サンプル

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

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

既定値

「resources/bcmaps/」

サンプル

var viewer = new DsPdfViewer("#root", { cMapUrl: "../data/cmaps/" } );
caret?: boolean | { allowForPan: boolean; caretBlinkTime: number; caretStopBlinkTime: number; color: string; width: number } = ...

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

説明

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} } );
coordinatesOrigin?: "TopLeft" | "BottomLeft" = 'TopLeft'

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

既定値

TopLeft

サンプル

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

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

既定値

1

サンプル

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

このオプションを使用して、デフォルトの 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>'
}
});

型宣言

  • [iconKey: string]: Element | string
disableFeatures?: ViewerFeatureName[]

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

サンプル

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

サンプル

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

true に設定すると、PDF ドキュメント内のナビゲーション中にブラウザ履歴が無効になります。

サンプル

var viewer = new DsPdfViewer(selector, {
disableHistory: true
});
disablePageLabels?: boolean = false

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

サンプル

var viewer = new DsPdfViewer("#root", { disablePageLabels: true } );
documentListUrl: string | DocumentListItem[] = "/documents"

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);
});
editorDefaults: { checkBoxButton?: Partial<ButtonWidget>; circleAnnotation?: Partial<CircleAnnotation>; combTextField?: Partial<TextWidget>; comboChoice?: Partial<ChoiceWidget>; dotHandleSize?: number; fileAttachmentAnnotation?: Partial<FileAttachmentAnnotation>; fontNames?: { name: string; value: string }[]; freeTextAnnotation?: Partial<FreeTextAnnotation>; hideFloatingBar?: boolean; highlightAnnotation?: Partial<HighlightAnnotation>; inkAnnotation?: Partial<InkAnnotation>; lastValueKeys?: string[]; lineAnnotation?: Partial<LineAnnotation>; linkAnnotation?: Partial<LinkAnnotation>; listBoxChoice?: Partial<ChoiceWidget>; moveHandleSize?: number; passwordField?: Partial<TextWidget>; polyLineAnnotation?: Partial<PolyLineAnnotation>; polygonAnnotation?: Partial<PolygonAnnotation>; popupAnnotation?: Partial<PopupAnnotation>; printResolution?: number; pushButton?: Partial<ButtonWidget>; radioButton?: Partial<ButtonWidget>; redactAnnotation?: Partial<RedactAnnotation>; rememberLastValues?: boolean; resetButton?: Partial<ButtonWidget>; resizeHandleSize?: number; richMediaAnnotation?: Partial<RichMediaAnnotation>; signatureField?: Partial<SignatureAnnotation>; soundAnnotation?: Partial<SoundAnnotation>; squareAnnotation?: Partial<SquareAnnotation>; squigglyAnnotation?: Partial<SquigglyAnnotation>; stampAnnotation?: Partial<StampAnnotation>; standardFontDataUrl?: string; stickyNote: { color?: string; contents?: string }; strikeOutAnnotation?: Partial<StrikeOutAnnotation>; submitButton?: Partial<ButtonWidget>; textAnnotation?: Partial<TextAnnotation>; textArea?: Partial<TextWidget>; textField?: Partial<TextWidget>; underlineAnnotation?: Partial<UnderlineAnnotation> } = ...

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

サンプル

// デフォルトの付箋とテキスト注釈の色を赤に変更します。
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'
});

型宣言

  • オプション checkBoxButton?: Partial<ButtonWidget>

    チェックボックスボタンウィジェットのデフォルトのプロパティ。

  • オプション circleAnnotation?: Partial<CircleAnnotation>

    円注釈のデフォルトのプロパティ。

  • オプション combTextField?: Partial<TextWidget>

    コンボテキストフィールドウィジェットのデフォルトのプロパティ。

  • オプション comboChoice?: Partial<ChoiceWidget>

    コンボ選択ウィジェットのデフォルトのプロパティ。

  • オプション dotHandleSize?: number

    ドットハンドルのサイズ(ピクセル単位)。 吹き出しポイントに使用されます。

    既定値

    8

    サンプル

    var viewer = new DsPdfViewer("#root", {
    editorDefaults: {
    dotHandleSize: 20
    },
    supportApi: { apiUrl: 'support-api/gc-pdf-viewer', webSocketUrl: false }
    });
  • オプション fileAttachmentAnnotation?: Partial<FileAttachmentAnnotation>

    添付ファイル注釈のデフォルトのプロパティ。

  • オプション fontNames?: { name: string; value: string }[]

    使用可能なフォント名の配列。

    既定値

    [ { 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' } ]

    サンプル

    var viewer = new DsPdfViewer("#root", {
    editorDefaults: { fontNames: [{value: 'Arial', name: 'Arial'}, {value: 'Verdana', name: 'Verdana'}] },
    supportApi: { apiUrl: 'support-api/gc-pdf-viewer', webSocketUrl: false }
    });
  • オプション freeTextAnnotation?: Partial<FreeTextAnnotation>

    フリーテキスト注釈のデフォルトのプロパティ。

  • オプションl hideFloatingBar?: boolean

    エディタモードで追加のフローティングバーを表示しないには、この設定を true に設定します。

    サンプル

    var viewer = new DsPdfViewer("#root", {
    editorDefaults: { hideFloatingBar: true },
    supportApi: { apiUrl: 'support-api/gc-pdf-viewer', webSocketUrl: false }
    });
  • オプション highlightAnnotation?: Partial<HighlightAnnotation>

    ハイライト注釈のデフォルトのプロパティ。

  • オプション inkAnnotation?: Partial<InkAnnotation>

    インク注釈のデフォルトのプロパティ。

  • オプション lastValueKeys?: string[]

    最後の値のキー。

    既定値

    ["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"]

    サンプル

    // borderStyle プロパティのみを追加します。
    var viewer = new DsPdfViewer("#root", { editorDefaults: { rememberLastValues: true, lastValueKeys: ["borderStyle"] } });
  • オプション lineAnnotation?: Partial<LineAnnotation>

    線注釈のデフォルトのプロパティ。

  • オプション linkAnnotation?: Partial<LinkAnnotation>

    リンク注釈のデフォルトのプロパティ。

  • オプション listBoxChoice?: Partial<ChoiceWidget>

    リストボックスウィジェットのデフォルトのプロパティ。

  • オプション moveHandleSize?: number

    ハンドルサイズをピクセル単位で移動します。

    既定値

    14

    サンプル

    var viewer = new DsPdfViewer("#root", {
    editorDefaults: {
    moveHandleSize: 40
    },
    supportApi: { apiUrl: 'support-api/gc-pdf-viewer', webSocketUrl: false }
    });
  • オプション passwordField?: Partial<TextWidget>

    パスワードフィールドウィジェットのデフォルトのプロパティ。

  • オプション polyLineAnnotation?: Partial<PolyLineAnnotation>

    ポリライン注釈のデフォルトのプロパティ。

  • オプション polygonAnnotation?: Partial<PolygonAnnotation>

    多角形注釈のデフォルトのプロパティ。

  • オプション popupAnnotation?: Partial<PopupAnnotation>

    ポップアップ注釈のデフォルトのプロパティ。

  • オプション printResolution?: number

    「printResolution」 オプションは、印刷のための解像度(1インチあたりのドット数 - DPI)を指定することができます。PDFドキュメントを印刷する際、このオプションは生成される画像の品質と詳細度を決定します。通常、DPI 値が高いほど、印刷出力は詳細になりますが、メモリ使用量も大きくなる可能性があります。

    既定値

    指定しない場合、デフォルト値は 150 DPIです。

    サンプル

    // 例: 印刷の解像度を 300 DPI に設定します。
    var viewer = new DsPdfViewer("#root", {
    printResolution: 300
    });
  • オプション pushButton?: Partial<ButtonWidget>

    プッシュボタンウィジェットのデフォルトのプロパティ。

  • オプション radioButton?: Partial<ButtonWidget>

    ラジオボタンウィジェットのデフォルトのプロパティ。

  • オプション redactAnnotation?: Partial<RedactAnnotation>

    墨消し注釈のデフォルトのプロパティ。

  • オプション rememberLastValues?: boolean

    rememberLastValues が true (または未定義) に設定されている場合、最後に使用されたプロパティ値が新しい注釈のデフォルト値として使用されます。

    既定値

    undefined

    サンプル

    // 最後に使用したプロパティ値をデフォルトとして使用しません。
    var viewer = new DsPdfViewer("#root", { editorDefaults: { rememberLastValues: false } });
  • オプション resetButton?: Partial<ButtonWidget>

    リセットボタンウィジェットのデフォルトのプロパティ。

  • オプション resizeHandleSize?: number

    ハンドルサイズをピクセル単位で変更します。

    既定値

    8

    サンプル

    var viewer = new DsPdfViewer("#root", {
    editorDefaults: {
    resizeHandleSize: 20,
    moveHandleSize: 40
    },
    supportApi: { apiUrl: 'support-api/gc-pdf-viewer', webSocketUrl: false }
    });
  • オプション richMediaAnnotation?: Partial<RichMediaAnnotation>

    リッチメディア注釈のデフォルトのプロパティ。

  • オプション signatureField?: Partial<SignatureAnnotation>

    署名フィールドウィジェットのデフォルトのプロパティ。

  • オプション soundAnnotation?: Partial<SoundAnnotation>

    音声注釈のデフォルトのプロパティ。

  • オプション squareAnnotation?: Partial<SquareAnnotation>

    四角形注釈のデフォルトのプロパティ。

  • オプション squigglyAnnotation?: Partial<SquigglyAnnotation>

    波線注釈のデフォルトのプロパティ。

  • オプション stampAnnotation?: Partial<StampAnnotation>

    スタンプ注釈のデフォルトのプロパティ。

  • オプション standardFontDataUrl?: string

    標準フォントファイルが配置される URL。末尾スラッシュを含めます。

    サンプル

    // 相対 URL の例:
    var viewer = new DsPdfViewer("#root", { standardFontDataUrl: "resources/standard_fonts/" });

    // 絶対 URL の例:
    var viewer = new DsPdfViewer("#root", { standardFontDataUrl: "http://localhost:8080/resources/standard_fonts/" });
  • stickyNote: { color?: string; contents?: string }

    付箋のデフォルトのプロパティ。

    • オプション color?: string
    • オプション contents?: string
  • オプション strikeOutAnnotation?: Partial<StrikeOutAnnotation>

    取り消し線注釈のデフォルトのプロパティ。

  • オプション submitButton?: Partial<ButtonWidget>

    送信ボタンウィジェットのデフォルトのプロパティ。

  • オプション textAnnotation?: Partial<TextAnnotation>

    テキスト注釈のデフォルトのプロパティ。

  • オプション textArea?: Partial<TextWidget>

    テキストエリアウィジェットのデフォルトのプロパティ。

  • オプション textField?: Partial<TextWidget>

    テキストフィールドウィジェットのデフォルトのプロパティ。

  • オプション underlineAnnotation?: Partial<UnderlineAnnotation>

    下線注釈のデフォルトのプロパティ。

enableXfa?: boolean = true

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

既定値

デフォルト値Trueです。

サンプル

// XFAフォームの描画をオフにします。
var viewer = new DsPdfViewer(selector, { enableXfa: false });
externalLinkTarget?: "none" | "blank" | "self" | "parent" | "top"

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

既定値

「none」

サンプル

var viewer = new DsPdfViewer("#root", { externalLinkTarget: "blank" } );
fieldsAppearance: { checkBoxButton?: FieldAppearanceRenderingType; pushButton?: FieldAppearanceRenderingType; radioButton?: FieldAppearanceRenderingType } = ...

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

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

型宣言

file?: any = ""

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

サンプル

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

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

サンプル

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'); }
}
});
friendlyFileName?: string = ""

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

サンプル

viewer.options.friendlyFileName = "myFileName.pdf";
viewer.applyOptions();
hideAnnotationPopups?: boolean | "None" | AnnotationTypeName | "All"

このオプションを使用して、注釈のポップアップを非表示にします。可能な値は次のとおりです。['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"] });
hideAnnotationTypes?: boolean | "None" | "All" | AnnotationTypeName[] = ...

「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'] };
ignoreInitialView?: boolean = false

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

既定値

false

サンプル

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

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;
},
}
keepFileData: boolean = 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');
language?: string

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

サンプル

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

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

既定値

20000

サンプル

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

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

サンプル

ログを有効にします。

var viewer = new DsPdfViewer('#root', { logLevel: 'Trace' } );
maxCanvasPixels?: number

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

既定値

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

onBeforeCloseContextMenu?: Function

この関数は、コンテキストメニューが非表示になりそうなときに呼び出されます。コンテキストメニューアクションを閉じないようにする場合は、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;
};
onBeforeOpenContextMenu?: Function

この関数は、コンテキストメニューが表示になりそうなときに呼び出されます。この関数を使用して、コンテキストメニューをカスタマイズできます。コンテキストメニューアクションを開かないようにする場合は、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;
};
onInitialized?: ((viewer: any) => void)

型宣言

    • (viewer: any): void
    • onInitializedハンドラーは、ビューワがインスタンス化された直後に呼び出されます。

      サンプル

      var viewer = new DsPdfViewer("#root", {
      onInitialized: (viewer)=> {
      // ビューワの初期化コードを配置します。
      }
      });

      パラメータ

      • viewer: any

      戻り値 void

openParameters?: OpenParameters

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

サンプル

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

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

サンプル

viewer.options.password = "abc123";
viewer.open("protected.pdf");
renderInteractiveForms: boolean = true

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

サンプル

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

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

サンプル

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

返信ツールの設定。

既定値

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

  • 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();
requireTheme?: null | "themes/dark-yellow" | "light" | "dark" | "viewer" | "light-blue" | "gc-blue"

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

サンプル

var viewer = new DsPdfViewer(selector, {
* requireTheme: "light"
});
restoreViewStateOnLoad?: boolean | { trackFile?: boolean; trackFullScreen?: boolean; trackMouseMode?: boolean; trackPageRotation?: boolean; trackScale?: boolean; trackSidebar?: boolean; trackSidebarWidth?: boolean; trackTheme?: boolean; trackViewMode?: boolean } = ...

ビューの変更を追跡し、次のページをロードする時に前の状態を復元します。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 } });
secondToolbar?: { render?: ((toolbarKey: string) => null | any[]) }

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

型宣言

  • オプション render?: ((toolbarKey: string) => null | any[])
      • (toolbarKey: string): null | any[]
      • カスタムの 2 番目のツールバーコントロールを描画するためにハンドラーメソッド。このメソッドは、JSX.Element コントロールの配列または null を返す必要があります。

        パラメータ

        • toolbarKey: string

        戻り値 null | any[]

sharing?: { disallowUnknownUsers?: boolean; knownUserNames?: string[]; presenceColors?: { [userName: string]: string }; presenceMode: boolean | "on" | "off" | "others" }

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

サンプル

// サーバーに不明なユーザー名を禁止します。
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"
});

型宣言

  • オプション disallowUnknownUsers?: boolean

    Server API で認識されていないユーザーまたは knownUserNames 設定で指定されていないユーザーとドキュメントを共有しないようにします。

    既定値

    false

  • オプション knownUserNames?: string[]

    既知のユーザー名。指定した場合、これらのユーザー名は共有ダイアログに候補として表示されます。それ以外の場合、共有ダイアログにはサポート API からロードされたユーザー名が表示されます。

  • オプション presenceColors?: { [userName: string]: string }

    指定した場合、これらの色はプレゼンスインジケーターの色として使用されます。 key - ユーザー名、value = 色。

    サンプル

    var viewer = new DsPdfViewer("#root", {
    sharing: {
    knownUserNames: ['Jame Smith', 'Lisa'],
    presenceColors: { 'Anonymous': '#999999', 'Jame Smith': 'red', 'Lisa': 'blue' }
    },
    supportApi: "api/pdf-viewer"
    });
    • [userName: string]: string
  • presenceMode: boolean | "on" | "off" | "others"

    コラボレーションユーザーのプレゼンスのタイプを決定します。

    • 「on」 - アクティブなユーザーを含むすべてのユーザーのプレゼンスが表示されます。
    • 「others」 - アクティブなユーザーを除くすべてのユーザーが表示されます。
    • 「off」 - プレゼンスが表示されません。

    既定値

    「on」

    サンプル

    // プレゼンスモードを「others」に変更します。
    var viewer = new DsPdfViewer("#root", {
    sharing: {
    presenceMode: 'others'
    },
    supportApi: "api/pdf-viewer"
    });

    サンプル

    // プレゼンスインジケーターをオフにします。
    var viewer = new DsPdfViewer("#root", {
    sharing: {
    presenceMode: 'off'
    },
    supportApi: "api/pdf-viewer"
    });
shortcuts: { [keyCode: string]: KeyboardShortcutDefinition | KeyboardShortcutDefinition[] } = ...

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

型宣言

showContextMenuOnSelection?: boolean | "Auto" | "On" | "Off" = "Auto"

テキストが選択されたときのコンテキストメニューの表示を制御します。

  • 「Auto」: デバイスの種類に基づいてコンテキストメニューを表示するかどうかを自動的に決定します。
  • 「On」: テキストが選択されるときは常にコンテキストメニューを表示します。
  • 「Off」: テキストが選択されるときはコンテキストメニューを表示しません。デフォルト値は「Auto」です。システムにマウスが接続されている場合、「Auto」は「Off」と同様に動作します。マウスが接続されていないデバイス(携帯電話、タブレット)では、「Auto」は「On」と同様に動作します。

サンプル

// テキストを選択したときに常にコンテキストメニューが表示されるようにビューワを設定します。
var viewer = new DsPdfViewer(selector, {
showContextMenuOnSelection: "On"
});

サンプル

// テキストを選択したときにコンテキストメニューが表示されないようにビューワを設定します。
var viewer = new DsPdfViewer(selector, {
showContextMenuOnSelection: "Off"
});
signTool?: SignToolSettings

署名ツールの設定。

@example
```javascript
var viewer = new DsPdfViewer(selector, {
signTool: {
title: 'Sign document',
penColor: '#ff0000',
penWidth: 5
}
});
snapAlignment: boolean | { center: boolean | { horizontal: boolean; vertical: boolean }; margin: number | boolean | { horizontal: number | boolean; vertical: number | boolean }; tolerance: number | { horizontal: number | false; vertical: number | false } }

位置合わせ機能を使用して設定をカスタマイズできます。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 };
stamp: { dpi?: number; selectedImageUrl?: string; stampCategories?: boolean | StampCategory[] }

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

既定値

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

型宣言

  • オプション dpi?: number

    オプション。DPIが指定されていないスタンプ画像のデフォルトの画像解像度(DPI)。

  • オプション selectedImageUrl?: string

    オプション。選択した画像の URL。

  • オプション stampCategories?: boolean | StampCategory[]

    スタンプのカテゴリ。

supportApi?: string | SupportApiSettings

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

サンプル

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

サンプル

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

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

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

サンプル

// テキストマークアップサブメニューを非表示にします。
var viewer = new DsPdfViewer(selector, {
textMarkupContextMenu: false
});

サンプル

// 利用可能な色。

var viewer = new DsPdfViewer(selector, {
textMarkupContextMenu: { colors: [{value: "#ff0000", displayName: "Red"}, {value: "#000000", displayName: "Black"}] }
});

サンプル

// テキストマークアップのコンテキストメニューで、さまざまなテキストマークアップに利用可能な色をカスタマイズします。
var viewer = new DsPdfViewer(selector, {
textMarkupContextMenu: {
colors: {
highlight: [
{value: "#ff0000", displayName: "Red"},
{value: "#000000", displayName: "Black"}
],
underline: [
{value: "#ff0000", displayName: "Red"}
]
}
}
});
@example
```javascript
// Hide color groups in the text markup sub-menu:
textMarkupContextMenu: { colors: [] }
theme: string | false = "themes/viewer"

テーマオプションを使用して、デフォルトのビューワテーマを変更します。組み込みのテーマのロードを無効にする場合、このオプションを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 } );
themes: string[] = ...

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

サンプル

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

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

  • 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");
useFloatingSearchBar: boolean = true

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

既定値

デフォルト値Trueです。

サンプル

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

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

既定値

false

サンプル

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

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

サンプル

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

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

サンプル

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

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

サンプル

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

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

サンプル

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

型宣言

  • always: boolean
  • ctrlKey: boolean
  • metaKey: boolean
zoomOptions?: { dropdownZoomFactorValues?: number[]; maxZoom?: number; minZoom?: number }

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

サンプル

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

型宣言

  • オプション dropdownZoomFactorValues?: number[]

    ツールバーのズームコントロールドロップダウンに表示するズーム係数の配列を定義します。

    既定値

    [0.5, 1, 1.5, 2, 3]

  • オプション maxZoom?: number

    最大ズーム倍率を定義します。

    既定値

    3 (300%)

  • オプション minZoom?: number

    最小ズーム倍率を定義します。

    既定値

    0.25 (25%)