IDRViewer JavaScript API
IDRViewerは、UIを簡単に構築できるシンプルな表示コンポーネントとして設計されています。ページの読み込み、ズーム、ページの表示・レイアウトなど、複雑な処理をすべて担い、ビューアーを操作するためのシンプルなAPIを提供します。いくつかのUIサンプルが用意されており、そのまま利用することも、独自のユーザーインターフェースを構築する際の出発点や参考例として活用することもできます。
IDRViewer.next();- 次のページへ移動IDRViewer.prev();- 前のページへ移動IDRViewer.goToPage(page);- 指定したページへ移動
IDRViewer.zoomIn();- ドキュメントをズームインIDRViewer.zoomOut();- ドキュメントをズームアウトIDRViewer.setZoom(IDRViewer.ZOOM_AUTO);- ブラウザに最適なサイズに自動ズーム（ドキュメントとレイアウトモードに依存）IDRViewer.setZoom(IDRViewer.ZOOM_ACTUALSIZE);- ドキュメントを100%に拡大IDRViewer.setZoom(IDRViewer.ZOOM_FITWIDTH);- 幅に合わせてズーム（連続モードでは最大のページ幅を使用）IDRViewer.setZoom(IDRViewer.ZOOM_FITHEIGHT);- 高さに合わせてズーム（連続モードでは最大のページ高さを使用）IDRViewer.setZoom(IDRViewer.ZOOM_FITPAGE);- ページ全体に合わせてズーム（連続モードでは最大のページを使用）IDRViewer.setZoom(0.5);- 指定したズーム値にドキュメントを拡大・縮小
IDRViewer.setLayout(IDRViewer.LAYOUT_CONTINUOUS);- レイアウトを連続モードに設定IDRViewer.setLayout(IDRViewer.LAYOUT_PRESENTATION);- レイアウトをプレゼンテーションモードに設定IDRViewer.setLayout(IDRViewer.LAYOUT_MAGAZINE);- レイアウトをマガジンモードに設定
IDRViewer.setSelectMode(IDRViewer.SELECT_PAN);- 選択モードをマウスパンに設定IDRViewer.setSelectMode(IDRViewer.SELECT_SELECT);- 選択モードをテキスト選択に設定
IDRViewer.setRotation(degrees);- ドキュメントの回転角度を設定。90の倍数である必要があり、それ以外の場合はTypeErrorがスローされます。IDRViewer.rotate(delta);- 現在の回転角度を基準にドキュメントを相対的に回転。90の倍数である必要があり、それ以外の場合はTypeErrorがスローされます。
ユーザーの操作に応じてUIを更新するために、さまざまなイベントをリッスンできます。イベントリスナーの追加と削除には、IDRViewer.on('eventtype', eventListener); および IDRViewer.off('eventtype', eventListener); を使用します。
IDRViewer.on('pagechange', function(data) {
console.log("navigated to page " + data.page);
});
page (number)- 現在のページpagecount (number)- ドキュメントの総ページ数bounds (array[[number, number]])- ページの境界サイズの配列thumbnailType (string)- サムネイルのファイル形式（jpg または png）selectMode (string)- 現在の選択モードisMobile (boolean)- モバイルまたはタブレットでの閲覧かどうかlayout (string)- 現在のレイアウトモードavailableLayouts (array[string])- 使用可能なレイアウトの一覧title (string)- 変換されたファイルのタイトル（存在する場合）bookmarks (object)- 変換されたファイルのブックマーク（存在する場合）pageType (string)- ページのファイル形式（html または svg）isFirstPage (boolean)- 現在のページが最初のページかどうかisLastPage (boolean)- 現在のページが最後のページかどうか
page (number)- 現在のページpagecount (number)- ドキュメントの総ページ数isFirstPage (boolean)- 現在のページが最初のページかどうかisLastPage (boolean)- 現在のページが最後のページかどうか
page (number)- 読み込まれたページ番号
page (number)- アンロードされたページ番号
layout (string)- 現在のレイアウトモード
type (string)- 現在の選択モード
zoomType (string)- 現在のズームモードscale (number)- 実際のスケール値isMinZoom (boolean)- 現在のズームが最小かどうかisMaxZoom (boolean)- 現在のズームが最大かどうか
rotation (number)- 現在の回転角度（0、90、180、270）
引数なし
searchTerm (String)- 検索された文字列results (array[object])- PDF上での検索語と設定に対するすべての検索結果。各結果にはページ番号、ページ内のインデックス、一致したテキストのスニペットが含まれますsettings (object(matchCase, limitOnePerPage, decompose snippets))- 検索に使用された設定
resultIndex (int)- searchResults 配列内の選択された結果のインデックスresult (object)- 配列からプリフェッチされた結果オブジェクト
デフォルト設定を変更するには、setup 関数が呼び出される前にビューアー API を使用します。
IDRViewer.goToPage(2); // Set default page
IDRViewer.setZoom(IDRViewer.ZOOM_FITPAGE); // Set default zoom
IDRViewer.setLayout(IDRViewer.LAYOUT_PRESENTATION); // Set default layout
IDRViewer.setSelecMode(IDRViewer.SELECT_SELECT); // Set default select mode
IDRViewer.setRotation(90); // Set the default rotation
IDRViewer.setup(); // Load viewer with new default settings
プレゼンテーションモードおよびマガジンレイアウトモードでは、さまざまなトランジションを利用できます。IDRViewer 要素に対応する CSS クラスを追加することでトランジションを有効化できます。
<div id="idrviewer" class="transition-flip"></div>
transition-fliptransition-slidetransition-throwtransition-fade
transition-magazine