이 문서에서는 고급 .NET 웹 보고 도구로서 ActiveReports.NET의 중요한 이점에 대해 설명하고 최종 사용자가 웹 브라우저에서 직접 보고서를 볼 수 있도록 ASP.NET 6.0(또는 ASP.NET Core) 보고서 뷰어 애플리케이션을 만들어 JSViewer 웹 보고서 뷰어를 구현하는 방법의 예시를 제공합니다.

JSViewer 컴포넌트는 ASP.NET, 순수 JavaScript, Angular(앵귤러), React(리액트), Vue(뷰) 및 Blazor(블레이져)와 같은 광범위한 프로젝트 유형에서 사용할 수 있습니다. 물론 예시에서는 특히 ASP.NET에 대해 다루겠습니다.

이 문서는 뷰어에 대해 명시적으로 다루므로 사용자에게 모든 기능을 갖춘 디자이너의 액세스 권한을 제공하는 정보를 원하는 경우 디자이너에 대한 자세한 내용은 보고서 디자이너 페이지를 확인하시기 바랍니다.

자체 ASP.NET 6.0(또는 .NET Core) 보고서 뷰어 응용 프로그램을 만들도록 JSViewer를 포함하는 방법

시작하기 전에 ActiveReports 샘플 GitHub 리포지토리에서 ASP.NET MVC, React, Angular, Vue 및 Blazor에 미리 구성된 프로젝트를 찾아볼 수 있습니다.

다음 단계를 통해 JSViewer를 기존 응용 프로그램 중 하나에 구현합니다.

• 새로운 ASP.NET 프로젝트 만들기

• JSViewer 미들웨어 구성

• JSViewer 패키지를 응용 프로그램에 추가

JSViewer ASP.NET Core 미들웨어 설정

먼저 JSViewer의 미들웨어를 설정해야 합니다. 이러한 미들웨어 컴포넌트는 HTTP 요청 및 응답을 처리합니다. Visual Studio에서 ASP.NET Core 웹 앱 템플릿이 추가한 기본 코드는 파이프라인을 처리하는 요청의 핵심을 설정하므로 거기서부터 시작해 보겠습니다.

새로운 ASP.NET 프로젝트 만들기

1. Visual Studio를 열고 "새 프로젝트 만들기"를 선택합니다.

2. ASP.NET Core 웹 앱 선택

3. 적절하다고 간주되면 프로젝트의 이름을 지정하고 "다음"을 클릭합니다.

4. 대상 프레임워크를 선택하고 "HTTPS에 대해 구성"을 선택 취소한 다음 "만들기"를 클릭합니다.

*이 예시에서는 .NET 6.0을 선택하겠습니다.

JSViewer 미들웨어 구성

이제 시작하기에 적합한 템플릿이 생성되었으므로 웹 보고 요구 사항의 처리 속도를 높이기 위해 몇 가지 사항을 변경할 수 있습니다.

1. Solution Explorer에서 마우스 오른쪽 버튼으로 프로젝트를 클릭하고 "NuGet 패키지 관리"를 선택합니다.

2. "찾아보기"를 클릭한 후 프로젝트에 다음 패키지를 추가합니다.

   GrapeCity.ActiveReports.Aspnetcore.Viewer

3. 표시되는 라이선스 수락 대화 상자에서 "수락합니다"를 클릭합니다.

4. 응용 프로그램의 루트 디렉터리에 "Reports"라는 새 폴더를 추가하고 이 폴더의 뷰어에 표시할 보고서를 배치합니다.

* 참고로 이는 보고서 뷰어 컴포넌트에서 보고서에 액세스할 수 있도록 하는 유일한 방법은 아니지만 ASP.NET Core 보고서 뷰어 예시에서 수행하는 편리하고 쉬운 방법일 뿐입니다.

5. 보고서 파일의 "빌드 작업" 속성을 "Embedded Resource"로 설정해야 합니다.

6. .NET 6.0보다 오래된 .NET 버전을 사용 중인 경우 "Startup.cs" 파일의 콘텐츠를 다음으로 바꿉니다.

   using Microsoft.AspNetCore.Builder;
   using Microsoft.AspNetCore.Hosting;
   using Microsoft.Extensions.Configuration;
   using Microsoft.Extensions.DependencyInjection;
   using Microsoft.Extensions.Hosting;
   using GrapeCity.ActiveReports.Aspnetcore.Viewer;
   namespace JsViewer_Core
   {
      public class Startup
     {
          public Startup(IConfiguration configuration)
         {
              Configuration = configuration;
         }
          public IConfiguration Configuration { get; }
          // This method gets called by the runtime. Use this method to add services to the container.
          public void ConfigureServices(IServiceCollection services)
         {
              services.AddRazorPages();
         }
          // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
          public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
         {
              if (env.IsDevelopment())
             {
                  app.UseDeveloperExceptionPage();
             }
              else
             {
                  app.UseExceptionHandler("/Error");
             }
              app.UseReporting(settings =>
             {
                  settings.UseEmbeddedTemplates("JsViewer_Sample.Reports", this.GetType().Assembly);
                  settings.UseCompression = true;
             });
              app.UseStaticFiles();
              app.UseRouting();
              app.UseAuthorization();
              app.UseEndpoints(endpoints =>
             {
                  endpoints.MapRazorPages();
             });
         }
     }
   }

   * 보고서에 대해 올바른 네임스페이스가 "UseEmbeddedTemplates"의 첫 번째 인수에 제공되었는지 확인합니다. 이는 "NameOfYourProject.Reports"여야 합니다.
   

