Powerful JavaScript Excel Spreadsheet Reporting

템플릿 디자이너 실행 및 시트 설정

먼저 SpreadJS 템플릿 디자이너를 실행합니다. 상단 메뉴의 [삽입] 탭에서 [리포트 시트] 버튼을 클릭하여 보고서 개발 환경을 활성화합니다. (*SpreadJS v17 이상)

엑셀 리포트 템플릿 로드 및 디자인

기업에서 사용 중인 엑셀 양식(.xlsx)을 그대로 불러와 리포트의 기반으로 활용합니다.
디자이너 상단의 [리포트 시트 디자인] 탭을 선택하고, 가장 좌측의 [템플릿 가져오기] 를 클릭하여 기존 양식을 로드하세요.

STEP 1 : 메뉴에서 파일 선택 (기존 양식 불러오기)

* 샘플 Excel 파일이 필요한 경우 아래 링크를 참고해 주세요.

STEP 2 : 템플릿 로드 완료 (엑셀 서식 유지)

JSON 데이터 연동 및 바인딩

Rest API URL을 입력하면 DataManager가 데이터 스키마를 자동으로 분석하여 시각화된 필드 리스트를 제공합니다.

* 아래 REST API URL을 클릭하면 해당 페이지로 이동합니다.

분석된 데이터셋의 필드 항목을 엑셀 템플릿의 셀 위로 드래그 앤 드롭 하세요. 해당 셀을 기점으로 데이터가 설정된 방향으로 자동 확장됩니다.

리포트 데이터 검증 및 내보내기

Validation : 실시간 데이터 미리보기

디자인이 완료되면 상단 리본 메뉴의 [미리 보기] 를 클릭합니다. 실제 API 데이터가 템플릿 서식에 맞춰 바인딩된 최종 결과물을 즉시 확인할 수 있습니다.

Export : SpreadJS JSON으로 내보내기

데이터 검증이 완료되면 웹 프로젝트에서 사용할 템플릿 파일을 생성합니다. [파일] > [내보내기] > [SpreadJS JSON] 을 선택하여 저장하세요. 이때 파일명은 기본적으로 report_template.ssjson을 권장하나, 사용자의 편의에 맞춰 리포트 파일명 으로 지정하여 내보낼 수 있습니다.

웹 리포트 렌더링 및 배포

저장된 JSON 파일을 fromJSON API를 사용하여 웹 프로젝트에 로드합니다. 이때 ReportSheet 전용 플러그인 을 반드시 포함해야 합니다.

  <script 
 src 
= ".../gc.spread.sheets.all.min.js" 
 ></script> 

 <!-- 리포트시트 플러그인 (필수) --> 

 <script 
 src 
= ".../plugins/gc.spread.report.reportsheet.min.js" 
 ></script> 
 

  window. onload 
= async 
() => {
 const 
spread = new 
GC.Spread.Sheets.Workbook(document.getElementById( 'ss' 
));

 // 내보낸 리포트 JSON 파일 로드 (이동시킨 경로에 맞춰 설정) 

 const 
res = await 
fetch( './assets/templates/report_template.ssjson' 
);
 const 
reportData = await 
res.json(); 

SpreadJS 리포트 시트 기능 구축 완료!

이제 SpreadJS의 Excel 시트 기반 "리포트시트(ReportSheet)" 환경이 구축되었습니다.

기업의 다양한 데이터를 연동하여 Excel 기반의 기업 보고서, 각종 증명서, 서식을 쉽고 빠르게 만들고 배포해 보세요.