MVCアプリでJSビューワを使用する方法 – MESCIUS ナレッジベース

作成日: 2022/11/16 最終更新日: 2022/11/16

文書種別

使用方法

詳細

MVCアプリでJSビューワを使用する場合、以下のような手順で構成します。

NuGetパッケージをインストールする

以下のパッケージをインストールします。

ASP.NET の場合
- GrapeCity.ActiveReports.Aspnet.Viewer.ja
ASP.NET Core の場合
- GrapeCity.ActiveReports.Aspnetcore.Viewer.ja

名称の末尾に .ja が付いているパッケージをインストールしてください。
以下のナレッジもあわせてご確認ください。

コントロールとNuGetパッケージの対応について

レポートファイルを追加する

適当な名称のフォルダ（例：Reports）を作成し、レポートファイルを追加します。

XML形式のレポートファイル(.rdlx/.rpx)は、ビルドアクションを「埋め込みリソース」に変更します。

レポートサービスを実装する

サーバーサイドでレポートを描画するレポートサービスを実装します。
プロジェクトのターゲットフレームワークによって、実装方法が異なります。

ASP.NET (.NET Framework) の場合

Startupクラス(Startup.cs)のConfigurationメソッドにコードを追加します。
ファイルが存在しない場合、「新しい項目の追加」で「OWIN Startup クラス」を選択します。

public void Configuration(IAppBuilder app)
{
    // 追加
    app.UseReporting(settings => {
        settings.UseEmbeddedTemplates(
            "名前空間.レポートフォルダ",
            System.Reflection.Assembly.GetAssembly(GetType()));
        settings.UseCompression = true;
    });
...
}

ASP.NET Core (.NET Core 3.1 / .NET 5) の場合

Startupクラス(Startup.cs)のConfigureメソッドにコードを追加します。
ファイルが存在しない場合、「新しい項目の追加」で「スタートアップクラス」を選択します。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 追加
    app.UseReporting(settings => { 
        settings.UseEmbeddedTemplates(
            "名前空間.レポートフォルダ", 
            System.Reflection.Assembly.GetEntryAssembly()); 
        settings.UseCompression = true; 
    });
...
}

ASP.NET Core (.NET 6) の場合

Program.cs に直接コードを追加します。

app.UseReporting(settings => { 
    settings.UseEmbeddedTemplates(
        "名前空間.レポートフォルダ", 
        System.Reflection.Assembly.GetEntryAssembly()); 
    settings.UseCompression = true; 
});

JSビューワのモジュールを配置する

以下のファイルをプロジェクトの適当なフォルダに配置します。

jsViewer.min.js
jsViewer.min.css

上記のファイルはnpmから取得できます。

npm install @grapecity/ar-viewer-ja

また、製品のインストールディレクトリにも同じファイルが格納されています。

C:\Program Files (x86)\ActiveReportsNET16\Deployment\JSViewer

ビューを構成する

JSビューワを表示するビュー(.cshtml)を構成します。

<link href="~/css/jsViewer.min.css" rel="stylesheet" />
<script src="~/js/jsViewer.min.js"></script>

<div style="width:100%; height:100vh;" id="viewerContainer">
</div>

<script>
    window.onload = function(){
        const viewer = GrapeCity.ActiveReports.JSViewer.create({
            element: '#viewerContainer'
        });
        viewer.openReport("PageReport.rdlx");
    }
</script>

なお、コード形式のセクションレポートを表示する場合は、完全修飾名で指定します。

viewer.openReport("WebApplication.Reports.SectionReport1");