[]
ヘルプ APIリファレンス 移行ガイド ナレッジベース
トライアル版
(Showing Draft Content)

Blazorビューワの組み込み

BlazorビューワアプリケーションはJSビューワと同じクライアントサーバモデルを使用するため、フォント設定機能やクロスサイトスクリプティング攻撃の防止などのサーバー側構成に関するすべての詳細は、Blazorビューワにも関連します。


このトピックでは、Blazorビューワを組み込んだWebアプリケーションを作成する方法について説明します。

NuGetパッケージ

次のパッケージをプロジェクトに追加します。

  • MESCIUS.ActiveReports.Aspnetcore.Viewer.ja

  • MESCIUS.ActiveReports.Blazor.Viewer.ja

ビューワの初期化

<div class="main">
    <div id="viewerContainer">
        <ReportViewer @ref="_viewer" ReportName="@_currentReport" ViewerInitialized="InitializedViewer" DocumentLoaded="@DocumentLoaded"/>
    </div>
</div>

Blazorサーバーアプリケーションを作成する

Visual Studioテンプレートを使用する

  1. Visual Studio 2026を開きます。

  2. 新しいプロジェクトを作成し、［Blazor Serverアプリ］テンプレートを選択します。


  3. プロジェクト名を入力し、［次へ］をクリックします。

  4. ［対象のフレームワーク］を設定し、「HTTPS用の構成」オプションを無効にし、［作成］をクリックします。

  5. 次のパッケージをプロジェクトに追加します。

    • MESCIUS.ActiveReports.Aspnetcore.Viewer.ja

    • MESCIUS.ActiveReports.Blazor.Viewer.ja

  6. プロジェクトフォルダ内に ［Reports］フォルダを作成します。Reportsフォルダには、ビューワに表示するレポート（RdlReport1.rdlx）を配置します。

  7. レポートの［ビルドアクション］プロパティが「埋め込みリソース」に設定されていることを確認します。

  8. Pagesフォルダを右クリックし、［追加］->［Razorコンポーネント］を選択します。名前をBlazorViewer.razorに設定します。

  9. BlazorViewer.razorページには、次のコードを追加します。

    @page "/blazorviewer"
<h3>BlazorViewerTest</h3>
<div style="width:100%; height: 100vh">
    <GrapeCity.ActiveReports.Blazor.Viewer.ReportViewer ReportName="RdlReport1.rdlx"></GrapeCity.ActiveReports.Blazor.Viewer.ReportViewer>
</div>
@code {
}

  10. ［Shared］フォルダ->［NavMenu.razor］ページには、次のコードを追加します。

<li class="nav-item px-3">
            <NavLink class="nav-link" href="blazorviewer">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Blazor Viewer
            </NavLink>
</li>

  1. Dataフォルダでは、ReportsService.csクラスを追加します。

namespace BlazorApp1.Data
{
    public class ReportsService
    {
        public static string EmbeddedReportsPrefix = "BlazorApp1.Reports";
        public IEnumerable<string> GetReports()
        {
            string[] validExtensions = { ".rdl", ".rdlx", ".rdlx-master", ".rpx" };
            return GetEmbeddedReports(validExtensions);
        }
        private static string[] GetEmbeddedReports(string[] validExtensions) =>
            typeof(ReportsService).Assembly.GetManifestResourceNames()
                .Where(x => x.StartsWith(EmbeddedReportsPrefix))
                .Where(x => validExtensions.Any(x.EndsWith))
                .Select(x => x.Substring(EmbeddedReportsPrefix.Length + 1))
                .ToArray();
    }
}

  • Program.csファイルを更新します。

    • 次のディレクティブを追加します。

      • using GrapeCity.ActiveReports.Aspnetcore.Viewer;

      • using System.Reflection;

    • アプリケーションにサービスを追加します。

    • UseReportViewer() ミドルウェアを追加することで、ブラウザからのレポート出力へのアクセスを提供します。

    builder.Services.AddSingleton<ReportsService>();
