静的 findホスト要素またはホスト要素セレクターを使用してビューワインスタンスを取得します。
var viewer = DsPdfViewer.findControl("#root");指定されたページに注釈を追加します。
// ドキュメントを開いたときに、最初のページに四角形注釈を追加します。
viewer.onAfterOpen.register(function() {
viewer.addAnnotation(0, {
annotationType: 5, // AnnotationTypeCode.SQUARE
subtype: "Square",
borderStyle: { width: 5, style: 1 },
color: [0, 0, 0],
interiorColor: [255, 0, 0],
rect: [0, 0, 200, 200]
});
});// 次の例では、「field1」という名前のフィールドをコピーして、プログラムで2ページ目に配置する方法を示します。
// field1という名前のフィールドウィジェットを検索します。
var resultData = await viewer.findAnnotation("field1", {findField: 'fieldName'});
// フィールドを複製します。
var clonedField = viewer.cloneAnnotation(resultData[0].annotation);
// フィールド名プロパティを変更します。
clonedField.fieldName = "field1Copy";
// 複製されたフィールドを2ページ目に追加します。
viewer.addAnnotation(1, clonedField);// ドキュメントを開いたときに、最初のページにファイル添付注釈を追加します。
viewer.onAfterOpen.register(function() {
viewer.addAnnotation(0, {
annotationType: 17, // AnnotationTypeCode.FILEATTACHMENT
subtype: "FileAttachment",
file: {
filename: 'attachment.png',
content: new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,45,0,0,0,32,8,6,0,0,0,134,132,241,68,0,0,0,4,103,65,77,65,0,0,177,143,11,252,97,5,0,0,7,56,73,68,65,84,88,9,205,88,11,112,92,85,25,254,255,115,179,129,148,36,155,190,147,187,91,228,49,64,25,99,181,105,169,117,176,149,34,99,113,80,65,165,162,118,168,15,44,3,42,99,55,125,8,29,59,221,90,29,132,38,187,43,56,162,22,5,161,206,240,24,64,40,130,15,156,138,226,3,147,14,118,74,219,41,157,102,138,238,166,155,180,105,246,238,210,144,108,238,158,223,239,44,189,233,110,186,217,172,54,64,239,204,206,61,143,255,241,157,255,156,255,251,207,93,166,183,243,185,185,211,55,125,246,69,239,177,136,166,176,150,92,86,185,201,190,244,238,30,10,47,113,79,199,45,159,142,114,41,221,192,93,125,65,62,203,183,92,136,174,99,226,185,144,57,171,80,14,227,57,22,249,155,102,218,46,110,238,177,195,107,38,191,94,56,95,73,123,194,64,207,220,146,156,81,229,171,217,196,164,110,130,99,31,145,116,144,208,14,210,178,155,20,245,137,102,75,20,53,50,211,249,36,124,53,49,205,133,115,87,72,111,29,146,236,247,142,134,166,31,174,4,176,145,153,16,208,118,52,213,194,108,61,13,144,141,48,248,184,43,58,150,108,245,255,179,28,8,187,189,111,150,178,170,215,65,231,102,44])
},
rect: [0, 0, 20, 20]
});
});注釈を追加するページのインデックス。または、ページインデックスを指定するプロパティ pageIndex を持つオブジェクト。これはオーバーライドをサポートします: addAnnotation({ pageIndex: 1 }, annotation, args)。
追加する注釈オブジェクト。
オプションl args: { skipPageRefresh?: boolean }ページの更新をスキップするなどの追加のオプション引数。
オプション skipアプリケーションのルートディレクトリにあるdocumentslist.jsonファイル（documentListUrlオプションで指定されたURL）で指定された使用可能なドキュメント配列を使用して、ドキュメントリストパネルをビューワに追加します。documentListUrlオプションのエンドポイントでサービスを指定できます。サービスは、利用可能なドキュメント配列を含むJSON文字列を返す必要があります（例：["pdf1.pdf"、 "pdf2.pdf"]）。
documentslist.jsonファイルのコンテンツの例。
["file1.pdf", "file2.pdf"].var viewer = new DsPdfViewer("#root", { documentListUrl: "/documentslist.json" });
viewer.addDocumentListPanel();var viewer = new DsPdfViewer("#root");
// Add document list panel and specify documentListUrl option:
viewer.addDocumentListPanel('/documentslist.json');var viewer = new DsPdfViewer("#root");
// ドキュメントリストパネルを追加し、DATA URIを使用してdocumentListUrlオプションを指定します。
viewer.addDocumentListPanel('data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "Hello doc 2", "title": "title 2"}]');オプション documentListUrl: string | DocumentListItem[]オプション。ドキュメントリストサービスの URL またはドキュメント リスト項目の事前定義されたリスト。。
テキスト注釈返信ツールを有効にします。メモ：既存の返信を編集/削除または追加する機能を有効にするには、SupportApiを構成する必要があります。それ以外の場合は、返信ツールが読み取り専用モードになります。
viewer.addReplyTool('expanded');返信ツールを最初に展開する場合は、「expanded」値を渡します。デフォルト値は「collapsed」です。
共有ドキュメントのリストを含むパネルを追加します。
var viewer = new DsPdfViewer("#root");
viewer.addSharedDocumentsPanel();スタンプ注釈を追加します。
// 外部画像を使用して PDF にグラフィック署名を追加します。
function addStampFromUrl(imageUrl, viewer) {
* fetch(imageUrl)
.then(response => response.blob())
.then(blob => blob.arrayBuffer())
.then(arrayBuffer => {
const fileId = new Date().getTime() + ".png";
const fileName = fileId;
const pageIndex = 0;
const imageData = new Uint8Array(arrayBuffer);
const rect = [0, 0, 200, 200];
viewer.storage.setItem(fileId, imageData);
viewer.addStamp(
imageData,
{
fileId,
fileName,
pageIndex,
rect,
select: false,
subject: "",
rotate: 0,
convertToContent: false
});
});
}
// 使用法::
addStampFromUrl("http://localhost/image.png", viewer);Uint8Array、バイナリ画像データ。
オプション convertオプション fileオプション rotate?: numberオプション select?: booleanオプション subject?: stringtoolbarLayoutに変更を適用するには、このメソッドを呼び出します。
viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
viewer.applyToolbarLayout(); var viewer = new DsPdfViewer(document.querySelector("#viewer"));
viewer.addDefaultPanels();
var toolbar = viewer.toolbar;
var toolbarLayout = viewer.toolbarLayout;
toolbar.addItem({
key: 'custom-add-stamp',
icon: { type: "svg", content: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path style="fill: #205F78;" d="M20.25 12l-2.25 2.25 2.25 2.25-3.75 3.75-2.25-2.25-2.25 2.25-2.25-2.25-2.25 2.25-3.75-3.75 2.25-2.25-2.25-2.25 2.25-2.25-2.25-2.25 3.75-3.75 2.25 2.25 2.25-2.25 2.25 2.25 2.25-2.25 3.75 3.75-2.25 2.25 2.25 2.25z"></path></svg>' },
title: 'Open your document to add a stamp',
checked: false, enabled: false,
action: function () {
alert("Implement your action here.");
},
onUpdate: function (args) {
var hasDoc = viewer.hasDocument && args.state.session.pageCount > 0;
return {
enabled: hasDoc,
checked: false,
title: hasDoc ? 'Add stamp' : 'Open your document to add a stamp'
}
}
});
toolbarLayout.viewer.default.splice(0, 0, "custom-add-stamp");
viewer.applyToolbarLayout();このメソッドは、パラメータ境界で指定された長方形の座標系の原点を変更し、変換された長方形の値を返します。
var pageIndex = 0;
var topLeftBounds = [0, 0, 200, 40];
// topLeftBoundsをTopLeft原点からBottomLeft原点に変換します。
// 最初のページのビューポートを考慮して、結果を
// bottomLeftBounds変数に格納します。
var bottomLeftBounds = viewer.changeBoundsOrigin(pageIndex, topLeftBounds, 'TopLeft', 'BottomLeft');// ビューポートを基準にした注釈の境界を取得します。
const pageIndex = 0;
const viewPort = viewer.getViewPort(pageIndex);
const annotationRect = (await viewer.findAnnotation('10R'))[0].annotation.rect;
const invertedRect = viewer.changeBoundsOrigin(pageIndex, annotationRect, 'BottomLeft', 'TopLeft');
const annotationX1 = invertedRect[0] * viewPort.scale;
const annotationY1 = invertedRect[1] * viewPort.scale;
const annotationX2 = invertedRect[2] * viewPort.scale;
const annotationY2 = invertedRect[3] * viewPort.scale;ページインデックス（0 から始まります）。
境界配列: [x1, y1, x2, y2]
ソース座標系の原点。設定できる値は、「TopLeft」または「BottomLeft」です。
宛先座標系の原点。設定できる値は、「TopLeft」または「BottomLeft」です。
オプション。デフォルトは true です。四角形を正規化します（rect=[x1, y1, x2, y2]であるため、x1、y1）は（x2、y2）よりも小さくなります）。
このメソッドは、yパラメータで指定された y座標の座標系の原点を変更し、変換された値を返します。
var pageIndex = 0;
var y = 0;
// y値をTopLeftからBottomLeft原点に変換します。
// 最初のページからのビューポートを考慮します。
var yBottom = viewer.changeOrigin(pageIndex, y, 'TopLeft', 'BottomLeft');パラメータ注釈によって指定された注釈またはフィールドを複製します。SupportApiが必要です。
// 次の例では、「field1」という名前のフィールドをコピーして、プログラムで2ページ目に配置する方法を示します。
// field1という名前のフィールドウィジェットを検索します。
var resultData = await viewer.findAnnotation("field1", {findField: 'fieldName'});
// フィールドを複製します。
var clonedField = viewer.cloneAnnotation(resultData[0].annotation);
// フィールド名プロパティを変更します。
clonedField.fieldName = "field1Copy";
// 複製されたフィールドを2ページ目に追加します。
viewer.addAnnotation(1, clonedField);複製する注釈。
提供された PaintedBoxInfo 配列に基づいて四辺形の点を収集します。
このメソッドは、PaintedBoxInfo オブジェクトの配列を受け取ります。各オブジェクトには、PDF ページに描画されたボックスに関する情報が含まれます。選択または強調表示されたテキストフラグメントの外側の長方形の座標と四辺形の点を計算します。PDF 仕様に従って、座標の原点は左下隅にあります。
quadPoints 配列は次のようにソートされます：[{ x: minX, y: maxY }, { x: maxX, y: maxY }, { x: minX, y: minY }, { x: maxX, y: minY }]
PDF ページに描画されたボックスを表す PaintedBoxInfo オブジェクトの配列。
確認ダイアログを表示します。
const confirmResult = await viewer.confirm("Apply changes?", "info", "Confirm action", ["Yes", "No", "Cancel"]);
if (confirmResult === "Yes") {
// ここにコードを入れてください。
} else if (confirmResult === "No") {
// ここにコードを入れてください。
} else {
// ここにコードを入れてください。
}オプション confirmationText: string | Elementオプション level: "error" | "info" | "warning"オプション title: stringオプション buttons: ConfirmButton[]PDF の長方形または PDF のポイント座標を絶対ウィンドウ座標に変換します。
指定された PDF 座標に対応するウィンドウ座標の配列。
座標形式が正しくない場合はエラーになります。[x, y] または [x1, y1, x2, y2] のいずれかが期待されます。
PDF ページのインデックス。
座標の配列 [x1, y1, x2, y2] または [x, y]。ここで、(x1, y1) は左下隅を表し、(x2, y2) は右上隅を表します。
実行時間の長い操作を開始し、操作の実行中に進行状況ウィンドウを表示します。
オプション settings: TaskSettings開いたドキュメント内に注釈を検索します。検索結果で解決されるpromiseを返します。
// 「2R」IDの注釈を検索します。
viewer.findAnnotations("2R").then(function(dataArray) {
if(dataArray[0])
alert(`Annotation ${dataArray[0].annotation.id} found on page with index ${dataArray[0].pageIndex}.`);
else
alert('Annotation not found.');
});// field1という名前のすべてのフィールドを検索します。
viewer.findAnnotations("field1", {findField: 'fieldName', findAll: true}).then(function(dataArray) {
});クエリを検索します。
オプション findParams: { findAll?: boolean; findField?: string; pageIndexConstraint?: number }パラメータを見つけます。デフォルトでは、注釈はページの制約なしにIDで検索されます。
オプション findオプション findオプション pageブラウザ ウィンドウを基準としたページ ビューの位置を返します。
var pageLocation = viewer.getPageLocation(0);
console.log('The first page location is ' + location.x + ', ' + location.y);// ID「10R」の注釈の上に赤い長方形を描画します。
(async function(viewer, annotationId) {
const pageLocation = viewer.getPageLocation(0), viewPort = viewer.getViewPort(0),
scale = viewPort.scale, viewBox = viewPort.viewBox;
const rect = (await viewer.findAnnotation(annotationId))[0].annotation.rect;
const x1 = rect[0] * scale + pageLocation.x, x2 = rect[2] * scale + pageLocation.x,
y1 = (viewBox[3] - rect[3]) * scale + pageLocation.y, y2 = (viewBox[3] - rect[1]) * scale + pageLocation.y;
const div = document.createElement('div');
div.style.position = 'absolute';
div.style.left = `${x1}px`; div.style.top = `${y1}px`;
div.style.width = `${x2 - x1}px`; div.style.height = `${y2 - y1}px`;
div.style.border = '1px solid red';
document.body.appendChild(div);
})(viewer, "10R");// マウス クリックでテキスト注釈を追加します。
document.addEventListener("click", (e) => {
const target = (e["path"] || (e["composedPath"] && e["composedPath"]()) || [])[0] || e.target, page = target.closest(".page");
if(target.closest(".gc-annotation"))
return;
if(page) {
const pageIndex = page.getAttribute("data-index") * 1, pageLoc = viewer.getPageLocation(pageIndex), scale = viewer.getViewPort(pageIndex).scale;
const x = (e.clientX - pageLoc.x) / scale, y = (e.clientY - pageLoc.y) / scale;
const rect = viewer.changeBoundsOrigin(pageIndex, [x, y, x + 20, y + 20], "TopLeft", "BottomLeft");
viewer.addAnnotation(pageIndex, { annotationType: 1 , contents: "Text annotation content", rect });
}
});ページサイズを返します。デフォルトでは、スケールなしでサイズを返します。スケールされた値を取得する場合、includeScale引数にtrueを渡します。
// 最初のページサイズを取得します。
var pageSize = viewer.getPageSize(0);ページインデックス（0 から始まります）。
オプション includeScale: booleanオプション。 trueの場合、メソッドはスケーリングされた値を返します。
ページ上の注釈のタブの順序を設定します。ページ上の注釈に使用されるタブの順序を指定する名前。可能な値は次のとおりです。R-行の順序。 C-列の順序。S-構造の順序（PDFビューワではサポートされていません）。A-注釈の順序。この順序は、注釈コレクション内の注釈の順序を指します。W-ウィジェットの順序。この順序は「注釈」の順序と同じですが、2つのパスが作成されます。最初のパスはウィジェットの注釈のみを選択し、2番目のパスは他のすべての注釈を選択します。
現在のユーザーが使用できる共有ドキュメントのリストを返します。
var sharedDocuments = await viewer.getSharedDocuments();ドキュメントに使用された署名に関する情報を取得します。
// 例：現在のドキュメントが署名されているかどうかを確認し、署名に関する情報を表示します。
var viewer = DsPdfViewer.findControl("#root");
const signatureInfo = await viewer.getSignatureInfo();
if(signatureInfo.signed) {
const signatureValue = signatureInfo.signedByFields[0].signatureValue;
const signerName = signatureValue.name;
const location = signatureValue.location;
const signDate = viewer.pdfStringToDate(signatureValue.modificationDate);
alert("The document was signed using digital signature. Signed by: " + signerName + ", location: " + location + ", sign date: " + signDate.toString());
} else {
alert("The document is not signed.");
}PDFページのビューポートの情報を返します。
オブジェクトは次のフィールドを含みます。 { viewBox: // 元のページ境界。 [x1, y1, x2, y2]. // ページの元の幅または高さを確認したい場合は、viewBox値を使用して取得できます。 // var pageWidth = viewBox[2] - viewBox[0]; // var pageHeight = viewBox[3] - viewBox[1]; width: // ユーザースペースにページの現在の幅（スケールと回転の値が適用されます）, height: // ユーザースペースにページの現在の高さ（スケールと回転の値が適用されます） scale: // アクティブなスケール値の回転 // アクティブ回転値 }
// 最初のページのビューポートオブジェクトを取得します。
var viewPort = viewer.getViewPort(0);ページインデックス（0 から始まります）。
ビューワのすべての視覚的な子要素がレイアウト用に適切に更新されることを確認します。このメソッドを呼び出して、ビューワのサイズが動的に変更されたときに内部コンテンツのサイズを更新します。
viewer.eventBus.on("viewersizechanged", function() {
// ビューワの高さを内側ページ（余白を含め）のコンテンツの高さと同じにします。
document.querySelector("#root").style.height = viewer.pageCount * 50 + viewer.pageCount * viewer.getPageSize(0, true).height + "px";
// レイアウトを無効化します。
viewer.invalidate();
});このメソッドは、pageIndexパラメータによって指定されたインデックスでページをロードし、ページをビューにスクロールします。
ページが完全にロードされ（テキストと注釈レイヤを含む）、スクロールされたときに解決されるpromiseのブール値のを返します。ページが存在しない場合、またはエラーが発生した場合、promiseはfalse値で解決されます。それ以外の場合、promiseはtrue値で解決されます。
// 最初のページをロードして表示します。
viewer.loadAndScrollPageIntoView(0);宛先ページのインデックス。
オプション destArray: any[]宛先情報を含む配列 : destArray[0] // nullにすることができます。PDFページ参照（内部使用のみ）。. destArray[1] // 宛先ビュータイプ名が含まれます： { name: 'XYZ' } - 左上隅のポイントおよび拡大縮小率として指定された宛先（ページの左下隅は座標系（0、0）の原点です）。 { name: 'Fit' } - ページをウィンドウに合わせます { name: 'FitH' } - ページの幅をウィンドウに合わせます { name: 'FitV' } - ページの高さをウィンドウに合わせます { name: 'FitR' } - 左上隅と右下隅のポイントで指定された長方形をウィンドウに合わせます { name: 'FitB' } - ページに表示されるすべての要素を含む長方形をウィンドウに合わせます { name: 'FitBH' } - 境界ボックスの幅をウィンドウに合わせます { name: 'FitBV' } - 境界ボックスの高さをウィンドウに合わせます destArray[2] // x位置オフセット destArray[3] // y位置オフセット (メモ：ページの左下隅は座標系（0、0）の原点です) destArray[4] // nullにすることができ、FitRの場合は境界ボックスの幅を含み、XYZの場合はスケールを含みます、 destArray[5] // nullにすることができ、FitRの場合は境界ボックスの高さを含みます。
オプション scrollIntoViewOptions: boolean | ScrollPageIntoViewOptions（オプション）スクロールオプション。destArray パラメータが指定されていない場合に使用されます。true の場合、要素の上部はスクロール可能な祖先の表示領域の上部に揃えられます。scrollIntoViewOptions: {block: "start"、inline: "nearest"} に対応します。これはデフォルト値です。false の場合、要素の下部はスクロール可能な祖先の表示領域の下部に揃えられます。scrollIntoViewOptions: {block: "end", inline: "nearest"} に対応します。
更新されたドキュメントリストをドキュメントリストパネルにロードします。
viewer.loadDocumentList();// DATA URIを使用してドキュメントリストをロードします。
viewer.loadDocumentList('data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "doc 2", "title": "title 2"}]');オプション documentListUrl: string | DocumentListItem[]オプション。ドキュメントリストサービスの URL またはドキュメント リスト項目を含む配列。
更新された共有ドキュメントのリストを共有ドキュメントパネルにロードします。
viewer.loadSharedDocuments();編集しないように注釈をロックします。
注釈ID。
特定のページインデックスに対して、注釈レイヤーをダーティとしてマークします。このメソッドは、指定されたページインデックスの注釈データが変更されたために、ページビューで注釈レイヤーを再描画する必要性をトリガーします。
// 例: 最初のページと 3 番目のページの注釈レイヤーをダーティとしてマークします。
viewer.markAnnotationLayerDirty([0, 2]);注釈レイヤーがダーティとしてマークされるページインデックス。
新しい空白のドキュメントを作成して開きます。SupportApiが必要です。
// 「test.pdf」という名前の新しい空白のドキュメントを作成し、
// アクティブなドキュメントが変更されている場合は確認ダイアログを表示します。
viewer.newDocument({ fileName: "test.pdf", confirm: true});オプション params: string | { confirm?: boolean; fileName?: string }パラメータオブジェクト：fileName-新しいドキュメントのファイル名、confirm-ドキュメントに変更があるときに確認ダイアログを表示します。
ドキュメントに空白のページを追加します。SupportApiが必要です。
// 新しい空白のページを作成し、2番目の位置に挿入します。
viewer.newPage({pageIndex: 1});オプション params: { height?: number; pageIndex?: number; width?: number }パラメータオブジェクト：width-ページ幅（ポイント単位）、height-ページの高さ（ポイント単位）、pageIndex-ターゲットページインデックス。
オプション height?: numberオプション pageオプション width?: numberPDFドキュメントを開きます。
viewer.open("Documents/HelloWorld.pdf");// Basic認証のヘッダーを指定します。
viewer.open("http://localhost:5005/api/pdf-viewer/GetPdf?file=HelloWorld.pdf", {
headers: {
"Authorization": "Basic " + btoa(unescape(encodeURIComponent("USERNAME:PASSWORD"))),
"CustomHeader": "Custom header value"
}
});オプション file: anyPDFドキュメント（文字列）またはバイナリデータ（Uint8Array）へのURL。
オプション openParameters: OpenParametersパラメータオブジェクトをロードしています。
共有ドキュメントをその ID で開きます。
ドキュメントインデックスを使用して共有ドキュメントを開きます。
async function openSharedDocByIndex(viewer, sharedDocIndex) {
const sharedDocuments = await viewer.getSharedDocuments();
viewer.openSharedDocument(sharedDocuments[sharedDocIndex].documentId);
}
// 最初の共有ドキュメントを開きます。
openSharedDocByIndex(DsPdfViewer.findControl("#viewer"), 0);ドキュメントのファイル名を使用して共有ドキュメントを開きます。同じ名前のドキュメントは複数回に共有することができます。次の例では、指定された fileName を持つ最初に見つかったドキュメントを開きます。
async function openSharedDocByName(viewer, fileName) {
const sharedDocuments = await viewer.getSharedDocuments();
const index = sharedDocuments.findIndex(d=>d.fileName === fileName);
if(index !== -1)
viewer.openSharedDocument(sharedDocuments[index].documentId);
}
// 「financial-report.pdf」という名前の最初の利用可能な共有ドキュメントを開きます。
openSharedDocByName(DsPdfViewer.findControl("#viewer"), "financial-report.pdf");一意のドキュメント識別子。
ドキュメントインデックスを使用して共有ドキュメントを開きます。
2 番目の共有ドキュメントを開きます。
viewer.openSharedDocumentByIndex(1);ドキュメントのファイル名を使用して共有ドキュメントを開きます。同じ名前のドキュメントは複数回に共有することができます。openSharedDocumentByName は、指定された fileName を持つ最初に見つかったドキュメントを開きます。
// 「sample.pdf」という名前の最初の利用可能な共有ドキュメントを開きます。
viewer.openSharedDocumentByName("sample.pdf");注釈をドキュメントから削除します。SupportApiが必要です。
// 最初のページにある「2R」IDの注釈を削除します。
viewer.removeAnnotation(0, '2R');オプションl args: { skipPageRefresh?: boolean }オプション skipPDF ページ参照を使用してページインデックスを解決します。
const openAction = (await viewer.viewerPreferences).openAction;
if(openAction && openAction.dest) {
const pageRef = openAction.dest[0];
const targetPageIndex = await viewer.resolvePageIndex(pageRef);
}変更したPDFドキュメントをローカルディスクに保存します。SupportApiが必要です。
宛先ファイル名を指定します。
viewer.save('Test.pdf');オプション fileName: string宛先ファイル名。
オプション settings: SaveSettings追加の保存設定。
現在の PDF ドキュメントのページを PNG 画像として保存し、結果の画像を圧縮して、結果の zip形式のアーカイブをダウンロードします。 SupportAPI が必要です。
// 現在の PDF ドキュメントのページを PNG 画像として保存し、保存先の zip 形式のファイル名を指定します。
viewer.saveAsImages('Test.zip');// 現在の PDF ドキュメントのページを PNG 画像として保存し、
// 保存先の zip 形式のファイル名を指定します。
viewer.saveAsImages("sample.pdf", { zoomFactor: 1.5 });オプション fileName: stringオプションです。 保存先の zip 形式のアーカイブ ファイル名。
オプション settings: SaveSettings追加の保存設定。
注釈をスクロールして表示します。
// 2ページ目にある注釈をスクロールして表示します。
viewer.scrollAnnotationIntoView(1, annotation);// 注釈を ID ごとにスクロールして表示します。
viewer.scrollAnnotationIntoView("2R");// スムーズスクロール動作を使用して、注釈を ID ごとにスクロールして表示します。
viewer.scrollAnnotationIntoView("2R", { behavior: "smooth" });オプション annotationOrScrollOptions: string | AnnotationBase | ScrollPageIntoViewOptionsオプション scrollOptions: ScrollBehavior | ScrollPageIntoViewOptionsページをスクロールして表示します。
scrollPageIntoView メソッドはバージョン2.3.1以降で非推奨になりました。その代わりに、goToPageメソッドまたはscrollAnnotationIntoViewプロパティを使用します。
オブジェクト。 スクロールパラメータ： pageNumber - 番号 . ページ番号 . destArray - 宛先情報を含む配列 : destArray[0] // nullにすることができます。PDFページ参照（内部使用のみ）。. destArray[1] // 宛先ビュータイプ名が含まれます： { name: 'XYZ' } - 左上隅のポイントおよび拡大縮小率として指定された宛先（ページの左下隅は座標系（0、0）の原点です）。 { name: 'Fit' } - ページをウィンドウに合わせます { name: 'FitH' } - ページの幅をウィンドウに合わせます { name: 'FitV' } - ページの高さをウィンドウに合わせます { name: 'FitR' } - 左上隅と右下隅のポイントで指定された長方形をウィンドウに合わせます { name: 'FitB' } - ページに表示されるすべての要素を含む長方形をウィンドウに合わせます { name: 'FitBH' } - 境界ボックスの幅をウィンドウに合わせます { name: 'FitBV' } - 境界ボックスの高さをウィンドウに合わせます。
contains scale when view name is XYZ,オプション allowオプション dest現在の開いているドキュメントにテキストを検索します。
オプション progressFn: ((progress: { pageCount: null | number; pageIndex: number }) => void)オプション cancel: CancellationToken編集する注釈を選択します。SupportApiが必要です。
// 「2R」IDの注釈を選択します。
viewer.selectAnnotation("2R");// 最後のページにある「9R」IDの注釈を選択します。
viewer.selectAnnotation(viewer.pageCount - 1, "9R");ページインデックス（0 から始まります）または注釈ID。
オプション annotation: string | AnnotationBase注釈IDまたは注釈オブジェクト。
setAnnotationBoundsメソッドを使用して、注釈の位置やサイズを設定します。
// 注釈の場所を左上隅に設定します。
viewer.setAnnotationBounds('1R', {x: 0, y: 0});
// 注釈の場所を左下隅に設定します。
viewer.setAnnotationBounds('1R', {x: 0, y: 0}, 'BottomLeft');
// 注釈サイズを40x40ポイントに設定します。
viewer.setAnnotationBounds('1R', {w: 40, h: 40});
// 注釈の位置をx = 50、y = 50（左上）に設定し、サイズを40 x40ポイントに設定します。
viewer.setAnnotationBounds('1R', {x: 50, y: 50, w: 40, h: 40});注釈オブジェクトまたは注釈ID。
宛先の境界 - x、y、幅、高さはオプションです。
ソース座標系の原点。デフォルトはTopLeftです。
編集後に注釈を選択します。デフォルトはfalseです。
ページの絶対回転を度単位で設定します。有効な値は、0、90、180、および270度です。SupportApiが必要です。
// 最初のページの回転を180度に設定します。
await viewer.setPageRotation(0, 180);ページのサイズを設定します。SupportApiが必要です。
// 最初のページの新しいページサイズを設定します。
viewer.setPageSize(0, { width: 300, height: 500 } );ページ上の注釈のタブの順序を設定します。ページ上の注釈に使用されるタブの順序を指定する名前。可能な値は次のとおりです。R-行の順序。 C-列の順序。S-構造の順序（PDFビューワではサポートされていません）。A-注釈の順序。この順序は、注釈コレクション内の注釈の順序を指します。W-ウィジェットの順序。この順序は「注釈」の順序と同じですが、2つのパスが作成されます。最初のパスはウィジェットの注釈のみを選択し、2番目のパスは他のすべての注釈を選択します。
特定の注釈のアニメーションハイライトを表示し、その後アニメーションで非表示にします。
ハイライトを表示する ID または注釈オブジェクト。
オプション animationDelay: number = 2000オプション。アニメーションを非表示にするまでの遅延 (ミリ秒単位)。最小値は 1000 ミリ秒 (1 秒) です。
オプション color: stringユーザーに対してメッセージを表示します。
// 警告メッセージを表示します。
viewer.showMessage("Warning message text", "", "warn");[署名の追加]ダイアログを表示します。SupportApiが必要です。
viewer.showSignTool();オプション preferredSettings: SignToolSettingsオプション。これらの設定は、signSettingsオプションよりも優先されます。
「フォームの送信」を実行して、入力されたフォームデータをWebサーバーまたは電子メールに送信します。フォームデータは、HTMLのsubmitメソッドを使用してHTMLフォームとして送信されます。
絶対URLを使用してフォームをWebサーバーに送信します。
viewer.submitForm("http://myhost.local/AcceptHtmlForm");相対URLを使用してフォームをWebサーバーに送信します。
viewer.submitForm("/CustomFormHandler");フォームを電子メールに送信します。
viewer.submitForm("mailto:myform@example.com");宛先 URI。
オプション options: SubmitFormOptionsオプション。送信フォームのオプション。
Trigger イベント。
// CustomEventをリッスンします。
viewer.getEvent("CustomEvent").register(function(args) {
console.log(args);
});
// CustomEventをトリガーします。
viewer.triggerEvent("CustomEvent", { arg1: 1, arg2: 2});オプション args: EventArgs | BeforeOpenEventArgs | ThemeChangedEventArgs編集しないように注釈をロック解除します。
注釈ID。
注釈を更新します。SupportApiが必要です。
更新された注釈オブジェクトによってpromiseが解決されます。
// 最初のページの注釈を更新します（ページインデックスは0です）。
viewer.updateAnnotation(0, annotation1);オプション changedオプション prevオプション skip複数の注釈を同時に更新します。SupportApiが必要です。
更新された注釈オブジェクトによってpromiseが解決されます。
// 2ページ目の注釈を更新します（ページインデックスは1です）。
var annotationsToUpdate = [annotation1, annotation2];
viewer.updateAnnotations(1, annotationsToUpdate);オプションl args: { skipPageRefresh?: boolean }オプション skipfieldNameパラメータで指定されたラジオボタングループを新しいフィールド値で更新します。
promiseはブール値で解決されます。trueの場合、-ラジオボタンが更新され、falseの場合、-エラーが発生しました。
viewer.updateGroupFieldValue("radiogroup1", "3", { skipPageRefresh: true } );viewer.updateGroupFieldValue("radiogroup1", "3", { propertyName: "alternativeText", skipPageRefresh: true } );グループ化されたラジオボタンのフィールド名。
新しいfieldValue。
オプション args: { propertyName?: string; skipPageRefresh?: boolean }SkipPageRefresh ブール値 - ページ表示を更新する必要がない場合は true に設定します。 デフォルトは false です。 propertyName 文字列 - 更新するプロパティ名。 デフォルトは「fieldValue」です。
オプション propertyオプション skipこのメソッドを使用して、アクティブなフォームを検証し、検証結果を取得します。
検証が成功した場合はtrueを返し、検証が失敗した場合はfalseまたは検証エラーメッセージを含む文字列を返します。
// すべてのフォームフィールドを検証します。各フィールドの値は「はい」または「いいえ」である必要があります。
viewer.validateForm((fieldValue, field) => { return (fieldValue === "YES" || fieldValue === "NO") ? true : "Possible value is YES or NO."; });オプション validator: ((fieldValue: string | string[], field: WidgetAnnotation) => string | boolean)オプション。フォームの各フィールドに対して呼び出されるValidator関数。検証エラーに関するメッセージを含む文字列値を返すことができ、このメッセージはUIに表示されます。成功した結果の場合はtrueまたはnullを返します。
オプション silent: booleanオプション。ユーザーにメッセージを表示せず、最終的な検証結果を取得する場合、trueを渡します。
オプション ignoreValidationAttrs: booleanオプション。required、min、max、minLength、maxLength、email、patternなどのフィールド属性を使用した検証をスキップする場合、trueを渡します。これらの属性は無視されます。
静的 i18nビューワの翻訳を追加するに使用できるi18nextインスタンスを取得します。i18nextフレームワークの詳細については、https://www.i18next.comを参照してください。
function loadPdfViewer(selector) {
// 翻訳を任意のソースからロードできます（例えば、en-pdf-viewer.jsonを参照します）。
var myTranslations = {
"toolbar": {
"open-document": "Open MY document",
"pan": "My Pan tool",
}
};
// 翻訳を初期化します。
GcPdfViewer.i18n.init({
resources: { myLang: { viewer: myTranslations } },
defaultNS: 'viewer'
}).then(function(t) {
// 新しい翻訳が初期化されます。
// PDFビューワを作成します。
var viewer = new DsPdfViewer(selector, { language: 'myLang' });
viewer.addDefaultPanels();
//viewer.open("sample.pdf");
});
}
loadPdfViewer('#root');アクティブ化されたエディタモード名。
ドキュメント内のすべての注釈を取得します。
for(var i = 0; i < data.length; i++){var pageAnnotationsData = data[i];var pageIndex = pageAnnotationsData.pageIndex;var annotations = pageAnnotationsData.annotations;console.log("Page with index " + pageIndex + " contains " + annotations.length + " annotation(s)");}ビューワの背景色を取得または設定します。デフォルト値は「transparent」です。
ドキュメントが変更されたときにページから出るかどうかをユーザーから確認します。SupportApiが必要です。
var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
viewer.addDefaultPanels();
viewer.addAnnotationEditorPanel();
viewer.addFormEditorPanel();
viewer.beforeUnloadConfirmation = true;ドキュメントが変更されたときにページから出るかどうかをユーザーから確認します。SupportApiが必要です。
var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
viewer.addDefaultPanels();
viewer.addAnnotationEditorPanel();
viewer.addFormEditorPanel();
viewer.beforeUnloadConfirmation = true;SupportApiを使用して開いたドキュメントを編集できるかどうかを示します。SupportApiが必要です。
if(viewer.canEditDocument) {
alert("Document editing features enabled.");
} else {
alert("Document editing features disabled.");
}現在のユーザー名を指定します。このプロパティは、注釈エディタによって「作成者」フィールドのデフォルト値として使用されます。
viewer.currentUserName = "John";alert("The current user name is " + viewer.currentUserName);現在のユーザー名を指定します。このプロパティは、注釈エディタによって「作成者」フィールドのデフォルト値として使用されます。メモ：現在のユーザー名はブラウザのローカルストレージに保存され、userNameオプションが設定されない場合、次のページのリロードで使用されます。
viewer.currentUserName = "John";alert("The current user name is " + viewer.currentUserName);PDFドキュメントのメタデータのローダー。 一部のサイドバーパネルで使用されます。
現在のドキュメントを取得します。
注釈エディタまたはフォームエディタ用に選択された編集ツールを示します。SupportApiが必要です。
// レイアウトモードを「注釈エディタ」に設定します。
viewer.layoutMode = 1;
// 編集モードを「正方形」に設定します。
viewer.editMode = 4;注釈エディタまたはフォームエディタ用に選択された編集ツールを示します。SupportApiが必要です。
// レイアウトモードを「注釈エディタ」に設定します。
viewer.layoutMode = 1;
// 編集モードを「正方形」に設定します。
viewer.editMode = 4;レポートの表示中にエラーが発生したときに呼び出されるコールバックを取得または設定します。
（内部使用のみ）使用可能なイベント名は、outlineloaded、attachmentsloaded、namedaction、pagemode、fileattachmentannotation、pagerendered、pagecancelled、scalechange、pagesinit、pagesloaded、documentchanged、rotationchanging、updateviewarea、undostorechanged、show-custom-layout、hide-custom-layout、annotationeditstarted、unselectannotation、annotation-bounds-change、pagechange、mousemodechange、request-answer、textlayerready、viewersizechanged、articlebeadnavigate、error、open、pagelabels、documentloadです。
// 例: 注釈の選択/選択解除イベントをリッスンします。
var viewer = DsPdfViewer.findControl("#root");
viewer.eventBus.on("annotationeditstarted", (args)=> {
console.log("Annotation selected, annotation id: " + args.annotationId);
});
viewer.eventBus.on("unselectannotation", (args)=> {
console.log("Annotation unselected, annotation id: " + args.annotationId);
});ファイルデータを取得します。 keepFileDataオプションがtrueに設定する場合に使用できます。
var viewer = new DsPdfViewer('#root', { keepFileData: true });
viewer.open('Test.pdf');
viewer.onAfterOpen.register(function() {
var pdfFileData = viewer.fileData;
});ドキュメントを開くために使用されたファイル名を取得します。 ファイル名は次のように決定されます。
var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
alert("The document is opened, the fileName is " + viewer.fileName);
});
viewer.open('MyDocuments/Test.pdf');PDF ドキュメントのファイル サイズをバイト単位で取得します。
const fileSizeBytes = await viewer.fileSize;ドキュメントを開くに使用されたURLを取得します。ドキュメントがバイナリデータから開かれたときに空の文字列を返します。
var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
alert("The document is opened, the fileUrl is " + viewer.fileUrl);
});
viewer.open('MyDocuments/Test.pdf');一意のドキュメント識別子。
var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
alert("The document opened, an unique document identifier is "+ viewer.fingerprint);
});
viewer.open('Test.pdf');SupportApiで使用されるGcPDFライブラリのバージョンを取得します。
ドキュメントがユーザーによって変更されたかどうかを示します。
if(viewer.hasChanges) {
alert("The document has been changed.");
}コピーしたバッファにデータが含まれるかどうかを示します。
if(viewer.hasCopyData) {
viewer.execPasteAction();
}ドキュメントがビューにロードされるかどうかを示します。
if(!viewer.hasDocument) {
viewer.open("sample.pdf");
}アクティブなドキュメントにフォームフィールドがあるかどうかを示す値を取得します。
if(viewer.hasForm) {
viewer.showFormFiller();
}ビューワがサーバーに永続的な接続があるかどうかを示す値を取得します。
PDFビューワがドキュメントの変更をやり直すことができるかどうかを示す値を取得します。SupportApiが必要です。
if(viewer.hasRedoChanges) {
viewer.redoChanges();
}返信ツールが追加されるかどうかを示します。
var viewer = new DsPdfViewer('#root');
if(viewer.hasReplyTool) {
alert("The Reply Tool has not been added to the viewer.");
} else {
alert("The Reply Tool has been added to the viewer.");
}
viewer.open('Test.pdf');PDFビューワがドキュメントの変更を元に戻すことができるかどうかを示す値を取得します。SupportApiが必要です。
if(viewer.hasUndoChanges) {
viewer.undoChanges();
}注釈レイヤを非表示にするかどうかを決定します。
// 注釈を非表示にします。
viewer.hideAnnotations = true;注釈レイヤを非表示にするかどうかを決定します。
// 注釈を非表示にします。
viewer.hideAnnotations = true;メインウィンドウのホスト要素を取得します。
アクティブなドキュメントが共有モードで開いているかどうかを示す値を取得します。 SupportApiが必要です。
if(viewer.isDocumentShared) {
alert("The document is open in shared mode.");
}アクティブな編集モードがユーザーによって固定される場合はtrueを返します。アクティブな編集ボタンのstickyBehaviorが有効になって、ボタンがチェックされることを示します。詳細については、toolbarLayout.stickyBehaviorプロパティを参照します。
エディタモードが現在アクティブであるかどうかを示す値を取得します。
let isInEditorMode = viewer.isInEditorMode;// 編集モードの開始/終了を検出します。
var isEdit = false;
viewer.onViewerStateChange.register(function () {
if (viewer.isInEditorMode !== isEdit) {
isEdit = viewer.isInEditorMode;
console.log(isEdit ? "Editor Mode activated." : "Editor Mode deactivated.");
}
});language - 指定された言語オプションに基づいて標準化された言語キーを取得するプロパティ。言語キーは options.language 設定によって決定されます。
標準化された言語キー（例、「en」、「ja」）。
レイアウトモードを取得または設定します（0 - ビューワ、1 - 注釈エディタ、または2 - フォームエディタ）。
0
// レイアウトモードを「フォームエディタ」に設定します。
viewer.layoutMode = 2;レイアウトモードを取得または設定します（0 - ビューワ、1 - 注釈エディタ、または2 - フォームエディタ）。
0
// レイアウトモードを「フォームエディタ」に設定します。
viewer.layoutMode = 2;左側のサイドバーのAPI。
viewer.leftSidebar.hide();アクティブなドキュメントの変更状態を取得します。SupportApiが必要です。
var modificationsState = viewer.modificationsState;
console.log(modificationsState);onAfterAddAnnotation イベント。
viewer.onAfterAddAnnotation.register(function(args) {
console.log(args);
});ユーザーがビューワのテーマを変更したときに発生するイベント。
var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
alert("The document opened.");
});
viewer.open('Test.pdf');onAfterRemoveAnnotation イベント。
viewer.onAfterRemoveAnnotation.register(function(args) {
console.log(args);
});onAfterUpdateAnnotation イベント。
viewer.onAfterUpdateAnnotation.register(function(args) {
console.log(args);
});onBeforeAddAnnotation イベント。このイベントはキャンセルすることができます。
viewer.onBeforeAddAnnotation.register(function(args) {
console.log(args);
args.cancel = true; // イベントをキャンセルするには、キャンセルフラグを設定します。
});ドキュメントを開く直前に発生します。
var viewer = new DsPdfViewer('#root');
viewer.onBeforeOpen.register(function(args) {
alert("A new document will be opened,\n payload type(binary or URL): " + args.type +",\n payload(bytes or string): " + args.payload);
});
viewer.open('Test.pdf');onBeforeRemoveAnnotation イベント。このイベントはキャンセルすることができます。
viewer.onBeforeRemoveAnnotation.register(function(args) {
console.log(args);
args.cancel = true; // イベントをキャンセルするには、キャンセルフラグを設定します。
});onBeforeUpdateAnnotation イベント。このイベントはキャンセルすることができます。
viewer.onBeforeUpdateAnnotation.register(function(args) {
console.log(args);
args.cancel = true; // イベントをキャンセルするには、キャンセルフラグを設定します。
});ドキュメントが変更された（新しいドキュメントが開かれた、ドリルされた、または「親に戻る」が発行されたなど）ことを示すイベント。
ドキュメントのロードの進行状況を示すイベント。
ドキュメントのビューが変更された（ 新しいドキュメントが開かれた、更新された、切り替えられたなど）ことを示すイベント。
エラーを示すイベント。
var viewer = new DsPdfViewer('#root');
viewer.addDefaultPanels();
viewer.onError.register(handleError);
viewer.open('Test.pdf');
function handleError(eventArgs) {
var message = eventArgs.message;
if (message.indexOf("Invalid PDF structure") !== -1) {
alert('Unable to load pdf document, pdf document is broken.');
} else {
alert('Unexpected error: ' + message);
}
}ビューワのテーマがユーザーによって変更されたときに発生します。
var viewer = new DsPdfViewer(selector, {
requireTheme: localStorage.getItem('demo_theme') || 'viewer'
});
viewer.addDefaultPanels();
viewer.onThemeChanged.register(function(args) {
localStorage.setItem('demo_theme', args.theme);
});ビューワの状態が変更されたことを示します。
デフォルトのオプションのコンテンツ構成。オプションのコンテンツは、動的に表示または非表示にするグラフィックのコレクションです。
// optionalContentConfigプロパティを使用して、使用可能なすべてのレイヤーに関する情報を印刷します。
const config = await viewer.optionalContentConfig;
console.table(config.getGroups());const config = await viewer.optionalContentConfig;
// 「13R」IDのオプションのコンテンツグループをオフにします。
config.setVisibility("13R", false);
// 表示されているページを再描画します。
viewer.repaint();ビューワのオプション。
viewer.options.zoomByMouseWheel = { always: true };
viewer.applyOptions();PDFビューワのオプション。
ページ数を取得します。
var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
alert("The document opened. Total number of pages: " + viewer.pageCount);
});
viewer.open('Test.pdf');ページ表示の装飾モードを取得または設定します。
アクティブなページのインデックスを取得または設定します。
var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
// インデックス9のページに移動します。
viewer.pageIndex = 9;
});
viewer.open('Test.pdf');アクティブなページのインデックスを取得または設定します。
var viewer = new DsPdfViewer('#root');
viewer.onAfterOpen.register(function() {
// インデックス9のページに移動します。
viewer.pageIndex = 9;
});
viewer.open('Test.pdf');DsPdfViewerの現在のバージョンと互換性のある必要なSupportApiバージョンを取得します。
右側のサイドバーオブジェクトを取得します。このオブジェクトを使用して、右側のサイドバーを操作します。
viewer.rightSidebar.show('expanded', 'reply-tool');
viewer.rightSidebar.toggle();
viewer.rightSidebar.hide();
viewer.rightSidebar.expand();
viewer.rightSidebar.collapse();回転を度単位で指定します。
var viewer = new DsPdfViewer('#root');
// onAfterOpenイベントハンドラーを登録します。:
viewer.onAfterOpen.register(function() {
// 時計回りに90度回転します。
viewer.rotation = 90;
});
// ドキュメントを開きます。
viewer.open('Test.pdf');回転を度単位で指定します。
var viewer = new DsPdfViewer('#root');
// onAfterOpenイベントハンドラーを登録します。:
viewer.onAfterOpen.register(function() {
// 時計回りに90度回転します。
viewer.rotation = 90;
});
// ドキュメントを開きます。
viewer.open('Test.pdf');スクロールビューを取得します。メモ：左スクロールの位置はビューワによって自動的に計算されます。したがって、左スクロールの位置を変更する必要はありません。
// ドキュメントの先頭までスクロールします。
viewer.scrollView.scrollTop = 0;ドキュメント検索のインスタンス。現在の開いているドキュメントにテキストを検索します。
// SearchPanel を開かずにすべての検索結果を強調表示します。
const searchIterator = viewer.searcher.search({ Text: "test", MatchCase: true, HighlightAll: true });
searchIterator.next();
searcher.applyHighlight();// すべての検索結果を繰り返します。
const searcher = viewer.searcher;
var searchResults = [];
const searchIterator = searcher.search({ Text: textToSearch, MatchCase: true });
var searchResult = await searchIterator.next();
if (searchResult.value)
searcher.highlight(searchResult.value)
while (searchResult.value && !searchResult.done) {
const searchResultValue = searchResult.value;
searchResults.push(`index: ${searchResultValue.ItemIndex}, text: ${searchResultValue.DisplayText}, pageIndex: ${searchResultValue.PageIndex}`);
searchResult = await searchIterator.next();
}
console.log("Search results: " + (searchResults.length ? searchResults.join("; ") : "No search results"));// ドキュメントを開き、「wildlife」というテキストを見つけて、最初の結果を強調表示します。
async function loadPdfViewer(selector) {
var viewer = new DsPdfViewer(selector, { restoreViewStateOnLoad: false });
viewer.addDefaultPanels();
var afterOpenPromise = new Promise((resolve)=>{ viewer.onAfterOpen.register(()=>{ resolve(); }); });
await viewer.open('wetlands.pdf');
await afterOpenPromise;
var findOptions = { Text: 'wildlife' };
var searchIterator = await viewer.searcher.search(findOptions);
var searchResult = await searchIterator.next();
viewer.searcher.cancel();
viewer.searcher.highlight(searchResult.value);
}
loadPdfViewer('#root');// ドキュメントを開き、「wildlife」というテキストを見つけて、検索結果をコンソールに出力します。
async function loadPdfViewer(selector) {
var viewer = new DsPdfViewer(selector);
viewer.addDefaultPanels();
await viewer.open('wetlands.pdf');
await (new Promise((resolve)=>{
viewer.onAfterOpen.register(()=>{
resolve();
});
}));
var findOptions = {
Text: 'wildlife',
MatchCase: true,
WholeWord: true,
StartsWith: false,
EndsWith: false,
Wildcards: false,
Proximity: false,
SearchBackward: false,
HighlightAll: true
};
var searcher = viewer.searcher;
var searchIterator = await searcher.search(findOptions);
var resultsCount = 0;
var searchResult;
do {
searchResult = await searchIterator.next();
if (searchResult.value) {
// 結果または進行状況メッセージのいずれかです (ItemIndex < 0)
if(searchResult.value.ItemIndex >= 0) {
console.log('next search result:');
console.log(searchResult.value);
resultsCount++;
} else {
const pageCount = _doc.pageCount.totalPageCount || _doc.pageCount.renderedSoFar;
console.log('search progress, page index is ' + searchResult.value.PageIndex);
}
}
else {
console.log("Search completed");
break;
}
}
while(!searchResult.done);
console.log('Total results count is ' + resultsCount);
}2番目のツールバーのAPI。
2番目のツールバーのレイアウト。 secondToolbarLayoutプロパティを使用して、利用可能なツールを構成します。
2番目のツールバーのレイアウト。 secondToolbarLayoutプロパティを使用して、利用可能なツールを構成します。
現在の署名ツールの設定と画像を保存および取得するに使用できるデータストレージを返します。ストレージデータは現在のユーザー名、currentUserName プロパティに依存します。
アクティブなドキュメントのデータストレージ。
const fileData = viewer.storage.getItem(annotation.fileId);viewer.storage.setItem(fileId, bytes);ストレージ API を使用して、スタンプ注釈をプログラムで追加します。
viewer.newDocument().then(function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost/sample.jpg', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
var arrayBuffer = this.response;
if (arrayBuffer) {
// プログラムでスタンプ注釈を追加します。
viewer.storage.setItem("sample_file_id_1", new Uint8Array(arrayBuffer));
var pageSize = viewer.getPageSize(0);
viewer.addAnnotation(0, {annotationType: 13, fileId: "sample_file_id_1", rect: [0, pageSize.height - 144, 144, pageSize.height]});
}
};
xhr.send();
});構造ツリーのデータ。
const viewer = new DsPdfViewer(selector);
await viewer.open("sample.pdf");
const structureTree = await viewer.structureTree;
if(structureTree) {
console.log(structureTree);
}ページの構造ツリーを表す[]オブジェクトで解決されるpromise。または、ページに構造ツリーが存在しない場合はnullです。
SupportApiクライアントを取得します。SupportApiが必要です。
var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } );
//サーバーに連絡して、SupportAPIバージョンを取得します。
viewer.serverVersion.then(function(ver) {
alert("The SupportApi version is " + ver);
});SupportApiの接続されたバージョンを取得します。
パネルの変更時に発生する一時的なエクスポーズイベント。
さまざまなビューワモード（viewer、annotationEditor、formEditor）のツールバーのレイアウトを定義します。
viewerのツールバー項目の完全なリストは次のとおりです。
'open', '$navigation', '$split', 'text-selection', 'pan', 'zoom', '$fullscreen', '$split', 'text-tools', 'draw-tools', 'attachment-tools',
'form-tools', 'page-tools', '$split', 'rotate', 'search', 'view-mode', 'theme-change', 'download', 'print', 'save', 'save-images', 'hide-annotations', 'form-filler',
'doc-title', 'doc-properties', 'about', 'share', 'single-page', 'continuous-view', '$history', '$mousemode', 'show-edit-tools', 'show-form-editor'annotationEditorのツールバー項目の完全なリストは次のとおりです。
'edit-select', 'save', 'share', 'edit-text', 'edit-free-text', 'edit-ink', 'edit-square',
'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'edit-file-attachment', 'edit-richmedia', 'edit-sound', 'edit-link', 'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out'.
'edit-redact', 'edit-redact-apply', 'edit-erase', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'formEditorのツールバー項目の完全なリストは次のとおりです。
'edit-select-field', 'save', 'share',
'edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio',
'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset',
'edit-erase-field', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'// ツールバーのレイアウトをカスタマイズします。
viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
viewer.toolbarLayout.annotationEditor.default = ["open", "save", "share", "$split", "new-document", "edit-ink", "edit-text"];
viewer.toolbarLayout.formEditor.default = ["open", "save", "share", "$split", "edit-widget-tx-field", "edit-widget-tx-password"];
viewer.applyToolbarLayout();// [開く]ボタンと[改訂]ボタンのみを表示します。
var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' });
// 注釈エディタパネルを追加します。
viewer.addAnnotationEditorPanel();
// 注釈エディタパネルを追加します。
viewer.toolbarLayout = { viewer: { default: ["open", 'show-edit-tools']},
annotationEditor: { default: ["open", 'edit-redact', 'edit-redact-apply']} };
// 「注釈エディタ」レイアウトモードを有効にします。
viewer.layoutMode = 1;// 四角形、円、線のボタンを貼り付けます。
viewer.toolbarLayout.stickyBehavior = ["edit-square", "edit-circle", "edit-line"];
viewer.applyToolbarLayout();さまざまなビューワモード（viewer、annotationEditor、formEditor）のツールバーのレイアウトを定義します。
viewerのツールバー項目の完全なリストは次のとおりです。
'text-selection', 'pan', 'open', 'save', 'share', 'download', 'print', 'rotate', 'theme-change', 'doc-title', 'view-mode', 'single-page', 'continuous-view',
'$navigation' '$refresh', '$history', '$mousemode', 'zoom', '$fullscreen', '$split', 'show-edit-tools', 'show-form-editor'annotationEditorのツールバー項目の完全なリストは次のとおりです。
'edit-select', 'save', 'share', 'edit-text', 'edit-free-text', 'edit-ink', 'edit-square',
'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'edit-file-attachment', 'edit-richmedia', 'edit-sound', 'edit-link', 'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out'.
'edit-redact', 'edit-redact-apply', 'edit-erase', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'formEditorのツールバー項目の完全なリストは次のとおりです。
'edit-select-field', 'save', 'share',
'edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio',
'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset',
'edit-erase-field', 'edit-undo', 'edit-redo', 'new-document', 'new-page', 'delete-page', '$split', 'pdf-organizer'// ツールバーのレイアウトをカスタマイズします。
viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
viewer.toolbarLayout.annotationEditor.default = ["open", "save", "share", "$split", "new-document", "edit-ink", "edit-text"];
viewer.toolbarLayout.formEditor.default = ["open", "save", "share", "$split", "edit-widget-tx-field", "edit-widget-tx-password"];
viewer.applyToolbarLayout();// [開く]ボタンと[改訂]ボタンのみを表示します。
var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' });
// 注釈エディタパネルを追加します。
viewer.addAnnotationEditorPanel();
// 注釈エディタパネルを追加します。
viewer.toolbarLayout = { viewer: { default: ["open", 'show-edit-tools']},
annotationEditor: { default: ["open", 'edit-redact', 'edit-redact-apply']} };
// 「注釈エディタ」レイアウトモードを有効にします。
viewer.layoutMode = 1;元に戻すスタックのレベル (コマンド) の数を取得します。 SupportApi が必要です。
alert("Undo levels count is " + viewer.undoCount);現在の元に戻すレベル (コマンド) のインデックスを取得します。これは、redoChanges() への次の呼び出しで実行される元に戻すコマンドです。 SupportApi が必要です。
alert("The current Undo level index is " + viewer.undoIndex);元に戻すストアの現在の状態。 このプロパティは読み取り専用であり、プログラムによってコレクションの要素を変更しないことに注意してください。 Undo API メソッドを使用して、ビューワのエディタの状態を変更します。 Undo API のプロパティは、hasUndoChanges、hasRedoChanges、undoIndex です。 undoCount Undo API メソッドは、undoChanges()、redoChanges() です。
PDFビューワの現在のバージョンを返します。
alert("The DsPdfViewer version is " + viewer.version);表示モード (単一ページまたは連続) を取得または設定します。
ビューワの初期設定を取得します。
表示されているドキュメントの状態を取得します。
現在の拡大縮小モードを取得または設定します。指定できる値は「0 - Value」、「1 - PageWidth」および「2 - WholePage」。
// 拡大縮小モードを「WholePage」に設定します。
viewer.zoomMode = 2;現在の拡大縮小モードを取得または設定します。指定できる値は「0 - Value」、「1 - PageWidth」および「2 - WholePage」。
// 拡大縮小モードを「WholePage」に設定します。
viewer.zoomMode = 2;ズーム変換の対象要素を取得または設定します。 「page」が設定されている場合、各ページは個別に変換されます (デフォルトの動作)。 「viewport」が設定されている場合、ビューポート要素全体が変換されます。
現在の拡大率のレベルを取得または設定します。
// 拡大値を150％に設定します。
viewer.zoomValue = 150;現在の拡大率のレベルを取得または設定します。
// 拡大値を150％に設定します。
viewer.zoomValue = 150;PDFビューワコンストラクタ
ルートコンテナ要素またはルートコンテナ要素の選択に使用されるセレクタパターン。
ビューワのオプション。詳細については、ViewerOptions を参照してください。
サイドバーパネルの表示/非表示を設定します。
オプション show: boolean
PDFビューワ(DsPdfViewer)は、すべての主要なブラウザで動作する、高速な JavaScript ベースのクライアント側 PDF ビューワです。
サンプル