ActiveReportsJS 시작하기 > 온라인 스터디

본문 바로가기

ActiveReportsJS

온라인 스터디

PureJS ActiveReportsJS 시작하기

페이지 정보

작성자 GrapeCity 작성일 21-03-25 14:18 조회 97회 댓글 0건

본문

ActiveReportsJS는 보고서를 만들어 리치 클라이언트 웹 응용 프로그램에 통합할 수 있는 도구 세트입니다. 여기에는 응용 프로그램에 포함할 수 있는 크로스 플랫폼 디자이너, 뷰어 및 내보내기 모듈이 포함되어 있습니다.


이 게시글에서는 각 항목을 사용하여 멋진 보고서를 직접 만드는 방법을 보여드리겠습니다.

  • 다운로드

  • 보고서 만들기

    • 데이터 소스 추가

    • 보고서 디자인

    • 테이블 컨트롤 추가

  • ActiveReportsJS를 응용 프로그램에 추가

    • 설정

    • 구성 요소 참조

    • 뷰어 구성

    • 보고서 보기


도구를 다운로드하여 JavaScript 보고서 만들기

먼저 여기서 ActiveReportsJS를 다운로드합니다.

다운로드 파일은 메일로 전달되며, 메일의 링크를 통해 컴퓨터에 맞는 플랫폼을 선택할 수 있습니다.


지원하는 리포트 디자이너의 설치 환경은 아래와 같습니다.

  • Windows
  • Linux
  • Mac


다운로드에는 위에서 언급한 ActiveReportsJS 디자이너, 뷰어 및 내보내기 모듈이 포함되어 있습니다.


기본적으로 30일 평가판 제품을 사용할 수 있습니다.


다운로드 후 파일의 압축을 풀고 디자이너 폴더로 이동합니다. .dmg/.exe/.AppImage 파일을 두 번 클릭하여 디자이너를 설치합니다.


응용 프로그램을 열면 평가판 기간을 표시하는 배너가 메뉴에 나타납니다.

(체험 기간에는 해당 배너를 무시할 수 있음).


모든 기능을 둘러보려면 디자이너를 계속 사용하십시오.


JavaScript 보고서 만들기


ActiveReportsJS 디자이너를 사용하면 데이터 소스 추가부터 대화형 보고서 생성까지 보고서를 모두 제어할 수 있습니다. 보고서 디자이너는 이 도구를 사용하여 보고서 디자인 및 생성을 쉽게 찾아냅니다.


보고서를 만들려면 주 메뉴 모음에서 “파일” 옵션을 선택합니다. 파일 패널이 열리고 RDL 또는 페이지 보고서를 만들 수 있는 옵션이 제공됩니다.


일반적으로 RDL 보고서 유형은 렌더링 공간의 크기에 따라 확장 가능한 보고서에 사용됩니다. 이 유형에서는 보고서 컨트롤이 런타임에 확장 또는 축소될 수 있습니다.


페이지 보고서 유형은 레이아웃 기반입니다. 페이지 보고서는 레이아웃 제한 조건을 엄격히 적용해야 하고 크기가 고정된 보고서에 가장 적합합니다.


이 예시를 사용하려면 페이지 보고서를 선택합니다.


ActiveReportsJS 시작하기


데이터 소스 추가

ActiveReportsJS는 JavaScript 제품이므로 JSON은 허용되는 데이터 형식입니다.

디자이너를 사용하여 시작하기 위해 JSON 데이터 소스를 추가해 보겠습니다. 오른쪽 상단의 하위 메뉴에서 “데이터” 아이콘을 클릭하여 데이터 패널로 이동합니다.

ActiveReportsJS 시작하기


“데이터 소스” 아래에 있는 “+” 버튼을 클릭합니다. 다음과 같은 대화 상자가 나타납니다.

ActiveReportsJS 시작하기


데이터 소스를 구성할 수 있는 여러 가지 옵션이 있습니다.

  1. 로컬 JSON 파일 사용

  2. 보고서 서비스에 연결

  3. 연결 문자열 사용

ActiveReportsJS 시작하기


사용하려는 로컬 JSON 파일이 있는 경우 “포함”을 true로 변경합니다. 그런 다음 “파일에서 로드”를 클릭하고 파일을 선택합니다. 포함된 콘텐츠 섹션에 파일이 표시됩니다.


보고서 서비스에 연결하려면 서비스의 URI를 “콘텐츠 URI”에 복사합니다. 로컬 데이터베이스 파일에서 로드할 수도 있습니다.


데이터 소스를 적절히 구성한 후 “데이터 소스 추가”를 클릭하여 완료합니다.


