# HTML Report 뷰어
## Content
## 개요
**wijmo.viewer** 모듈은 두 가지 종류의 뷰어를 포함합니다: **PdfViewer**와 **ReportViewer**. **ReportViewer**는 **ActiveReports** 또는 **ComponentOne FlexReport**에서 생성된 보고서를 표시하는 데 사용되는 가벼운 뷰어입니다. 이를 사용하여 웹 앱에서 보고서를 표시할 수 있습니다.
>type=warning
> **\*참고:** Wijmo ReportViewer는 [ComponentOne(.NET제품) Web API](https://www.grapecity.co.kr/componentone/webapi)의 [Report Service API](https://www.grapecity.com/componentone/docs/webapi/online-webapi/ReportServices.html)를 통해 개발된 서비스로 부터 전달된 리포트 파일만 보여 줄 수 있습니다.
> Wijmo PDF Viewer는 단독으로 클라이언트 단의 public 경로에 있는 PDF 파일을 읽을 수 없습니다.
### 기능
**ReportViewer**는 사용자가 웹 또는 하이브리드 모바일 앱에서 생성된 보고서를 표시할 수 있도록 해줍니다.
문서 뷰어에서 기대할 수 있는 모든 기능을 기본적으로 제공합니다:
* 인쇄 및 페이지 설정 지원
* 반응형 뷰어
* 썸네일
* 검색
* 페이지네이션
* 문서 맵
* 전체 화면 및 크기 조정 옵션
* 연속 스크롤 옵션
* 내보내기 기능
### 기본 설정
**ReportViewer**를 사용하는 것은 다른 컨트롤을 사용하는 것과 비슷하며, 마크업에서 호스트 요소를 생성하고 JavaScript를 사용하여 컨트롤을 생성합니다. **ReportViewer**를 인스턴스화할 때, 보고서를 보기 위해 다음과 같은 속성을 설정해야 합니다:
1. **serviceUrl**: 보고서 서비스의 URL.
2. **filePath**: 서버에 있는 FlexReport 정의 파일, SSRS 보고서 또는 ActiveReports 보고서의 전체 경로.
3. **reportName**: FlexReport 정의 파일에서 정의된 보고서 이름.
##### 예제
```html
...
...
```
```javascript
let reportViewer = new viewer.ReportViewer('#reportViewer', {
serviceUrl: 'https://developer.mescius.com/componentone/demos/aspnet/c1webapi/latest/api/report'
});
```
**ReportViewer** 컨트롤에는 뷰어의 외형과 동작을 쉽게 사용자 지정할 수 있는 다음과 같은 속성이 있습니다:
1. **fullScreen**: 뷰어가 전체 화면 모드인지 여부를 나타냅니다.
2. **mouseMode**: 마우스 동작 방식을 나타냅니다.
3. **viewMode**: 문서 페이지를 표시하는 방법을 나타냅니다.
4. **zoomFactor**: 문서 페이지를 표시할 때 현재 확대 비율을 나타냅니다.
##### 예제
```javascript
reportViewer.fullScreen = true;
reportViewer.mouseMode = wijmo.viewer.MouseMode.MoveTool;
reportViewer.viewMode = wijmo.viewer.zoomMode.WholePage;
```
## 보고서 보기
**ReportViewer** 컨트롤은 여러 소스에서 보고서를 볼 수 있습니다. 보고서를 보는 일반적인 방법은 동일하지만, 지원되는 서버 기반 보고서에 연결하는 예제를 아래에 소개합니다.
### FlexReport
**FlexReport**는 ComponentOne 라이브러리의 .NET 보고서 도구입니다. **FlexReport**의 내용을 표시하려면 [ComponentOne Web API Report Services](https://helpcentral.componentone.com/nethelp/C1WebAPI/ReportServices.html)를 사용해야 합니다. **C1 Web API Report Services**는 **C1FlexReport**를 사용하여 보고서를 렌더링하고 내보냅니다. 이를 설정하는 방법은 다음 링크에서 확인할 수 있습니다: **[Configure FlexReports Web API](https://helpcentral.componentone.com/nethelp/C1WebAPI/webframe.html#Working%20with%20Reports.html)**
**ReportViewer**가 C1 WebApi에 연결하여 "AlternateBackground"라는 FlexReport를 표시하는 예제입니다:
```javascript
let reportViewer = new viewer.ReportViewer('#reportViewer', {
serviceUrl: : 'https://developer.mescius.com/componentone/demos/aspnet/c1webapi/latest/api/report',
filePath: 'ReportsRoot/Formatting/AlternateBackground.flxr',
reportName: 'AlternateBackground'
});
```
**ReportsRoot/** 지정된 보고서를 찾기 위해 서버에 등록된 보고서 제공자의 키입니다."Formatting/AlternateBackground.flxr"
는 보고서 제공자가 위치를 확인할 수 있는 **FlexReport 정의 파일**의 상대 경로입니다.
> **reportName** 필드는 FlexReoirts을 표시할 때만 필요합니다. (.flxr files)
### SSRS 보고서
**ReportViewer**를 사용하여 **SSRS 보고서**도 볼 수 있습니다. 이를 위해서는 **C1 Web API Report Services**를 사용해야 합니다. 설정 과정은 위와 동일하지만, 서버는 **FlexReport** 대신 **SSRS 보고서**를 사용하도록 구성됩니다.
**C1 Web API Report Services**는 **C1SSRSDocumentSource**를 사용하여 SSRS 서버와 연결하고 SSRS 보고서를 렌더링합니다. 먼저 서버에서 데이터를 가져오고, 그 후에 보고서를 원하는 형식(일반적으로 HTML5 SVG)으로 변환합니다. 자세한 내용은 [C1 Web API 문서](https://helpcentral.componentone.com/nethelp/C1WebAPI/ReportServices.html)를 참조하십시오.
##### Example:
```javascript
let reportViewer = new viewer.ReportViewer('#reportViewer', {
serviceUrl: 'https://developer.mescius.com/componentone/demos/aspnet/c1webapi/latest/api/report',
filePath: 'c1ssrs/AdventureWorks/Company Sales'
});
```
> **AdventureWorks/Company Sales** 는 서버에서 보고서의 전체 경로입니다
### ActiveReports
[ActiveReports](https://www.mescius.co.kr/activereportsnet)는 보고서 애플리케이션 개발을 쉽게 만들어주는 강력한 보고서 도구입니다. **Wijmo ReportViewer** 컨트롤은 **ActiveReports**에서 생성된 보고서도 표시할 수 있습니다. 이러한 **ActiveReports**를 보려면 **MESCIUS ActiveReports Web Services**를 사용해야 합니다.
**ActiveReports** 보고서의 내용을 표시하려면 **serviceUrl**과 **filePath** 속성만 설정하면 됩니다.
##### 예제:
```javascript
let reportViewer = new viewer.ReportViewer('#reportViewer', {
serviceUrl: 'https://ardemos.mescius.com/AR12-ReportsGallery/ActiveReports.ReportService.asmx',
filePath: 'Reports/RDL Reports/Banded List Control/District Sales.rdlx'
});
```