시작하기

시스템 요구사항

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 KR_SpreadJS_EULA_xxxxxx.pdf	제품의 주요 디렉터리
\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.components.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.inputmask.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.spacing.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.calcengine.languagepackages.xxxx.min.js gc.spread.pivot.pivottables.xxxx.min.js gc.spread.report.reportsheet.xxxx.min.js gc.spread.sheets.ai.xxxx.min.js gc.spread.sheets.barcode.xxxx.min.js gc.spread.sheets.calcworker.xxxx.min.js gc.spread.sheets.charts.xxxx.min.js gc.spread.sheets.collaboration.xxxx.min.js gc.spread.sheets.datacharts.xxxx.min.js gc.spread.sheets.formulapanel.xxxx.min.js gc.spread.sheets.ganttsheet.xxxx.min.js gc.spread.sheets.io.xxxx.min.js gc.spread.sheets.legacycharts.xxxx.min.js gc.spread.sheets.pdf.xxxx.min.js gc.spread.sheets.print.xxxx.min.js gc.spread.sheets.shapes.xxxx.min.js gc.spread.sheets.slicers.xxxx.min.js gc.spread.sheets.tablesheet.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을 통해 다운로드할 수 있습니다:

패키지	목적
spread-sheets	Spreadsheet 패키지
spread-sheets-ai-addon	SpreadJS AI 어시스턴트 기능
spread-sheets-barcode	SpreadJS 바코드 기능
spread-sheets-calc-worker	SpreadJS web worker 기능
spread-sheets-charts	SpreadJS 차트 기능
spread-sheets-collaboration	스프레드시트 동시 작업 모듈
spread-sheets-collaboration-addon	스프레드시트 동시 작업 기능
spread-sheets-collaboration-client	스프레드시트 동시 작업 클라이언트 모듈
spread-sheets-datacharts-addon	SpreadJS 데이터 차트 기능
spread-sheets-formula-panel	SpreadJS 수식 패널 기능
spread-sheets-ganttsheet	SpreadJS 간트시트 기능
spread-sheets-io	SpreadJS 입출력 기능
spread-sheets-languagepackages	언어 현지화 리소스
spread-sheets-legacy-charts	SpreadJS 레거시 차트 기능
spread-sheets-pdf	SpreadJS PDF 내보내기 기능
spread-sheets-pivot-addon	SpreadJS 피벗 테이블 기능
spread-sheets-print	SpreadJS 프린트 기능
spread-sheets-reportsheet-addon	SpreadJS 리포트시트 기능
spread-sheets-shapes	SpreadJS 도형 기능
spread-sheets-slicers	SpreadJS 슬라이서 기능
spread-sheets-tablesheet	SpreadJS 테이블시트 기능

콘텐츠 보안 정책(CSP)

콘텐츠 보안 정책(CSP, Content Security Policy)은 XSS(Cross-Site Scripting)와 같은 콘텐츠 삽입 공격을 방지하는 데 도움이 되는 보안 메커니즘입니다. CSP는 HTTP 응답 헤더 또는 HTML <head> 내의 <meta> 요소를 통해 구성할 수 있으며, 브라우저에서 로드 및 실행이 허용되는 콘텐츠 소스를 정의합니다.

CSP 구성

다음 방법 중 하나로 CSP를 정의할 수 있습니다.

HTTP 응답 헤더

웹 서버에서 Content-Security-Policy 헤더를 구성합니다.

HTML Meta 태그

<meta http-equiv="Content-Security-Policy" content="...">

두 방식 모두 script-src, style-src, worker-src 등의 지시문을 사용하여 허용된 콘텐츠 소스를 제어할 수 있습니다.

SpreadJS와 CSP

SpreadJS는 런타임 시 스크립트, 스타일 및 선택적으로 Web Worker를 로드하는 클라이언트 측 JavaScript 컨트롤입니다.

애플리케이션에서 CSP를 활성화한 경우, SpreadJS 리소스가 정상적으로 로드 및 실행될 수 있도록 적절한 지시문을 구성해야 합니다. 그렇지 않으면 CSP 위반으로 인해 특정 기능(예: 가져오기/내보내기 또는 계산 Worker 기능)이 정상적으로 동작하지 않을 수 있습니다.

SpreadJS는 다음과 같습니다.

unsafe-eval 불필요
스크립트에 대해 unsafe-inline 불필요
스타일에 대해 unsafe-inline 필요(자세한 내용은 아래 참고)
특정 기능 사용 시 적절한 worker-src 구성 필요

SpreadJS 권장 CSP 지시문

필요한 지시문은 SpreadJS 배포 방식(CDN 또는 로컬 호스팅)에 따라 달라집니다.

1. Script Source

공식 CDN에서 SpreadJS 사용

script-src 'self' https://cdn.xxx.com;

SpreadJS를 로컬로 호스팅

script-src 'self';

SpreadJS는 script-src에 unsafe-eval 또는 unsafe-inline을 필요로 하지 않습니다. 더 나은 보안을 위해 활성화하지 않는 것을 권장합니다.

2. Style Source

SpreadJS는 런타임 시 인라인 스타일을 동적으로 적용합니다. 따라서 다음 지시문이 필요합니다.

공식 CDN에서 SpreadJS 사용

style-src 'self' 'unsafe-inline' https://cdn.xxx.com;

SpreadJS를 로컬로 호스팅

style-src 'self' 'unsafe-inline';

현재 SpreadJS는 일부 기능 관련 스타일이 런타임 시 동적으로 생성 및 적용되기 때문에 style-src에 unsafe-inline 설정이 필요합니다.

3. Worker Source

worker-src 지시문은 다음 기능에 필요합니다.

가져오기/내보내기 API
계산 엔진 Worker 기능

SpreadJS는 blob URL을 사용하여 Web Worker를 동적으로 생성할 수 있습니다. 따라서 다음 구성이 필요합니다.

worker-src 'self' blob:;

이 설정은 다음을 허용합니다.

self — 동일 출처(origin)에서 로드된 Worker
blob: — Blob URL을 통해 동적으로 생성된 Worker

worker-src가 명시적으로 정의되지 않은 경우 일부 브라우저는 script-src를 대신 사용할 수 있습니다. 하지만 더 나은 호환성과 명확성을 위해 worker-src를 명시적으로 구성하는 것을 강력히 권장합니다.

전체 CSP 예제

예제 1: CDN에서 SpreadJS 사용

<meta http-equiv="Content-Security-Policy"
      content="
      default-src 'self'; 
      script-src 'self' https://cdn.xxx.com;
      style-src 'self' 'unsafe-inline' https://cdn.xxx.com;
      worker-src 'self' blob:;
      ">

예제 2: SpreadJS를 로컬로 호스팅

<meta http-equiv="Content-Security-Policy"
      content="
      default-src 'self';
      script-src 'self';
      style-src 'self' 'unsafe-inline';
      worker-src 'self' blob:;
      ">

default-src 지시문은 script-src 또는 style-src처럼 별도로 명시되지 않은 모든 리소스 유형에 대한 기본 정책을 정의합니다.