시작하기
시스템 요구사항
SpreadJS는 다음 브라우저에서 사용 가능합니다:
Microsoft Edge
Mozilla FireFox
Safari
Google Chrome
브라우저는 반드시 HTML5를 지원해야 합니다.
참고: SpreadJS는 Windows 11 및 Windows Server 2022/2025도 지원합니다.
다운로드 및 설치
번들 사용 방법
ZIP 파일(SpreadJS.xxxx.zip)을 다운로드한 후 시스템의 임시 폴더에 저장하고, 해당 파일을 지정한 폴더에 압축 해제합니다.
기본 SpreadJS 폴더(Windows 전용):
디렉터리 | 파일 | 설명 |
|---|---|---|
\SpreadJS.xxxx | LICENSE SPREADJS_EULA | 제품의 주요 디렉터리 |
\SpreadJS.xxxx\css | gc.spread.sheets.x.x.x.css gc.spread.sheets.excel2013darkGray.xxxx.css gc.spread.sheets.excel2013lightGray.xxxx.css gc.spread.sheets.excel2013white.xxxx.css gc.spread.sheets.excel2016black.xxxx.css gc.spread.sheets.excel2016colorful.xxxx.css gc.spread.sheets.excel2016darkGray.xxxx.css | CSS 파일 |
\SpreadJS.xxxx\definition | GC.spread.sheets.d.ts gc.spread.excelio.d.ts | TypeScript API 정의 파일 |
\SpreadJS.xxxx\samples | 위젯용 예제 페이지 | |
\SpreadJS.xxxx\scripts | gc.spread.sheets.all.xxxx.min.js | 플러그인을 제외한 모든 기능을 포함한 위젯용 최소화된 js 파일 |
\SpreadJS.xxxx\scripts\modules | gc.data.xxxx.min.js gc.spread.calcengine.xxxx.min.js gc.spread.calcengine.advancedfunctions.xxxx.min.js gc.spread.calcengine.basicfunctions.xxxx.min.js gc.spread.common.xxxx.min.js gc.spread.sheets.automerge.xxxx.min.js gc.spread.sheets.bindings.xxxx.min.js gc.spread.sheets.calcengine.xxxx.min.js gc.spread.sheets.cellstate.xxxx.min.js gc.spread.sheets.celltypes.xxxx.min.js gc.spread.sheets.comments.xxxx.min.js gc.spread.sheets.conditionalformatting.xxxx.min.js gc.spread.sheets.contextmenu.xxxx.min.js gc.spread.sheets.core.xxxx.min.js gc.spread.sheets.datavalidation.xxxx.min.js gc.spread.sheets.dragmerge.xxxx.min.js gc.spread.sheets.fill.xxxx.min.js gc.spread.sheets.filter.xxxx.min.js gc.spread.sheets.floatingobjects.xxxx.min.js gc.spread.sheets.formulatextbox.xxxx.min.js gc.spread.sheets.hyperlink.xxxx.min.js gc.spread.sheets.namebox.xxxx.min.js gc.spread.sheets.outlinecolumn.xxxx.min.js gc.spread.sheets.outlines.xxxx.min.js gc.spread.sheets.search.xxxx.min.js gc.spread.sheets.sparklines.xxxx.min.js gc.spread.sheets.statusbar.xxxx.min.js gc.spread.sheets.tables.xxxx.min.js gc.spread.sheets.touch.xxxx.min.js | 모듈형 js 파일 |
\SpreadJS.xxxx\scripts\interop | gc.spread.excelio.xxxx.min.js | 클라이언트 측 Excel 가져오기 및 내보내기 지원 파일 |
\SpreadJS.xxxx\scripts\interop\angularjs | gc.spread.sheets.angularjs.xxxxx.min.js | AngularJS 지원 파일 |
\SpreadJS.xxxx\scripts\interop\angular | gc.spread.sheets.angular.xxxxx.min.js | Angular 지원 파일 |
\SpreadJS.xxxx\scripts\interop\react | gc.spread.sheets.react.xxxxx.min.js | React 지원 파일 |
\SpreadJS.xxxx\scripts\interop\vuejs | gc.spread.sheets.vue.xxxxx.min.js | Vue 지원 파일 |
\SpreadJS.xxxx\scripts\resources | ja\gc.spread.sheets.resources.ja.xxxxx.min.js zh\gc.spread.sheets.resources.zh.xxxx.min.js ko\gc.spread.sheets.resources.ko.xxxx.min.js | 일본어, 중국어, 한국어 리소스 파일 |
\SpreadJS.xxxx\scripts\plugins | gc.spread.pivot.pivottables.xxxxx.min.js gc.spread.sheets.barcode.xxxxx.min.js gc.spread.sheets.charts.xxxxx.min.js gc.spread.sheets.pdf.xxxxx.min.js gc.spread.sheets.print.xxxxx.min.js gc.spread.sheets.shapes.xxxxx.min.js gc.spread.sheets.tablesheet.xxxxx.min.js gc.spread.calcengine.languagepackages.xxxx.min.js gc.spread.sheets.io.xxxx.min.js gc.spread.sheets.slicers.xxxx.min.js | 플러그인 파일 |
SpreadJS 템플릿 디자이너 설치
다운로드한 ZIP 파일을 시스템의 임시 폴더에 저장하고, 그 후 파일을 디렉터리에 압축 해제합니다.
사용 중인 환경에 맞는 설치 파일을 실행합니다.
템플릿 디자이너를 실행하고 자물쇠 아이콘을 클릭한 뒤, 라이선스 키를 입력하여 활성화합니다.
플랫폼 | 설치 |
|---|---|
Windows | SpreadJS-Designer.x.x.x.exe |
Mac | SpreadJS-Designer.x.x.x.dmg |
Linux | SpreadJS-Designer.x.x.x.AppImage |
기본 템플릿 디자이너 경로:
설치 디렉터리 | 설명 |
|---|---|
%Program Files%\MESCIUS\SpreadJS Designer\x.x.x | 템플릿 디자이너 디렉터리 |
라이선스 관련 정보는 체험판 및 라이선스 정보 문서를 참조하시기 바랍니다.
NPM 이용하기
NPM을 사용하여 SpreadJS 패키지를 설치하려면, Node 설치 관리자나 Node 버전 관리자를 사용하여 Node.js와 npm 명령줄 인터페이스를 설치해야 합니다.
Node.js 및 npm 명령줄 인터페이스를 시작하는 방법은 npm 문서를 참조하세요.
SpreadJS 패키지는 NPM을 통해 다운로드할 수 있습니다:
패키지 | 목적 |
|---|---|
Spreadsheet 패키지 | |
Spreadsheet 디자이너 컴포넌트 | |
SpreadJS 도형 기능 | |
SpreadJS 테이블시트 기능 | |
SpreadJS Excel 입출력 패키지 | |
SpreadJS 계산 엔진 지원 | |
SpreadJS 차트 기능 | |
SpreadJS 바코드 기능 | |
SpreadJS 피벗 기능 | |
SpreadJS PDF 내보내기 기능 | |
SpreadJS 프린트 기능 | |
SpreadJS 입출력 기능 | |
React 용 SpreadJS 디자이너 컴포넌트 | |
Vue 용 SpreadJS 디자이너 컴포넌트 | |
Angular 용 SpreadJS 래퍼 컴포넌트 |
콘텐츠 보안 정책 (CSP)
CSP는 웹사이트에서 불러오는 콘텐츠를 규제하고 허가하기 위해 HTTP 헤더나 메타 태그로 적용하는 보안 정책입니다.
CSP 지시어 참조(CSP Directive Reference)를 설정하려면, 서버에서 HTTP 응답 헤더를 구성하거나 HTML의 <head> 요소 내에 <meta> 태그를 설정하는 두 가지 방법 중 하나를 선택할 수 있습니다. 이를 통해 허용되거나 차단되는 콘텐츠를 정의하는 일련의 규칙을 생성할 수 있으며, 이러한 규칙은 콘텐츠 삽입(content injection) 및 크로스 사이트 스크립팅(XSS) 공격으로부터 웹사이트의 보안을 강화하는 데 도움을 줍니다.
SpreadJS는 내장 컨트롤로서 CSP 지침을 준수해야 하며, 코드에 잠재적인 공격 요소가 포함되지 않도록 해야 합니다. 따라서 아래에 안내된 대로 SpreadJS의 보안을 강화하기 위해 특정 CSP 규칙을 포함해야 합니다.
// No Eval rule in TSLINT
eval("alert('XSS!')");
// No Implied Eval rule in TSLINT
setTimeout("alert('Hi!');", 100);
setInterval("alert('Hi!');", 100);
execScript("alert('Hi!')");
window.setTimeout("count = 5", 10);
window.setInterval("foo = bar", 10);
// No New Function rule in TSLINT
new Function("alert('XSS!')")();가져오기 및 내보내기 API는 파일의 압축 및 해제를 위해 웹 워커를 사용합니다. 따라서 오류 발생을 막기 위해 사용자가 적절한 CSP 규칙을 반드시 설정해야 합니다.
예를 들어, 다음과 같은 CSP 규칙을 참고하세요:
<meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob: 'unsafe-inline' 'unsafe-eval' data:">이 CSP 규칙은 동일 출처에서 웹 워커를 로드하는 것과 웹 워커에 대해 Blob URI 사용을 허용하며, 그 내용은 다음과 같습니다:
worker-src 'self': 웹 워커가 문서와 동일한 출처(origin)에서만 로드되도록 제한합니다.blob:: 웹 워커에서 Blob URI 사용을 허용합니다.'unsafe-inline': 인라인 스크립트 실행을 허용합니다.'unsafe-eval':eval()함수 및 문자열로 전달된 코드를 실행하는 유사 JavaScript 함수의 사용을 허용합니다.data:: data URI 사용을 허용합니다.