PowerTools ActiveReports for .NET 9.0J
HTML5ビューワでレポートの表示
PowerTools ActiveReports for .NET 9.0J > ActiveReportsユーザーガイド > クイックスタート > レポートを表示する > Webで表示する > HTML5ビューワの使用 > HTML5ビューワでレポートの表示

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

  1. Visual Studioで新規のWebアプリケーションプロジェクトを作成し、新しいHTMLページをプロジェクトに追加します。
  2. 以下のファイルをコピーして、任意の場所に配置します。
    • GrapeCity.ActiveReports.Viewer.Html.js
    • GrapeCity.ActiveReports.Viewer.Html.min.js
    • GrapeCity.ActiveReports.Viewer.Html.css
    • ja.txt
    メモ: これらのファイルは、デフォルトでは、...\ActiveReportsNET9\Deployment\Htmlフォルダにインストールされます。
  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="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. Licenses.licxファイルを開き、以下の参照を追加します。アプリケーションへのライセンスの組み込みについての詳細は、「アプリケーションのライセンスの組み込み」を参照してください。
    licenses.licxファイル内に貼り付けます。
    コードのコピー 
    GrapeCity.ActiveReports.SectionReport, GrapeCity.ActiveReports.v9
GrapeCity.ActiveReports.PageReport, GrapeCity.ActiveReports.v9
GrapeCity.ActiveReports.Export.Pdf.Section.PdfExport, GrapeCity.ActiveReports.Export.Pdf.v9
GrapeCity.ActiveReports.Web.WebViewer, GrapeCity.ActiveReports.Web.v9
    メモ: ページレポート、RDLレポート、セクションレポート（XML）、ActiveReports Webサービスをプロジェクトに追加した時には、licenses.licxファイルが自動的に作成されず、ライセンス文字列も追加されません。 詳細は、「アプリケーションのライセンスの組み込み」を参照してください。
  8. ［新しい項目の追加］ダイアログで、［ActiveReports 9.0J Webサービス］を選択し、［追加］ボタンをクリックします。ActiveReports 9.0J Webサービスは、HTML5ビューアの動作に必要なものです。
  9. Visual Studioプロジェクトにレポートを追加します。詳細は、「プロジェクトにレポートを追加する」を参照してくだざい。
  10. HTML5ビューワを初期化する以下のコードを追加します。
    <body>タグと</body>タグの間に貼り付けます。
    コードのコピー 
    <script type="text/javascript">
$(function ()
    {
        var viewer = GrapeCity.ActiveReports.Viewer(
        {
            element: '#viewer',
            report: {
                // ActiveReports 9.0J Serverのレポートを表示する場合は、ファイル名ではなく、帳票名を指定します。
                id: "Report.rdlx"
            },

            reportService: {
                url: '/ActiveReports.ReportService.asmx'
　　　　　　　　　　
                // ActiveReports 9.0J Serverを使用する場合は、以下を使用します。
                // セキュリティトークンの取得方法は、「ActiveReports 9.0J Server管理者ガイド - セキュリティトークンの取得」をご覧ください。
                // url: 'http://myar9server.com/ReportService.svc/json/', 
                // securityToken: securityToken, 
                // resourceHandler: 'http://myar9server.com/TemporaryResource.axd/'
            },
            uiType: 'desktop',
            
            // 日本語のリソースファイルのパスを指定します。 
            localeUri: 'ja.txt',
        });
    }
);
</script>
    メモ: ActiveReports 9.0J Serverから取得したレポートをプレビュー表示するには、ActiveReports 9.0J ServerのWebサイトがクロスドメインの要求を受け入れるように更新する必要があります。web.configファイル（<ActiveReports 9.0J Serverのインストールフォルダー>\site フォルダー）の「system.webServer」セクションに、以下のようなコードを追加してください。 
    <httpProtocol>
        <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Headers" value="Authorization, Origin, Content-Type, Accept, X-Requested-With" />
        </customHeaders>
</httpProtocol>

CORSを使用して異なるドメインからレポートを表示する

クロスオリジンリソース共有（CORS）は、ウェブページから異なるドメインにあるレポートをアクセスできるようにする非同期のウェブ方式です。CORSは、サーバーからクライアントへの応答に特別なヘッダを追加することによって操作します。サーバからの応答にAccess-Control-Allow-Originが含まれている場合、レポートを別のドメインから直接アクセスすることができます。レポートをプレビューする際に「404」または「500」エラーが発生した場合は、ブラウザがCORSをサポートしていることを確認してください。

以下の手順はCORSを使用して異なるドメインからレポートをアクセスする方法を紹介します。

  1. アプリケーションのサーバー側にグローバルアプリケーションクラス（Global.asax）ファイルを追加します。
  2. Global.asax.csファイルを開き、以下のコードを追加します。
    Global.asax.csファイル内に貼り付けます。
    コードのコピー 
     protected void Application_BeginRequest(object sender, EventArgs e)
     {
       HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
       if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
         {
           HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
           HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
           HttpContext.Current.Response.End();
         }
    Global.asax.vbファイル内に貼り付けます。
    コードのコピー 
    Sub Application_BeginRequest(ByVal sender As Object, ByVal e As EventArgs)
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*")
        If HttpContext.Current.Request.HttpMethod = "OPTIONS" Then
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept")
            HttpContext.Current.Response.End()
        End If
    End Sub

    メモ：Internet Explorer 9では、レポートを異なるドメインからアクセスするためにHTML5ビューワを初期化するときにクライアント側で以下のコードを追加する必要があります。

    $.support.cors = true;
関連トピック
HTML5ビューワの使用
JavascriptでHTML5ビューワの操作

 

 

©2003-2015 GrapeCity inc. All rights reserved.