고급기능 SpreadJS 리포트시트 시작하기
페이지 정보
작성자 MESCIUS루카스
작성일 2024-02-22 15:06 조회 175회
댓글 0건
본문
첨부파일
관련링크
SpreadJS V17에는 SpreadJS의 Excel 시트를 기반으로 기업의 보고서, 각종 증명서, 서식을 쉽고 빠르게 만들고 배포할 수 있는 "리포트시트(ReportSheet)가 추가 되었습니다.
매출/판매 보고, 재무 보고, 예산 보고와 같이 숫자와 계산이 많은 복잡한 보고서를 작성하거나,
또는 견적서, 거래 명세서 및 각종 증명서 제작을 위해 기업에서는 가장 많이 사용하는 강력한 도구는 엑셀(Excel)일 것 입니다.
일반적으로 기업에서는 공통 보고서 또는 서식들을 엑셀 파일로 미리 만들어두고, 필요할 때마다 실무자들이 해당 양식의 사본을 만들어, 새로운 보고서나 증명서 만드는 방식으로 업무를 진행합니다.
보고서 및 증명서 발급을 위해 엑셀(Excel) 파일를 사용하는 것은 간단하고 쉬운 방법이지만,
아래와 같은 몇 가지 문제점들이 있습니다.
- 시간이 지날 수록 관리해야 하는 엑셀 파일이 많아지고 데이터가 서로 공유가 되지 않습니다.
- 반복적인 메뉴얼 입력 작업에서 휴먼 에러가 발생할 수 있습니다.
- 중요한 기업 데이터가 엑셀 파일로 유출되는 치명적인 보안 이슈가 있습니다.
이러한 문제를 해결하기 위해, 많은 기업에서는 기존에 사용하던 엑셀(Excel) 보고/서식 자료들을 전산화하여 관리할 수 있는 웹 시스템 개발을 원하지만, 웹 상에 Excel의 화면과 기능을 구현하고, 이를 기반으로 보고서 생성/배포 기능을 구현하는 것은 결코 쉬운 일이 아닙니다.
이러한, 웹 상에서 엑셀 기반으로 쉽게 보고서(리포트) 생성하고 배포하는 기능 개발하고 싶어하는, 수많은 고객사와 기업의 요청 사항 반영하여, SpreadJS에 ReportSheet(리포트시트) 기능을 추가하였습니다.
이제, 기업의 다양한 데이터를 연동하여 엑셀 기반으로 다양한 기업 내부 보고서들을 자동으로 생성하고 배포하는 기능을 ReportSheet를 이용하여 개발할 수 있습니다.
SpreadJS 리포트시트(ReportSheet)를 사용했을 때 얻을 수 있는 주요 이점은 다음과 같습니다.
- 통합 템플릿 및 데이터 관리:
보고서 디자이너를 토해서 보고서 생성 및 데이터를 완벽하게 통합할 수 있습니다. 리포트시트(ReportSheets)에서 제공하는 DataManager를 이용하여 보고서 상에 필요한 데이터들을 코딩 없이도 직접 빠르게 바인딩할 수 있도록 도와주는 기능을 제공합니다. - 향상된 유연성:
소스 데이터를 바인딩하기 위한 매우 유연한 구문과 API를 제공합니다. 필드에서 쉬운 데이터 채우기 규칙을 따르고 데이터 입력 API도 제공합니다. - 간편한 사용자 정의:
생성된 모든 보고서의 표준화된 형식과 모양을 보장하고 다양한 데이터 세트에서 일관성을 유지합니다. - 포괄적인 데이터 처리 기능: 사용자 친화적인 방식으로 데이터를 관리하고 표시합니다. ReportSheet는 보고서 생성에 관한 것만이 아닌, 데이터 입력, 페이지 매김, 데이터 필터링, 정렬 및 조건부 서식을 지원하는 포괄적인 도구입니다.
이 글에서는 SpreadJS에서 제공하는 리포트 시트(ReportSheet) 기능을 여러분의 웹 애플리케이션에 구현하는 방법을 소개합니다.
리포트 시트 | ReportSheet 생성하기
SpreadJS v17에서는 쉽고 빠른 보고서 생성을 위한, 리포트 시트 디자이너 기능이 "템플릿 디자이너" 프로그램(기본 제공 데스크톱 프로그램)에 새롭게 추가되었습니다.
템플릿 디자이너를 이용해 리포트 시트를 생성해 보겠습니다.
1. SpreadJS를 다운 받고, 다운 받은 zip 파일의 압축을 풉니다.
압축을 푼 폴더의 아래 경로에서 SpreadJS-Designer.xx.x.x.exe 더블 클릭하여 설치합니다.
SpreadJS.Release.xx.x.x\Designer\Template Designer
* 템플릿 디자이너 라이선스가 필요하신 경우, 구매 후 받으신 SpreadJS Developer License의 넘버와 함께 sales-kor@mescius.com로 요청 주시기 바랍니다.
* 템플릿 디자이너 라이선스가 없는 경우, 30일 동안 무료로 사용가능합니다.
2. 리포트 시트를 생성하고 보고서 또는 증명서(각종 서식) 템플릿을 생성합니다.
템플릿 디자이너에서 삽입 탭 > 리포트 시트 버튼을 클릭하여 리포트 시트를 생성할 수 있습니다.
출력을 위한 템플릿을 만드는 옵션은 아래와 같이 2가지가 있습니다.
- 템플릿 디자이너의 엑셀 시트 상에 직접 템플릿을 새로 작성
- 기존에 가지고 있던 엑셀 파일 형식의 템플릿을 사용.
이번 단계에서는 기업에서 사용하고 있던 엑셀 파일의 보고서 템플릿을 불러오겠습니다.
1) 리본 메뉴(상단메뉴) > 리포트 시트 디자인 탭 > 템플릿 가져오기 선택
2) 보고서 또는 출력물 양식으로 사용하고자하는 엑셀 파일을 불러 옵니다.
* 예제에서는 "샘플 견적서(첨부파일)" 엑셀 파일을 사용합니다.
원하는 출력/보고 형태의 엑섹 파일을 불러왔다면, 이제 해당 엑셀 템플릿에 데이터를 연동해 보겠습니다.
리포트 시트는 Rest API로 부터 받아오는 데이터의 스키마를 자동으로 분석하고, 자동으로 데이터 바인딩을 위한 "데이터 셋"을 만들어 줍니다. 이를 통해 코딩 없이 쉽게 원하는 엑셀 템플릿위에 최종 사용자에게 보여줄 데이터를 쉽게 바인딩 할 수 있습니다.
3. 템플릿에 뿌려줄 데이터 소스를 가져옵니다.
※ 사용 RestAPI: https://demodata.mescius.io/northwind/api/v1/Products
1) 먼저, "좌측 탭 > 데이터 원본 > 표 추가" 버튼을 누르고 데이터를 가져올 API를 입력합니다.
2) 데이터를 받아올 Rest API URL을 입력합니다.
HTTP 메소스를 통해서, 외부로 부터 데이터를 연결 할 수 있습니다.
. 사용 RestAPI URL: https://demodata.mescius.io/northwind/api/v1/Products
. HTTP 메소드: GET
위와 같이 Rest API를 연결해주면, Rest API의 JSON 데이터 스키마 를 자동으로 분석하고, 이를 쉽게 가져다 쓸 수 있도록, 좌측 "데이터 원본" 패널의 "데이터 셋"으로 시각화를 해줍니다.
4. 다시 리포트 시트로 돌아가, 불러온 데이터 소스에서 항목을 드래그 합니다.
해당 셀에서 설정된 방향으로 데이터가 확장됩니다.
5. 함수가 필요한 셀에는 함수를, 계산이 필요한 셀에는 계산 식을 입력합니다.
6. 조건에 맞는 데이터만 표시하도록 필터를 설정합니다.
이번 단계에서는 수량이 0보다 큰 데이터에 대해서만 리포트에 표시하겠습니다.
6-1. 가장 좌측 데이터인 productId에 포커스를 두고 패널의 필터 설정에 들어가 새 규칙을 생성합니다.
6-2. 규칙을 아래와 같이 설정합니다.
7. 가독성을 높이기 위해 정렬을 설정합니다.
마찬가지로 가장 좌측 데이터인 productId에 포커스를 두고, 정렬 추가 버튼을 눌러 아래와 같이 오름차순으로 정렬합니다.
8. [파일] - [내보내기] - SpreadJS JSON으로 완성된 리포트 시트를 내보내기 합니다.
이때, 상단의 미리 보기를 클릭한 후 내보내기해야, SpreadJS에서 불러왔을 때 데이터가 나타납니다.
9. 아래 코드를 이용하여 내보내기한 리포트 시트를 불러옵니다.
9-1. 리포트 시트를 사용하기 위해서는 관련 스크립트 파일을 불러와야 합니다.
<head> ... <script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script> <script src='.../spreadjs/plugins/gc.spread.sheets.print.x.x.x.min.js' type='text/javascript'></script> <script src='.../spreadjs/plugins/gc.spread.report.reportsheet.x.x.x.min.js' type='text/javascript'></script> </head>
9-2. 그 후 내보내기한 리포트 시트를 불러옵니다.
window.onload = async () => {
const spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
const res = await fetch('https://assets.codepen.io/975719/reportSheetTamplate.ssjson');
await spread.fromJSON(await res.json());
}지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
