ComponentOne 2021v3 릴리스에서는 .Net Core 6에서 C1WebApi 보고서 서비스를 만들기 위한 지원을 추가했습니다. 이전 버전에서 보고서 서비스는 .NET Framework와만 호환되었습니다. 이번 업데이트로 인해 사용자는 .NET 6를 사용하여 FlexReport API를 만들 수 있습니다.

ComponentOne Web API Edition은 다양한 클라이언트가 FlexReports 및 SSRS 보고서를 보고, 로드하며, 캐싱하는 데 사용할 수 있는 HTTP 서비스를 사용자가 구축할 수 있도록 하는 보고서 서비스를 제공합니다. 이러한 서비스는 REST 기반 API 서비스로, HTML 5 ReportViewer 컨트롤과 통신하여 웹에 보고서 콘텐츠를 표시합니다.

이 문서에서는 .NET Core 6에서 보고서 서비스를 만들고 .NET MVC Core에서 ComponentOne FlexViewer를 사용하여 보고서를 표시하는 방법에 대해 설명합니다.

다음 작업을 수행하는 방법을 배울 수 있습니다.

• C1WebApi 추가

• FlexViewer에서 보고서 표시

• FlexReports에서 검색

• 다양한 형식으로 내보내기

C1WebApi 추가

.NET 6를 사용하여 Web API for FlexReport를 개발하려면 다음 패키지가 필요합니다.

• C1.AspNetCore.Api

• C1.AspNetCore.Api.Report

Visual Studio에서 새로운 프로젝트를 만들고 템플릿으로 ASP.NET Core Web API를 사용합니다.

다음 대화 상자에서 원하는 위치와 프로젝트의 이름을 선택합니다.

다음 대화 상자에서 프로젝트의 프레임워크로 .NET 6를 선택합니다.

이렇게 하면 .NET Core 6를 대상으로 한 WebApi 프로젝트가 만들어집니다.

프로젝트를 만든 후 도구 → NuGet 패키지 관리자 → 솔루션용 NuGet 패키지 관리로 이동하고 위의 패키지를 설치합니다.

C1.AspNetCore.Api 패키지는 클라이언트로부터 데이터를 받거나 전송하는 등 C1WebApi의 핵심 기능을 제공하며 C1.AspNetCore.Api.Report 패키지는 FlexReport를 가져오고 구문 분석하기 위한 API를 포함합니다.

이제 C1WebApi 기능을 추가하고 보고서 공급자를 추가하겠습니다. 다음 줄을 Program.cs 파일에 추가합니다.

using C1.AspNetCore.Api;  
...  
app.UseC1Api();  
var root = app.Environment.ContentRootPath;  
app.UseReportProviders().AddFlexReportDiskStorage("Root", Path.Combine(root, "Reports"));

UseC1Api 메서드는 C1WebApi에서 제공한 모든 서비스의 API를 만들고 AddFlexReportDiskStorage 메서드는 프로젝트 루트 내부에 있는 보고서 폴더로 API를 바인딩합니다.

여기에서 루트는 보고서를 가져오는 동안 이 폴더를 참조하는 데 사용할 수 있는 키입니다.

이제 보고서 폴더를 프로젝트에 추가하겠습니다.

프로젝트 이름을 마우스 오른쪽 버튼으로 클릭하고 추가 → 새 폴더를 선택한 다음 폴더 이름을 Reports로 지정합니다.

이 폴더에 FlexReports 파일을 넣을 수 있습니다.

이 문서에서는 ComponentOne에서 이미 제공한 샘플 보고서를 사용하고 있습니다.

Documents\ComponentOne Samples\Web Api\v4.5.2\CS\WebApi\WebApi\ReportsRoot\FinancialReports로 이동하고 BalanceSheet.flxr 보고서를 이전에 만든 보고서 폴더로 복사합니다.

복사한 후에는 F5 키를 누르고 다음 URL로 이동하여 응용 프로그램을 실행합니다.

