Wijmo 시작하기
Topics
- Wijmo
- Chart
- Map
- Cloud
- Gauge
- Grid
- OLAP
- Input
- Nav
- Viewer
  - PDFViewer
  - ReportViewer
- PDF

HTML Report 뷰어

개요

wijmo.viewer 모듈은 두 가지 종류의 뷰어를 포함합니다: PdfViewer와 ReportViewer. ReportViewer는 ActiveReports 또는 ComponentOne FlexReport에서 생성된 보고서를 표시하는 데 사용되는 가벼운 뷰어입니다. 이를 사용하여 웹 앱에서 보고서를 표시할 수 있습니다.

기능

ReportViewer는 사용자가 웹 또는 하이브리드 모바일 앱에서 생성된 보고서를 표시할 수 있도록 해줍니다.

문서 뷰어에서 기대할 수 있는 모든 기능을 기본적으로 제공합니다:

인쇄 및 페이지 설정 지원
반응형 뷰어
썸네일
검색
페이지네이션
문서 맵
전체 화면 및 크기 조정 옵션
연속 스크롤 옵션
내보내기 기능

기본 설정

ReportViewer를 사용하는 것은 다른 컨트롤을 사용하는 것과 비슷하며, 마크업에서 호스트 요소를 생성하고 JavaScript를 사용하여 컨트롤을 생성합니다. ReportViewer를 인스턴스화할 때, 보고서를 보기 위해 다음과 같은 속성을 설정해야 합니다:

serviceUrl: 보고서 서비스의 URL.
filePath: 서버에 있는 FlexReport 정의 파일, SSRS 보고서 또는 ActiveReports 보고서의 전체 경로.
reportName: FlexReport 정의 파일에서 정의된 보고서 이름.

예제

<body>
    ...
    <div id="reportViewer"></div>
    ...
</body>

let reportViewer = new viewer.ReportViewer('#reportViewer', {
        serviceUrl:  'https://developer.mescius.com/componentone/demos/aspnet/c1webapi/latest/api/report'
    });

ReportViewer 컨트롤에는 뷰어의 외형과 동작을 쉽게 사용자 지정할 수 있는 다음과 같은 속성이 있습니다:

fullScreen: 뷰어가 전체 화면 모드인지 여부를 나타냅니다.
mouseMode: 마우스 동작 방식을 나타냅니다.
viewMode: 문서 페이지를 표시하는 방법을 나타냅니다.
zoomFactor: 문서 페이지를 표시할 때 현재 확대 비율을 나타냅니다.

예제

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를 사용해야 합니다. C1 Web API Report Services는 C1FlexReport를 사용하여 보고서를 렌더링하고 내보냅니다. 이를 설정하는 방법은 다음 링크에서 확인할 수 있습니다: Configure FlexReports Web API

ReportViewer가 C1 WebApi에 연결하여 "AlternateBackground"라는 FlexReport를 표시하는 예제입니다:

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 문서를 참조하십시오.

Example:

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는 보고서 애플리케이션 개발을 쉽게 만들어주는 강력한 보고서 도구입니다. Wijmo ReportViewer 컨트롤은 ActiveReports에서 생성된 보고서도 표시할 수 있습니다. 이러한 ActiveReports를 보려면 MESCIUS ActiveReports Web Services를 사용해야 합니다.

ActiveReports 보고서의 내용을 표시하려면 serviceUrl과 filePath 속성만 설정하면 됩니다.

예제:

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'
    });