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);- 選択モードをテキスト選択に設定
ユーザーの操作に基づいて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)- 現在のズームが最大かどうか
引数なし
searchTerm (String)- 検索された文字列results (array[object])- 検索語とPDFの設定に対するすべての結果。各結果には、ページ番号、ページに対する相対的なインデックス、一致したテキストのスニペットが含まれますsettings (object(matchCase, limitOnePerPage, decompose snippets))- 検索に使用された設定
resultIndex (int)- searchResults配列内の選択された結果のインデックスresult (object)- 配列から事前にフェッチされた結果オブジェクト
デフォルト設定を変更するには、setup関数が呼び出される前にViewer APIを使用できます。
IDRViewer.goToPage(2); // デフォルトページを設定
IDRViewer.setZoom(IDRViewer.ZOOM_FITPAGE); // デフォルトズームを設定
IDRViewer.setLayout(IDRViewer.LAYOUT_PRESENTATION); // デフォルトレイアウトを設定
IDRViewer.setSelecMode(IDRViewer.SELECT_SELECT); // デフォルト選択モードを設定
IDRViewer.setup(); // 新しいデフォルト設定でビューアを読み込む
プレゼンテーションモードとマガジンレイアウトモードでは、さまざまなトランジションが利用できます。トランジションは、IDRViewer要素に関連するCSSクラスを追加することで有効にできます。
<div id="idrviewer" class="transition-flip"></div>
transition-fliptransition-slidetransition-throwtransition-fade
transition-magazine