https://localhost:/api/report/Root

이렇게 하면 보고서 폴더를 포함하는 모든 보고서가 JSON 형식으로 반환됩니다. 여기에서 루트 키는 보고서를 가져오는 데 사용되었습니다.

결과는 컴퓨터에 따라 달라질 수 있습니다.

참고: 프로젝트 내에 보고서 폴더가 있어야 할 필요는 없으며 컴퓨터 어디에든 있어도 됩니다. 하지만 프로젝트에 이 폴더와 폴더 안에 있는 파일을 읽고 쓸 수 있는 권한이 있는지 확인해야 합니다.

FlexViewer에서 보고서 표시

이 문서의 기본 목적은 보고서를 표시하는 것입니다. FlexReports는 사용자가 이해하기 어려운 XML 형식으로 저장됩니다. 따라서 이 XML을 구문 분석하여 사용자에게 친숙한 형식으로 표시하는 방법이 필요합니다.

C1WebApi 보고서 서비스는 XML에서 이 보고서를 구문 분석하는 데 필요하며 FlexViewer 컨트롤은 이 구문 분석된 보고서를 표시하는 데 사용됩니다. 이 문서에서는 ComponentOne MVC Core FlexViewer 컨트롤을 사용하겠습니다.

MVC Core 프로젝트에서 다음 NuGet 패키지를 추가합니다.

• C1.AspNetCore.Mvc

• C1.AspNetCore.Mvc.FlexViewer

Visual Studio에서 새 프로젝트를 만드는 동안,

ASP.NET Core Web App(Model-View-Controller) 템플릿을 선택하고 다음을 클릭합니다.

다음 대화 상자에 프로젝트의 이름과 프로젝트를 만들 위치를 입력합니다.

추가 정보 대화 상자에서 Web API 프로젝트와 동일한 프레임워크로 .NET 6를 선택하고 프로젝트를 만듭니다.

프로젝트를 만든 후 위의 패키지를 설치합니다.

이러한 패키지를 설치했으면 패키지의 참조를 cshtml 파일에 추가해야 합니다.

Views\Shared_Layout.cshtml 파일에서 헤드 태그의 바로 앞에 다음 줄을 추가합니다.

<c1-styles />  
<c1-scripts>  
  <c1-basic-scripts />  
  <c1-flex-viewer-scripts />  
</c1-scripts>

​

Views_ViewImports.cshtml 파일에서 다음 태그 도우미를 추가합니다.

@addTagHelper *, C1.AspNetCore.Mvc  
@addTagHelper *, C1.AspNetCore.Mvc.FlexViewer  

이제 MVC 컨트롤의 참조를 추가했으며 FlexViewer 컨트롤을 쉽게 추가하고 WebApi 서비스에 바인딩할 수 있습니다. Views\Home\Index.cshtml 파일에 다음 코드 조각을 추가합니다.

<c1-report-viewer service-url="http://localhost:<port>/api/report" file-path="Root/BalanceSheet.flxr" report-name="BalanceSheet"></c1-report-viewer>
​

여기에서 service-url은 C1WebApi의 URL입니다.

file-path는 FlexReport 파일의 경로로, 여기서 루트 폴더는 API를 만드는 동안 추가한 키이며 report-name은 표시할 보고서의 이름입니다.

필요한 코드를 추가한 후 응용 프로그램을 실행하면 결과는 다음과 유사합니다.

FlexReport에서 검색

검색 기능은 FlexViewer에 구축됩니다.

사용자가 검색 키를 입력할 때마다 C1WebApi가 호출되며 JSON 형식으로 검색 결과가 반환됩니다.

그러면 FlexViewer에서 결과를 구문 분석하며 FlexReport에 표시됩니다.

왼쪽 도구 모음에서 검색 버튼을 클릭하고 검색 문자열을 입력합니다.

다양한 형식으로 내보내기

