ActiveReports for .NET 18.0J
JavaScriptアプリケーションの組み込み
ActiveReportsユーザーガイド > レポートの表示 > JSビューワの使用 > JavaScriptアプリケーションの組み込み

このトピックでは、ActiveReportsを使用してASP.NET Coreアプリケーションを作成し、JSビューワでレポートを描画する方法について説明します。

  1. Razorページを含む[ASP.NET Core Webアプリ]を使用してASP.NET Core Webアプリケーションを作成し、ASP.NET Core のミドルウェアに示したように、ASP.NET Core のミドルウェアでActiveReportsのJSビューワを構成します。

  2. アプリケーションにJSViewerを追加します。

    • [表示]メニューから、[ターミナル] を開き、次のコマンドを実行します。
      npm install @mescius/activereportsnet-viewer-ja

    • node_modulesフォルダにインストールされたjsViewer.min.jsファイルとjsViewer.min.cssファイルを、アプリケーションのwwwroot\jsフォルダとwwwroot\cssフォルダにそれぞれコピーします。

  3. Index.cshtmlの内容を次のように変更します。

    Index.cshtml
    コードのコピー
    @page
    @model IndexModel
    @{
        ViewData["Title"] = "ホームページ";
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>ActiveReports JSViewer</title>
        <link rel="stylesheet" href="css/jsViewer.min.css" />
    </head>
    <body>
        <div id="viewer-id" style="width: 100%; height: 100vh;">
        </div>
        <!--reference to js file-->
        <script src="js/jsViewer.min.js"></script>
        <script type="text/javascript">
            GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewer-id',
                reportService: {
                    url: 'api/reporting',
                },
                reportID: 'DemoReport.rdlx',
                settings: {
                    zoomType: 'FitPage'
                },
            });
        </script>
    </body>
    </html>
    
  4. 次のようにStartup.csクラスにReportingサービスを追加して、Startup.csクラスを変更します。

    Startup.cs
    コードのコピー
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                    app.UseHsts();
                }
                app.UseHttpsRedirection();
                app.UseStaticFiles();
                app.UseReporting(settings =>
                {
                    settings.UseFileStore(new System.IO.DirectoryInfo(env.ContentRootPath + @"\Reports\"));
                });
                app.UseRouting();
                app.UseAuthorization();
                app.UseEndpoints(endpoints =>
                {
                    endpoints.MapRazorPages();
                });
            }
    
  5. ソリューションをビルドして実行します。