ActiveReports for .NET 18.0J
プレビューの構成
ActiveReportsユーザーガイド > レポートの表示 > Blazorデザイナの使用 > プレビューの構成

このトピックでは、Blazorデザイナ内でBlazorビューワを使用する方法を紹介します。

  1. Visual Studio 2022を開き、BlazorDesignerサンプルを開きます。
  2. Blazorビューワ用に次のパッケージをプロジェクトに追加します。
        MESCIUS.ActiveReports.Aspnetcore.Viewer.ja（BlazorDesignerServerアプリケーションの場合のみ）
        MESCIUS.ActiveReports.Blazor.Viewer.ja
  3. Program.csを開き、以下に示すようにファイルを更新します。（BlazorDesignerServerアプリケーションの場合のみ）
    Program.cs
    コードのコピー 
    using GrapeCity.ActiveReports.Aspnetcore.Designer;
using GrapeCity.ActiveReports.Aspnetcore.Viewer;
var resourcesRootDirectory = new DirectoryInfo(".\\resources\\");
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services
     .AddReportViewer()
     .AddReportDesigner()
     .AddMvc(options => options.EnableEndpointRouting = false)
     .AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy =
null);
var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
    // HSTSの既定値は30日です。本番シナリオでは変更することをお勧めします。詳細については、「https://aka.ms/aspnetcore-hsts」を参照してください。
    app.UseHsts();
}
app.UseHttpsRedirection();
app.UseReportViewer(config => config.UseFileStore(resourcesRootDirectory));
app.UseReportDesigner(config => config.UseFileStore(resourcesRootDirectory, false));
app.UseStaticFiles();
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.Run();
  4. Pages/Index.razorページを次のように変更します。
    Pages/Index.razor
    コードのコピー 
    @page "/"
@using GrapeCity.ActiveReports.Blazor.Designer;
@using GrapeCity.ActiveReports.Blazor.Viewer
@inject IJSRuntime JSRuntime
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css"
rel="stylesheet" />
<div style="height:100vh;width:100%">
     <ReportDesigner @ref="_designer" Document="@_document" Preview="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private ReportViewer _viewer;
    private Document _document = new Document() { Id = "report.rdlx", Type =
SupportedDocumentType.cpl };
    private Preview _preview;
    public Index()
    {
        _preview = new Preview()
            {
                CanPreview = true,
                OpenViewer = OpenViewer
            };
    }
    private async void OpenViewer(ViewerSettings settings)
    {
        if (_viewer != null)
        {
            await _viewer.OpenReport(settings.DocumentInfo.Id);
            return;
        }
        _viewer = new ReportViewer();
        var initOptions = new InitializationOptions();
        initOptions.ReportID = settings.DocumentInfo.Id;
        initOptions.PanelsLocation = PanelsLocation.toolbar;
        await _viewer.Render(JSRuntime, settings.Element, initOptions);
    }
}
  5. アプリケーションを実行します。

 

 

© MESCIUS inc. All rights reserved.