C1WebApi는 향후 사용을 위해 다양한 형식으로 FlexReport 내보내기도 지원합니다.

다음 형식을 사용할 수 있습니다.

• Adobe PDF 문서

• HTML SVG 문서

• TIFF, JPG, PNG, BMP 및 GIF 이미지

• Open XML Word 문서

• Open XML Excel 문서

왼쪽 도구 모음에서 내보내기 버튼을 클릭하고 적절한 형식을 선택한 다음 내보내기를 클릭합니다.

문서: https://www.grapecity.com/componentone/docs/webapi/online-webapicore/reportservices.html

데모: https://demos.componentone.com/aspnet/webapiexplorer

샘플: https://bitbucket.org/ashwin2409/flexreportnet6/src/master/

FlexReport의 핵심 기능

강력한 보고 엔진

FlexReport는 가볍고 빠른 보고 컴포넌트입니다. 또한 FlexReport를 사용하는 PDF 및 HTML로의 내보내기와 같은 주요 내보내기 기능은 레거시 C1Report보다 훨씬 빠르게 실행됩니다.

고급 데이터 작업

FlexReport는 일부 정렬 식을 정의하여 데이터 그룹화에 대한 지원을 제공합니다. 또한 데이터 정렬 및 그룹화는 서로 독립적이므로 레코드 집합에서 그룹화를 적용하고 정렬을 통해 레코드 순서를 조작할 수 있습니다.

그룹화 및 집계된 데이터 표시

FlexReport에서 각 섹션에는 최소 하나의 하위 섹션이 포함됩니다. 섹션과 마찬가지로 하위 섹션에는 보고서 필드가 포함됩니다. 하위 섹션 추가의 이점은 상위 섹션에 표시되는 데이터를 향상하도록 지원한다는 것입니다.

하위 섹션은 보고서에서 시각적 나누기를 만들어 사용자가 정보를 빠르게 검색하고 찾아볼 수 있습니다. 또한 특정 사용자의 기밀 정보를 숨길 수 있으며 사용자가 표를 확장하거나 축소하고 다른 데이터와 다르게 요약된 데이터의 서식을 지정할 수 있게 됩니다.

모든 문서 유형의 단일 뷰어

FlexReport는 C1Report, C1FlexReport, SSRS 및 C1Document와 같은 다중 문서를 보는 데 사용할 수 있는 HTML 5 컨트롤인 FlexViewer를 지원합니다. 또한 매개 변수를 사용/재설정하는 기능, 보고서 렌더링을 새로 고치고 취소하는 옵션, 보고서 위치로 이동하는 책갈피 등도 제공합니다.

광범위한 차트 유형

FlexReport는 70개가 넘는 차트 유형 중에서 선택할 수 있습니다. 데이터를 차트에 바인딩, 속성 설정 및 시각 효과를 추가하는 등의 작업은 FlexReportDesigner 응용 프로그램에서 사용 가능한 디자인 타임 편집기를 통해 쉽게 수행할 수 있습니다.

인터넷 기반 데이터 소스 지원

FlexReport는 OData, Kintone, Microsoft Dynamics 365, Quick Books, Salesforce와 같은 인터넷 기반 데이터 소스도 지원합니다. FlexReportDesigner에서 이러한 데이터 소스 중 하나를 선택하고 적절한 정보를 입력하여 이러한 소스로부터 데이터를 연결하고 가져올 수 있습니다.

SQLite 데이터베이스 지원

FlexReportDesigner에서 SQLite 연결을 지정하여 다른 데이터베이스와 마찬가지로 데이터를 가져올 수 있습니다. 시스템에 SQLite ADO.NET 공급자가 설치되어 있으면 가장 좋습니다. 자세한 내용은 SQLite를 참조하십시오.

지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!

• ComponentOne 공식 홈페이지
• ComponentOne 튜토리얼 및 샘플
• ComponentOne Q&A
• ComponentOne FAQ