基本的な使い方
HTML5ビューワの基本的な使い方を紹介します。ここでは、ActiveReports 9.0J Webサービスと連携させて、HTML5ビューワにレポートを表示します。
付属のサンプルは、「01_基本的な使い方.html」をご参照ください。
備考
HTML5ビューワをActiveReports Serverと連携させる場合は、ActiveReports 9.0J Webサービスの代わりに、ActiveReports Serverが提供するWebサービスを使用します。詳細については、製品ヘルプの[JavaScriptでHTML5ビューワの操作]をご参照ください。
HTML5ビューワを使用するには、以下の設定が必要です。
- JavaScriptファイル、CSSファイルを設定する
- ビューワのdiv要素を設定する
- ActiveReports 9.0J Webサービスを設定する
- レポートを表示する関数を設定する
JavaScriptファイル、CSSファイルの設定
HTML5ビューワはjQueryウィジェットとして動作するため、必要なJavaScriptファイルおよびCSSファイルを設定します。
標準
- jQuery 1.9.0以上
- Bootstrap 3.0
- Knockout.js 2.3.0以上
- フォントファイル(※Bootstrapをファイル参照する場合)
HTML5ビューワ
- GrapeCity.ActiveReports.Viewer.Html.css
- GrapeCity.ActiveReports.Viewer.Html.js
- GrapeCity.ActiveReports.Viewer.Html.min.js
<link rel="stylesheet" href="css/bootstrap.css" /> <link rel="stylesheet" href="css/GrapeCity.ActiveReports.Viewer.Html.css" /> <script src="scripts/jquery-1.10.2.js"></script> <script src="scripts/bootstrap-3.0.0.js"></script> <script src="scripts/knockout-2.3.0.js" type="text/javascript"></script> <script src="scripts/GrapeCity.ActiveReports.Viewer.Html.js" type="text/javascript"></script>
ビューワのdiv要素の設定
レポートを表示するためのビューワ領域を設定します。HTMLファイルにdiv要素を追加し、スクリプトで使用するためid属性を指定します。
<div id="viewer" style="width: 800px; height: 600px; border: black solid"></div>
ActiveReports 9.0J Webサービスの設定
プロジェクトの[追加]-[新しい項目]から、「ActiveReports 9.0J Webサービス」(ActiveReports.ReportService.asmx)を追加します。ActiveReports 9.0J Webサービスは、サーバー側でレポートを生成してクライアントに配信します。
レポートを表示する関数の設定
HTML5ビューワの本体であるJavaScriptオブジェクトGrapeCity.ActiveReports.Viewerを呼び出す関数を追加します。
<script type="text/javascript"> $(function () { var viewer = GrapeCity.ActiveReports.Viewer( { // HTML5ビューワを表示する領域(div要素のid属性)を設定します element: '#viewer', // HTML5ビューワに表示するレポートを設定します report: { id: "_5min2015SampleCS_04.rpt_01_基本的な使い方" }, // ActiveReports 9.0J WebサービスのURLを設定します reportService: { url: '/ActiveReports.ReportService.asmx' }, // HTML5ビューワのツールバーのUIを設定します uiType: 'desktop', // HTML5ビューワを日本語化するファイルを設定します localeUri: 'scripts/ja/ja.txt', }); } ); </script>
各オプションの設定内容は、以下の通りです。
elementオプション
HTML5ビューワを表示する領域を設定します。
report.idオプション
HTML5ビューワに表示するレポートを設定します。レポートの種類により、設定方法が異なります。
a. セクションレポート(コード)
クラスの完全名を指定します。たとえば、プロジェクトの名前空間が「MyProject」、レポートのクラス名が「MyReport」である場合には、「MyProject.MyReport」と指定します。また、クラスの完全名は「アセンブリ名」ではなく「ルート名前空間」から始まります。なお、サンプルでは先頭の文字が数字であるため、ルート名前空間の名称として自動的にアンダースコアが付加されて「_5min2015SampleVB_04」となっています。
b. セクションレポート(XML)/ページレポート/RDLレポート
レポートファイルのURLを指定します。たとえば、「Reports」フォルダに含まれる「PageReport1.rdlx」を表示する場合、「Reports/PageReport1.rdlx」と指定します。
reportService.urlオプション
ActiveReports 9.0J WebサービスのURLを設定します。
uiTypeオプション
HTML5ビューワのUIを設定します。デスクトップ(desktop)、モバイル(mobile)、カスタム(custom)から選択します。
localeUriオプション
HTML5ビューワを日本語化するファイルを設定します。
![基本的な使い方](http://cz-cdn.shoeisha.jp/static/images/article/9055/9055_002_s.gif)