JavaScriptを使用してHTML5ビューワを操作する場合、初期化中と実行時に設定できるオプションと、初期化した後にのみ使用できるAPIメソッドとプロパティがあります。

HTML5ビューワの初期化

初期化オプション

以下のオプションは、初期化中、または実行時にHTML5ビューワを操作するときに設定できます。

uiType

説明: HTML5ビューワのUIモードを設定します。

型: String

有効な値: 'Custom'、'Mobile'、'Desktop'

例:

viewer.option('uiType', 'Mobile');

element

説明: HTML5ビューワコントロールをホストする要素を指定するJQueryセレクター。

メモ: このオプションは初期化中にのみ使用されます。

型: String

例:

var viewer = GrapeCity.ActiveReports.Viewer(
{
   element: '#viewerContainer2',
   reportService: {
      url: '/ActiveReports.ReportService.asmx'
   },
});

reportService

説明: ActiveReports 12.0J Webレポートサービスを使用できるレポートサービス。

型: urlプロパティ

例:

reportService: {
   url: '/ActiveReports.ReportService.asmx'
   
};

reportService.url

説明: レポート情報と出力を提供するActiveReports 12.0J WebサービスのURL。

型: String

例:

reportService: {
   url: '/ActiveReports.ReportService.asmx'
};

report

説明: ActiveReports 12.0J Webレポートサービスに表示されるレポート。

型: reportIDプロパティとreportParametersプロパティを含むオブジェクト

例:

report: {
   id: 'CustomersList',
   parameters: [
   {
      name: 'CustomerID',
      value: 'ALFKI'
   }]
};

reportID

説明: HTML5ビューワに表示されるレポートのID。

型: String

例:

report: {
   id: 'CustomersList',
   parameters: [
   {
      name: 'CustomerID',
      value: 'ALFKI'
   }]
};

reportParameters

説明: レポートの実行に使用されるパラメータを表す{name, value}ペアの配列。

型: Array

例:

単一値パラメータの場合：

  report: {
     id: 'CustomersList',
     parameters: [
     {
        name: 'CustomerID',
        value: 'ALFKI'
     }]};

配列としての複数値パラメータの場合：

  var arrParam = [1, 2, 3];
  var reportOption = { 
     id: 'PageReport1.rdlx', 
     parameters: [ 
     { 
        name: 'Parameter1', 
        values: arrParam,
        multivalue: true
     }] 
  }; 
  viewer.option('report', reportOption);

reportLoaded

説明: HTML5ビューワが要求されたレポートに関する情報を取得するときに呼び出されるコールバック。TOC情報、パラメータ情報、およびレンダリングされたレポート結果へのリンクを含むreportInfoオブジェクトがこのコールバックに渡されます。

型: function(reportInfo)

例:

var reportLoaded = function reportLoaded(reportInfo)
   {
      console.log(reportInfo.parameters);
   }
viewer.option('reportLoaded', reportLoaded);

action

説明: HTML5ビューワがハイパーリンク、ブックマークリンク、ドリルダウンレポートを開く前、またはレポートコントロールの表示／非表示を切り替える前に呼び出されるコールバック。

型: function(actionType, actionParams)

例:

function onAction(actionType, actionParams)
{
   if (actionType === 0)
   {
      window.open(params.url, "Linked from report", "height=200,width=200");
   }
}
viewer.option('action', onAction);

availableExports

説明: HTML5ビューワのエクスポート機能で使用できるエクスポート形式の配列。デフォルトでは、PDF、Word、画像、Mht、Excel、CSV形式のエクスポートができます。

型: Array

例:

viewer.option("availableExports", ['Pdf']);

maxSearchResults

説明: 1回の検索呼び出しが受け取る検索結果の数。

型: Number

例:

maxSearchResults: 10

error

説明: レポートの表示プロセスでエラーが発生したときに呼び出されるコールバック。

型: function(error)

例:

var onError = function onError(errorInfo)
   {
      console.log(errorInfo);
      return true;
   }
viewer.option('onError', onError);

documentLoaded

説明: サーバー上でドキュメントが完全にロードされたときに呼び出されるコールバック。

型: function()

例:

var documentLoaded = function documentLoaded()
   {
      setPaginator();
   }
