BlazorビューワアプリケーションはJSビューワと同じクライアントサーバモデルを使用するため、フォント設定機能やクロスサイトスクリプティング攻撃の防止などのサーバー側構成に関するすべての詳細は、Blazorビューワにも関連します。
このトピックでは、Blazorビューワを組み込んだWebアプリケーションを作成する方法について説明します。
次のパッケージをプロジェクトに追加します。
BlazorViewer.razor |
コードのコピー
|
---|---|
<div class="main"> <div id="viewerContainer"> <ReportViewer @ref="_viewer" ReportName="@_currentReport" ViewerInitialized="InitializedViewer" DocumentLoaded="@DocumentLoaded"/> </div> </div> |
プロジェクトフォルダ内に [Reports]フォルダを作成します。Reportsフォルダには、ビューワに表示するレポート(RdlReport1.rdlx)を配置します。
レポートの[ビルドアクション]プロパティが「埋め込みリソース」に設定されていることを確認します。
Pagesフォルダを右クリックし、[追加]->[Razorコンポーネント]を選択します。名前をBlazorViewer.razorに設定します。
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 { } |
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> |
ReportService.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 |
コードのコピー
|
---|---|
builder.Services.AddSingleton<ReportsService>();
app.UseReportViewer(settings =>
{
settings.UseEmbeddedTemplates(ReportsService.EmbeddedReportsPrefix, Assembly.GetAssembly(typeof(ReportsService)));
});
|
メモ:UseEmbeddedTemplatesの代わりに、UseFileStoreメソッドまたはUseCustomStoreメソッドを使用できます。
次の必要なパッケージがプロジェクトに自動的に追加されます。
Reportsフォルダからデフォルトの「RdlReport1.rdlx」レポートを開き、デザインします。
複数のスタートアッププロジェクトを設定します。
プロジェクトフォルダ内に [Reports]フォルダを作成します。Reportsフォルダには、ビューワに表示するレポート(RdlReport1.rdlx)を配置します。
レポートの[ビルドアクション]プロパティが「埋め込みリソース」に設定されていることを確認します。
Index.razorページを次のように変更します。
BlazorViewer.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/", }; } |