다음 단계는 데이터 소스에서 데이터의 하위 집합인 데이터 집합을 만드는 것입니다. 단일 데이터 소스에서 여러 데이터 집합을 만들 수 있습니다.


방금 만든 데이터 소스의 옆에 있는 더하기 아이콘을 선택합니다.

ActiveReportsJS 시작하기


데이터 집합을 만들려면 원하는 데이터 필드를 반환하는 쿼리 문자열을 구성해야 합니다.

ActiveReportsJS 시작하기


예를 들어, 다음 쿼리 문자열은 내 파일의 제품 배열에서 모든 제품을 반환합니다.

$.Products[*]


“유효성 검사” 버튼을 클릭하여 쿼리 문자열이 올바른 필드를 캡처하는지 확인합니다. “바인딩 필드” 섹션은 필드 항목으로 채워집니다.


데이터 집합 생성에 대한 자세한 내용은 데이터 바인딩 문서를 참조하십시오.


JavaScript 보고서 디자인

데이터 소스와 데이터 집합이 설정되었으면 보고서 레이아웃 디자인을 시작할 수 있습니다. ActiveReportsJS 디자이너에는 디자인을 매우 쉽게 할 수 있는 여러 가지 보고서 컨트롤이 있습니다. 디자이너 왼쪽에는 각 보고서 컨트롤의 아이콘이 나열됩니다.


“메뉴” 아이콘을 클릭하여 왼쪽 컨트롤 패널을 확장합니다. 사용 가능한 모든 보고서 컨트롤을 사용하여 다양한 보고 레이아웃을 만들 수 있습니다. 컨트롤 목록에는 테이블, 바코드, 이미지, 목차, 차트 등이 포함됩니다.


수많은 기능을 사용할 수 있으므로 보고서 컨트롤과 기능을 직접 둘러보시기 바랍니다. 특정 컨트롤을 사용하는 방법에 대해 자세한 지침이 필요하면 문서의 보고서 컨트롤 섹션을 참조하십시오.


이 예시에서는 테이블 컨트롤을 추가하여 직원 데이터를 나열해 보겠습니다. 시작하기 전에 테이블 컨트롤을 자세히 알아보겠습니다.


테이블 컨트롤 추가


두 번 클릭하거나 클릭하여 끌어오면 모든 컨트롤을 사용할 수 있습니다. 컨트롤이 디자인 화면에 나타납니다.


테이블 컨트롤의 경우에는 기본적으로 3개의 행과 3개의 열을 보여줍니다.

ActiveReportsJS 시작하기

오른쪽 클릭 옵션을 사용하여 행과 열을 추가 또는 제거할 수 있습니다.


표시되는 3개의 열은 다음과 같습니다.

  1. 머리글 행

  2. 세부 정보 행

  3. 바닥글 행


세부 정보 행은 식을 사용하여 데이터를 바인딩하는 데 적합합니다.


데이터 집합에 있는 항목 수에 따라 이 섹션에 행이 런타임으로 추가됩니다. 셀 위에 마우스 커서를 놓으면 필드 선택 표시기 버튼이 셀에 나타납니다.


표시기를 클릭하고 셀에 바인딩하려는 필드를 선택합니다.


선택한 값의 식이 결과 셀에 포함됩니다. 또한 세부 정보 행에서 식을 선택하면 해당 필드가 전체 열에 바인딩됩니다.


데이터를 셀에 표시하려면 세부 정보 행의 다른 셀에 더 많은 식을 추가합니다.

ActiveReportsJS 시작하기


예시에서는 다음 필드를 선택하고 바닥글 행을 제거했습니다.

데이터 집합에서 필드를 선택하면 머리글 행이 자동으로 채워지는 것을 알 수 있습니다.

마지막 열은 제품의 총액입니다. (단가 X 재고수량).

ActiveReportsJS 시작하기


보고서를 미리 보면 모든 레코드가 보고서 내의 해당 필드와 함께 표시된 것을 알 수 있습니다.

ActiveReportsJS 시작하기


보고서 컨트롤 속성을 이용하여 보고서의 시각화를 향상할 수 있지만 이 단계는 건너뛰겠습니다.


다음 섹션에서는 만들어진 ARJS 보고서를 응용 프로그램에 통합하는 방법에 대해서 알아보겠습니다.


ActiveReportsJS를 응용 프로그램에 추가

보고서를 표시하려면 보고서 파일을 렌더링하기 위한 뷰어가 필요합니다. ActiveReportsJS 뷰어는 코드 몇 줄로 쉽게 응용 프로그램에 추가할 수 있습니다.

그 전에 ActiveReportsJS 파일을 응용 프로그램에 추가해야 합니다.


설정

