GrapeCity ActiveReports for .NET 12.0J
HTML5ビューワでレポートの表示
GrapeCity ActiveReports for .NET 12.0J > ActiveReportsユーザーガイド > レポートの表示 > HTML5ビューワの使用 > HTML5ビューワでレポートの表示
すべて展開すべて展開
すべて折りたたむすべて折りたたむ

以下の手順はHTML5ビューワでレポートを表示する方法を紹介します。

  1. Visual Studioで新規のWebアプリケーションプロジェクトを作成し、新しいHTMLページをプロジェクトに追加します。
  2. 以下のファイル（デフォルトでは、...\ActiveReportsNET12\Deployment\Htmlフォルダに配置されています）をコピーして、任意の場所に配置します。
    • GrapeCity.ActiveReports.Viewer.Html.js
    • GrapeCity.ActiveReports.Viewer.Html.min.js
    • GrapeCity.ActiveReports.Viewer.Html.css
    • ja.txt
  3. 対象のHTMLページで、GrapeCity.ActiveReports.Viewer.Html.css、GrapeCity.ActiveReports.Viewer.Html.js、および以下の依存関係への参照を追加します。
    • jQuery 1.9.0以上
    • Bootstrap 3.0
    • Knockout.js 2.3.0以上
    メモ: jQueryのような依存関係はコンテンツデリバリーネットワーク（CDN）から取得できます。また、ローカルにコピーすることもできます。
    <body>タグと</body>タグの間に貼り付けます。
    コードのコピー 
    <link rel="stylesheet" href="GrapeCity.ActiveReports.Viewer.Html.css" >
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js" type="text/javascript"></script>
<script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js" type="text/javascript"></script>
  4. 対象のHTMLページで、bootstrap.min.cssへの参照を追加します。
    <head>タグと</head>タグの間に貼り付けます。
    コードのコピー 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  5. 対象のHTMLページで、HTML5ビューワを格納するDIV要素を追加します。
    <body>タグと</body>タグの間に貼り付けます。
    コードのコピー 
    <div id="viewer" style="width:600px;height:480px;"></div>
  6. ［プロジェクト］メニューから［新しい項目の追加］を選択します。
  7. ［新しい項目の追加］ダイアログで、［ActiveReports 12.0J Webサービス］を選択し、［追加］ボタンをクリックします。ActiveReports 12.0J Webサービスは、HTML5ビューワの動作に必要なものです。
  8. Visual Studioプロジェクトにレポートを追加します。詳細については、「プロジェクトにレポートを追加する」を参照してくだざい。
  9. Licenses.licxファイルを開き、以下の参照を追加します。アプリケーションへのライセンスの組み込みについての詳細は、「アプリケーションのライセンスの組み込み」を参照してください。
    licenses.licxファイル内に貼り付けます。
    コードのコピー 
    GrapeCity.ActiveReports.SectionReport, GrapeCity.ActiveReports.v12
    GrapeCity.ActiveReports.PageReport, GrapeCity.ActiveReports.v12
    GrapeCity.ActiveReports.Export.Pdf.Section.PdfExport, GrapeCity.ActiveReports.Export.Pdf.v12
    GrapeCity.ActiveReports.Web.WebViewer, GrapeCity.ActiveReports.Web.v12
    メモ:
    • ページレポート、RDLレポート、セクションレポート（XML）、ActiveReports Webサービスをプロジェクトに追加した時には、licenses.licxファイルが自動的に作成されず、ライセンス文字列も追加されません。 詳細については、「アプリケーションのライセンスの組み込み」を参照してください。
  10. HTML5ビューワを初期化する以下のコードを追加します。
    <body>タグと</body>タグの間に貼り付けます。
    コードのコピー 
    <script type="text/javascript">
$(function ()
   {
      var viewer = GrapeCity.ActiveReports.Viewer(
      {
         element: '#viewer',
         report: {
            id: "Report.rdlx"
         },
         
         reportService: {
            url: '/ActiveReports.ReportService.asmx'
         },
         uiType: 'desktop',
         // 日本語のリソースファイルのパスを指定します。 
           localeUri: 'ja.txt',                 
      });
   });
</script>
    メモ: セクションレポートを表示する場合は、reportIDをクラスの完全名にします。
関連トピック
HTML5ビューワの使用
JavaScriptでHTML5ビューワの操作
異なるドメインからのレポートの表示

 

 

Copyright © 2003 GrapeCity inc. All rights reserved.