fbpx
< 前に戻る
印刷

IDRViewer JavaScript API

作成日:2018年7月5日
最終更新日:2024年2月27日

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 bounds
  • thumbnailType (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) – 現在のズームが最大である場合

searchready:

引数なし

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
    Tags:
    MENU
    PAGE TOP