viewer.option('documentLoaded', documentLoaded);

localeUri

説明: ローカライズ文字列を含むファイルのURL。

メモ: このオプションは初期化中にのみ使用されます。

型: String

例:

var viewer = GrapeCity.ActiveReports.Viewer(
{
   localeUri: 'Scripts/i18n/ja.txt'
});

showOnlyLastError

説明: エラーパネルの［詳細］ボタンを非表示にします。

型: String

例:

var viewer = GrapeCity.ActiveReports.Viewer(
{
   showOnlyLastError: true
});

displayMode

説明: 単一ページ／連続ページを設定します。

型: String

有効な値: 'single'、'continuous'

例:

viewer.option('displayMode', 'continuous');

previewPages

説明: HTML5ビューワでページレポートまたはRDLレポートをプレビューしている際に描画されるレポートの最大ページ数を指定します。

型: Integer

例:

previewPages: 6

以下は、HTML5ビューワを初期化するコードの一例です。対象のHTMLページに、HTML5ビューワを格納するDIV要素とスクリプトを追加します。

<body>タグと</body>タグの間に貼り付けます。	コードのコピー
<div id="viewer" style="width:600px;height:480px;"></div>

<body>タグと</body>タグの間に貼り付けます。	コードのコピー
<script type="text/javascript"> $(function () { var viewer = GrapeCity.ActiveReports.Viewer( { element: '#viewer', report: { // 日本語のリソースファイルのパスを指定します。 localeUri: 'ja.txt', id: "Report.rdlx" }, selectedReportIndex: 0, reportService: { url: '/ActiveReports.ReportService.asmx' }, uiType: 'desktop', documentLoaded: function reportLoaded() { console.log(viewer.pageCount); }, reportLoaded: function (reportInfo) { console.log(reportInfo.parameters); }, error: function (error) { console.log("error"); } }); }); </script>

<body>タグと</body>タグの間に貼り付けます。

コードのコピー

<script type="text/javascript">
$(function ()
   {
      var viewer = GrapeCity.ActiveReports.Viewer(
      {
         element: '#viewer',
         report: {
         // 日本語のリソースファイルのパスを指定します。 
            localeUri: 'ja.txt',                 
            id: "Report.rdlx"
         },
         selectedReportIndex: 0,

         reportService: {
            url: '/ActiveReports.ReportService.asmx'
         },
         uiType: 'desktop',
         documentLoaded: function reportLoaded()
         {
            console.log(viewer.pageCount);
         },
         reportLoaded: function (reportInfo)
         {
            console.log(reportInfo.parameters);
         },

         error: function (error)
         {
            console.log("error");
         }
      });
   });
</script>

パブリックAPIメソッドおよびプロパティ

HTML5ビューワを初期化した後、以下のAPIメソッドおよびプロパティを使用することができます。

メソッド

option

説明: 名前によってオプションの値を取得します。valueパラメータが指定された場合は、名前によってオプションの値を設定します。

構文: option(name,[value])Object

パラメータ:

name: 取得または設定するオプションの名前。
value: （任意指定）設定するオプションの値。この引数を省略した場合、現在のオプションの値が返されます。

例:

viewer.option('uiType', 'mobile');
viewer.option('report', {
   id: 'my report'
});

viewer.option('displayMode', 'continuous');

戻り値: 現在のオプションの値。

refresh

説明: レポートのプレビューを更新します。

構文: option(name,[value])Object

例:

viewer.refresh()

戻り値: Void

説明: 現在レポートが表示されている場合、そのレポートを印刷します。

構文: print()Void

例:

viewer.print()

戻り値: Void

goToPage

説明: ビューワに特定のページを表示し、完了後にコールバックを呼び出します。オプションで特定のオフセットにスクロールできます。

構文: goToPage(number, offset, callback)Void

パラメータ:

number: 移動先のページ番号。
offsetオブジェクト: {left:12.2, top:15}のようなオブジェクト。
callback: アクションの実行後に呼び出す関数。

例:

viewer.goToPage(1, {
   2, 3
}, function onPageOpened()
{});

戻り値: Void

backToParent

説明: ドリルダウンレポートの親レポートをビューワに表示します。

構文: backToParent()Void

例:

viewer.backToParent()

戻り値: Void

destroy

説明: 要素からビューワコンテンツを削除します。

構文: destroy()Void

例:

viewer.destroy()

戻り値: Void

export

説明: 現在表示されているレポートをエクスポートします。

構文: export(exportType,callback,saveAsDialog,settings)Void

パラメータ:

exportType: エクスポート形式を指定します。
callback: エクスポート結果が出力された後に呼び出される関数（エクスポート結果のURLがこのコールバックに渡されます）。
saveAsDialog: エクスポート結果を出力する準備ができた直後に［名前を付けて保存］ダイアログを表示するかどうかを示します。

settings: エクスポートの設定。エクスポート形式によって異なります。

メモ:

描画拡張機能を使用して各種ファイルに出力するため、セクションレポートではsettingsの設定は有効になりません。
ページレポート／RDLレポートをPDF形式で出力する場合、Grapecity.ActiveReports.configファイル（..\ActiveReportsNET12\Grapecity.ActiveReports.config）のUsePdfExportFilterプロパティを「True」に設定し、対象のWebアプリケーションのルートフォルダに配置することによって、エクスポートフィルタを使用するように方式を変更することができます。

例:

function exportToExcel() {
    viewer.export('Xls', downloadReport, true, { FileName: "DefaultName.xls" });
}
// 関数uriからレポートを取得します。（コールバック関数）
var downloadReport = function (uri) {
    var newWin = null;
    // uriを新しいウィンドウで開きます。
    try {
        newWin = window.open(uri);
        } catch (e) { }
        // uriを新しいウィンドウで開けない場合は、現在のウィンドウで開きます。
    if (!newWin) {
        window.location = uri;
    }
};

戻り値: Void

説明: 特定の検索オプション（大文字と小文字の区別、単語単位での検索）を使用して特定の文字列を検索し、検索結果を渡して特定のコールバックを呼び出します。

構文: search(searchTerm, searchOptions, callback)Void

パラメータ:

searchTerm: 検索する文字列。
searchOptions: 必要に応じて検索オプションを定義します。
- matchCase: 検索時に大文字と小文字を区別するかどうか。
- wholePhrase: 単語単位で検索するかどうか。
callback: 検索の実行後に呼び出す関数。

例:

viewer.search('a', {
   matchCase: true,
   wholePhrase: false
}, function (results)
{
   console.log(results);
});

戻り値: Void

getToc

説明: parent(node)、startChild(index)、およびcountパラメータによって指定されたレポートの見出しマップラベルの部分を取得し、その結果をパラメータとして渡してコールバック関数を呼び出します。

構文: getToc(callback) Void

パラメータ:

callback: 見出しマップラベルツリーを処理するコールバック。

例:

viewer.getToc(function (toc)
{
   console.log(toc);
})

戻り値: Void

プロパティ

pageCount

説明: 現在表示されているレポートのページ数を取得します。

構文: viewer.pageCount

例:

console.log(viewer.pageCount)

戻り値: ページ数を表す整数。

currentPage

説明: 現在表示されているページ番号を取得します。

構文: viewer.currentPage

例:

console.log(viewer.currentPage)

戻り値: 現在表示されているページ番号を表す整数。

Toolbar

説明: デスクトップUIモードでツールバーを表示するHTML要素を返します。

構文: viewer.Toolbar

例:

// Toolbar、MobileToolbarTop、MobileToolbarBottom
$(viewer.toolbar).hide();
$(viewer.toolbarTop).hide();
$(viewer.toolbarBottom).hide();

ToolbarTop

説明: モバイルUIモードで上部ツールバーを表示するHTML要素を返します。

構文: viewer.ToolbarTop

例:

// Toolbar、MobileToolbarTop、MobileToolbarBottom
$(viewer.toolbar).hide();
$(viewer.toolbarTop).hide();
$(viewer.toolbarBottom).hide();

ToolbarBottom

説明: モバイルUIモードで下部ツールバーを表示するHTML要素を返します。

構文: viewer.ToolbarBottom

例:

// Toolbar、MobileToolbarTop、MobileToolbarBottom
$(viewer.toolbar).hide();
$(viewer.toolbarTop).hide();
$(viewer.toolbarBottom).hide();