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

作成日: 2026/03/25 最終更新日: 2026/03/25

文書種別

使用方法

詳細

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

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

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

ASP.NET の場合
- MESCIUS.ActiveReports.Aspnet.Viewer.ja
ASP.NET Core の場合
- MESCIUS.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.UseReportViewer(settings => {
        settings.UseEmbeddedTemplates(
            "名前空間.レポートフォルダ",
            System.Reflection.Assembly.GetAssembly(GetType()));
    });
...
}

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

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

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

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

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

jsViewer.min.js
jsViewer.min.css

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

npm install @mescius/activereportsnet-viewer-ja

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

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

ビューを構成する

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

<link href="@Url.Content("~/css/jsViewer.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/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',
            reportService: {
                url: '@Url.Content("~/api/reporting")',
            }
        });
        viewer.openReport("Report1.rdlx");
    }
</script>

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

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