プレビューの構成

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

1. Visual Studio 2026を開き、BlazorDesignerサンプルを開きます。

2. Blazorビューワ用に次のパッケージをプロジェクトに追加します。

   MESCIUS.ActiveReports.Aspnetcore.Viewer.ja（BlazorDesignerServerアプリケーションの場合のみ）

   MESCIUS.ActiveReports.Blazor.Viewer.ja

3. Program.csを開き、以下に示すようにファイルを更新します。（BlazorDesignerServerアプリケーションの場合のみ）

   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ページを次のように変更します。

   @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. アプリケーションを実行します。