간단한 웹 응용 프로그램을 만드는 것으로 시작합니다. 최소한 기본 HTML 파일을 만듭니다.

예:

<!DOCTYPE html>
​
<html>
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>ActiveReportsJS Demo</title>
​
      <meta name="description" content="Demo application of ActiveReportsJS Viewer and Report file">
      <meta name="viewport" content="width=device-width, initial-scale=1">
​
      <script src="app.js"></script>
​
  </head>
  <body>
​
  </body>
</html>


ActiveReportsJS 다운로드에서 dist/ 폴더에는 응용 프로그램에 추가해야 할 JS 및 CSS 파일이 포함되어 있습니다.


dist 폴더를 응용 프로그램의 로컬 폴더에 복사합니다.

ActiveReportsJS 시작하기


NPM을 통해서도 ActiveReportsJS를 사용할 수 있으므로, 노드 기반 응용 프로그램의 경우 다음 명령을 사용하여 구성 요소를 설치할 수 있습니다.

npm i @grapecity/activereports


이제 응용 프로그램에서 ActiveReportsJS를 사용할 준비가 되었습니다.


구성 요소 참조

응용 프로그램에서 ActiveReportsJS를 사용하려면 응용 프로그램 폴더의 파일에 대한 상대 파일 경로가 필요합니다. 응용 프로그램 섹션에서 JS 및 CSS 파일에 대한 참조를 추가합니다. 아래 예시에서는 vendor/ 폴더에 파일이 위치합니다.

<script src="vendor/dist/ie-polyfills.full.js"></script>
<script src="vendor/dist/ar-js-core.js"></script>
<script src="vendor/dist/ar-js-viewer.js"></script>
<script src="vendor/dist/ar-js-pdf.js"></script>
<script src="vendor/dist/ar-js-xlsx.js"></script>
<script src="vendor/dist/ar-js-html.js"></script>
​
<link rel="stylesheet" href="vendor/styles/ar-js-viewer.css">


뷰어 구성

참조를 추가한 후에 응용 프로그램은 구성 요소를 사용할 수 있습니다. 뷰어의 호스트 요소를 본문 섹션에 추가합니다. <div>를 고유 식별자와 함께 사용합니다.

<body>
<div id="viewer"></>
</body>


다음으로 호스트 요소의 ID를 사용하여 뷰어를 인스턴스화합니다. 이것도 복사하여 HTML 파일의 <script> 태그에 가져올 수 있습니다. 예시에서는 아래 코드가 app.js 파일에 있습니다.

document.readyState === 'complete' ? init() : window.onload = init;
​
function init() {
  const viewer = new ActiveReports.Viewer('#viewer');
  viewer.open("./reports/myReport.rdlx-json");
}

init 함수의 첫 번째 문이 뷰어 컨트롤을 생성합니다. 두 번째 행은 뷰어에 보고서를 로드합니다.


보고서를 로드하려면 해당 보고서를 응용 프로그램에 추가해야 합니다. 앞에서 생성된 보고서를 저장하고 응용 프로그램 폴더에 추가합니다. 이 예시에서 파일 경로는 보고서가 reports/ 폴더에 있음을 나타냅니다.


보다 일반적인 시나리오는 보고서 서비스에서 보고서를 여는 것입니다. 이 경우 URI를 viewer.open() 메서드에 전달할 수 있습니다.


예:

function init() {
  const viewer = new ActiveReports.Viewer('#viewer');
  viewer.open("https://myreportservice.com/reports/../..");
}


보고서 보기

이제 응용 프로그램이 ActiveReportsJS를 사용하도록 올바로 구성되었습니다. 응용 프로그램을 실행하고 브라우저에서 보겠습니다.


미리 보기를 하려면 경량 서버를 스핀업합니다.

VSCode Live Server 확장 또는 Chrome용 웹 서버가 빠르고 사용하기 간편합니다.

ActiveReportsJS 시작하기


VS Code Live Server 확장에는 서버를 쉽게 시작하고 중지하기 위한 바로 가기가 UI에 통합되어 있습니다.

ActiveReportsJS 시작하기


이 도구를 사용할 때 폴더가 올바른지 확인하십시오. 브라우저에서 보고서를 보면 보고서가 뷰어에 표시되는 것을 알 수 있습니다.

ActiveReportsJS 시작하기


여기서는 기본적인 사항을 다루었지만 보고서 레이아웃을 만들거나 디자인하는 방법은 다양합니다. 보고서를 응용 프로그램에 통합하는 과정은 간단해서 몇 단계면 완료할 수 있습니다.

인기 있는 JavaScript 프레임워크를 뷰어 구성 요소와 함께 사용할 수도 있습니다.


더 읽어볼 자료

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.