7. .NET 6.0을 대상으로 하는 경우 다음과 같이 "Program.cs" 파일을 대신 수정해야 합니다.

   using GrapeCity.ActiveReports.Aspnetcore.Viewer;
   ​
   var builder = WebApplication.CreateBuilder(args);
   // Add services to the container.
   builder.Services.AddRazorPages();
   ;
   var app = builder.Build();
   // Configure the HTTP request pipeline.
   if (!app.Environment.IsDevelopment())
   {
      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.UseEmbeddedTemplates("JsViewer_Sample.Reports", System.Reflection.Assembly.GetEntryAssembly());
      settings.UseCompression = true;
   });
   app.UseRouting();
   app.UseAuthorization();
   app.MapRazorPages();
   app.Run();

   * 보고서에 대해 올바른 네임스페이스가 "UseEmbeddedTemplates"의 첫 번째 인수에 제공되어야 합니다. 이는 "NameOfYourProject.Reports"여야 합니다. 

프론트 엔드와의 통합

이제 미들웨어를 설정했으며 프런트 엔드 설정으로 이동하여 모든 항목이 제대로 작동하는지 확인할 수 있습니다.

예시에서는 일반 ASP.NET 6.0/JavaScript 프런트 엔드를 사용한 설정을 다루고 있지만 다른 프레임워크에서 설정을 지원해야 하는 경우 Angular, React 및 Vue에 대한 문서 링크를 따라 관련 내용을 확인할 수 있습니다.

JSViewer 패키지를 응용 프로그램에 추가

1. "도구" 메뉴를 열고 "NuGet 패키지 관리자" > "패키지 관리자 콘솔"을 선택한 후 콘솔에서 다음 명령을 실행합니다.

   npm install @grapecity/ar-viewer

2. "node_modules\@grapecity\ar-viewer\dist" 폴더에 설치된 "jsViewer.min.js" 및 "jsViewer.min.css" 파일을 각각 응용 프로그램의 "wwwroot\js" 및 "wwwroot\css" 폴더에 복사합니다. *참고: Solution Explorer에 표시되지 않을 수 있으므로 이러한 파일을 보려면 파일 탐색기에서 프로젝트 디렉터리를 열어야 할 수 있습니다.

3. "Index.cshtml" 파일의 코드를 다음으로 바꿉니다.

   @page
   @model IndexModel
   @{
     ViewData["Title"] = "Home page";
   }
   <!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: 100%;">
     </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: 'MyReport.rdlx',
             settings: {
                 zoomType: 'FitPage'
             },
         });
     </script>
   </body>
   </html>

   * "reportID:" 다음의 보고서 이름 "MyReport.rdlx"를 "Reports" 폴더에 배치한 보고서의 이름으로 바꿉니다. 

모두 끝났습니다. 이제 응용 프로그램을 실행할 수 있으며 여기에서 인터페이스를 사용하여 프로젝트에 추가한 보고서를 로드할 수 있어야 합니다.

또한 나중에 코드를 통해 특정 보고서를 로드하려는 경우 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

var viewer = new GrapeCity.ActiveReports.JSViewer.create({
   element: '#viewer-host'
});
viewer.openReport("DemoReport.rdlx");

평소와 같이 Angular, React 또는 Vue를 사용 중인 경우 GrapeCity 문서에서 이 작업을 수행하는 방법을 찾아볼 수 있습니다.

ActiveReports.NET의 핵심 기능

최종 사용자의 임시 보고

데스크톱 또는 웹 솔루션에서 사용자 정의 최종 사용자 보고서 디자이너를 포함하여 사용자에게 맞춤화된 임시 보고서 생성 환경을 제공할 수 있습니다.

다중 보고서 유형

레이아웃 중심 페이지 보고서, 스크롤 RDL 보고서 및 코드 기반 섹션 보고서 중에서 선택하여 완전한 기능을 갖춘 보고서 라이브러리를 만듭니다.

여러 형식으로 내보내기

ActiveReports.NET는 PDF, Excel, Word, CSV 등과 같이 다양한 내보내기 형식을 지원합니다.

조건부 서식

식을 사용하여 .NET 보고서를 쉽게 조건부 서식으로 지정합니다. 식은 값을 계산하거나 문자열을 연결하거나 스타일이 적용된 조건을 설정하는 데 사용할 수 있는 단순 스크립트입니다.

그룹화 및 정렬

Table, Tablix, Charts 및 기타 데이터 영역은 그룹화 및 정렬을 지원합니다. 단순한 표 형식 보고서부터 복잡한 여러 수준 그룹화, 정렬 및 드릴다운 보고서까지 생성합니다. 그룹화, 정렬 및 드릴다운 설정은 단일 속성을 설정하여 수행됩니다.

매개 변수화된 보고서

동적 보고서를 만드는 또 다른 방법은 매개 변수를 사용하는 것입니다. 매개 변수는 사용자 입력을 가져와 원하는 양으로 데이터를 필터링하는 프롬프트입니다.

더 많은 내용이 있습니다!

자세히 알아보는 데 관심이 있으면 기본 제품 페이지의 "Top .NET 보고 기능" 섹션을 확인하여 당사의 주력 기능에 대한 더 많은 예시를 찾아보시기 바랍니다. 문서 및 데모 페이지를 직접 살펴보는 것도 좋습니다.