IDRViewer JavaScript API
IDRViewerは、UIを簡単に構築できるシンプルなビューアコンポーネントとして設計されています。これらは、ページの読み込み、ズーム、ページ表示、レイアウトなどの複雑なタスクをすべて実装し、ビューアとのやり取りに使用できるAPIを提供します。これらのサンプルUIはそのまま使用することも、独自のUIを構築する方法の出発点または例として使用することもできます。
Viewer API:
ナビゲーション:
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); });
ready
:
page (number)
– 現在のページpagecount (number)
– ドキュメントのページ数bounds (array[[number, number]])
– An array of page boundsthumbnailType (string)
– サムネイルのファイルタイプ (jpg or png)selectMode (string)
– 現在のセレクションモードisMobile (boolean)
– ユーザーがモバイルかタブレットからブラウズしているかどうかlayout (string)
– 現在のレイアウトモードavailableLayouts (array[string])
– 使用可能なレイアウトtitle (string)
– 変換されたファイルのタイトル(利用可能な場合)bookmarks (object)
– 変換されたファイルのブックマーク(利用可能な場合)pageType (string)
– ページのファイルタイプ (html or svg)isFirstPage (boolean)
– 現在のページが最初のページの場合isLastPage (boolean)
– 現在のページが最後のページの場合
pagechange
:
page (number)
– 現在のページpagecount (number)
– ドキュメントのページ数isFirstPage (boolean)
– 現在のページが最初のページの場合isLastPage (boolean)
– 現在のページが最後のページの場合
pageload
:
page (number)
– ロードされたページ番号
pageunload
:
page (number)
– アンロードされたページ番号
layoutchange
:
layout (string)
– 現在のレイアウトモード
selectchange
:
type (string)
– 現在の選択モード
zoomchange
:
zoomType (string)
– 現在のズームモードscale (number)
– 実際のスケール値isMinZoom (boolean)
– 現在のズームが最小である場合isMaxZoom (boolean)
– 現在のズームが最大である場合
search:
searchTerm (String)
– 検索対象となった文字列results (array[object])
– PDF上の検索語と設定に対するすべての結果、各結果にはページ番号、ページに対するインデックス、および一致したテキストのスニペットが含まれています。settings (object(matchCase, limitOnePerPage, decompose snippets))
– 検索に使用する設定
searchresultselected
:
resultIndex (int)
– searchResults 配列における、選択された結果のインデックス。result (object)
– 配列からプリフェッチされた結果オブジェクト
デフォルトの設定:
デフォルト設定を変更するには、セットアップが呼び出される前にViewer 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.setup(); // Load viewer with new default settings
トランジション:
プレゼンテーションとマガジンのレイアウトモードでは、さまざまなトランジションを利用できます。 関連するCSSクラスをidrviewer要素に追加することで、トランジションを有効にすることができます。
使用例:
<div id=”idrviewer” class=”transition-flip”></div>
プレゼンテーションレイアウトのトランジション:
transition-flip
transition-slide
transition-throw
transition-fade
マガジンレイアウトのトランジション:
transition-magazine