app.UseReportViewer(settings =>
{
    settings.UseEmbeddedTemplates(ReportsService.EmbeddedReportsPrefix, Assembly.GetAssembly(typeof(ReportsService)));                       
});

    メモ：UseEmbeddedTemplatesの代わりに、UseFileStoreメソッドまたはUseCustomStoreメソッドを使用できます。

    • UseEmbeddedTemplatesメソッドは、レポートをリソースとしてDLLに保存します。

    • UseFileStoreメソッドは、レポートをファイルシステムに保存します。

    • UseCustomStoreメソッドは、ユーザーが定義した任意の場所（たとえば、カスタムデータベースやそのような場所）にレポートを保存できます。

  1. アプリケーションを実行します。

組み込みのActiveReports Serverアプリケーションテンプレートを使用する

  1. Visual Studio 2026を開きます。

  2. 「ActiveReports for .NET 20.0J Blazor Serverアプリ」を選択し、［次へ］をクリックします。


  3. プロジェクト名を入力し、［作成］をクリックします。

  4. ［新規レポート］ダイアログでは、レポートの種類を選択し、［作成］をクリックしてデータ連結をスキップするか、［次へ］を選択してレポートにデータをバインドします。

    次の必要なパッケージがプロジェクトに自動的に追加されます。

    • MESCIUS.ActiveReports.Aspnetcore.Viewer.ja

    • MESCIUS.ActiveReports.Blazor.Viewer.ja

  5. Reportsフォルダからデフォルトの「RdlReport1.rdlx」レポートを開き、デザインします。

  6. レポートの［ビルドアクション］プロパティが「埋め込みリソース」に設定されていることを確認します。

  7. アプリケーションを実行します。

ActiveReports BlazorビューワWebAssemblyアプリケーションを作成する

Visual Studioテンプレートを使用する

  1. Visual Studio 2026を開きます。

  2. 新しいプロジェクトを作成し、［Blazor WebAssembly アプリ］テンプレートを選択します。


  3. プロジェクト名を入力し、［次へ］をクリックします。

  4. ［対象のフレームワーク］を設定し、「HTTPS用の構成」オプションを無効にし、［作成］をクリックします。

  5. 次のパッケージをプロジェクトに追加します。

    • MESCIUS.ActiveReports.Blazor.Viewer.ja

  6. プロジェクトフォルダ内に ［Reports］フォルダを作成します。Reportsフォルダには、ビューワに表示するレポート（RdlReport1.rdlx）を配置します。

  7. レポートの［ビルドアクション］プロパティが「埋め込みリソース」に設定されていることを確認します。

  8. Index.razorページを次のように変更します。

    @page "/"
@using MESCIUS.ActiveReports.Blazor.Viewer
<PageTitle>Index</PageTitle><div style="width:100%; height: 100vh">
 <ReportViewer ReportName="RdlReport.rdlx" ReportService="@_reportService"></ReportViewer></div>
@code{
    private ReportServiceSettings _reportService = new ReportServiceSettings()
    {
        Url = "http://localhost:58865/",
    };
}

  9. アプリケーションを実行します。

組み込みのActiveReportsアプリケーションテンプレートを使用する

  1. Visual Studio 2026を開きます。

  2. 「ActiveReports for .NET 20.0J Blazor WebAssemblyアプリ」を選択し、［次へ］をクリックします。


  3. プロジェクト名を入力し、［作成］をクリックします。

  4. ［新規レポート］ダイアログでは、レポートの種類を選択し、［作成］をクリックしてデータ連結をスキップするか、［次へ］を選択してレポートにデータをバインドします。

    次の必要なパッケージがプロジェクトに自動的に追加されます。

    • MESCIUS.ActiveReports.Blazor.Viewer.ja

  5. Reportsフォルダからデフォルトの「RdlReport1.rdlx」レポートを開き、デザインします。

  6. レポートの［ビルドアクション］プロパティが「埋め込みリソース」に設定されていることを確認します。

  7. 複数のスタートアッププロジェクトを設定します。

    1. ソリューションエクスプローラーでは、ソリューション（最上位ノード）を選択します。

    2. ソリューションのコンテキストメニューから、［プロパティ］を選択します。

    3. ソリューションプロパティページダイアログでは、［共通プロパティ］ノードを展開し、［スタートアッププロジェクト］を選択します。

    4. ［マルチスタートアッププロジェクト］オプションを選択し、両方のプロジェクトのアクションを「開始」に設定します。

  8. ReportServiceプロジェクトのlaunchSettings.jsonファイルとBlazorViewerWebAssemblyプロジェクトのindex.razorファイルのURLが同じであることを確認します。

  9. アプリケーションを実行します。