- SpreadJS 개요
- 시작하기
- JavaScript 프레임워크
- 모범 사례
- 기능
- SpreadJS 템플릿 디자이너
- SpreadJS 디자이너 컴포넌트
- 터치 지원
- 수식 참조
- 가져오기 및 내보내기 참조
- 자주 사용하는 이벤트
- API 문서
- 릴리스 노트
SpreadJS 개별 모듈
SpreadJS 모듈은 NPM에서 제공됩니다. Webpack, Rollup, ESBuild, Vite와 같은 최신 JavaScript 빌드 도구 및 번들러는 SpreadJS NPM 패키지(모듈, 플러그인, 리소스 포함)와 원활하게 작동합니다. 또한 SpreadJS를 프로젝트 빌드 프로세스에 통합하는 과정이 원활하며, 이러한 도구들의 기능을 최대한 활용할 수 있습니다.
SpreadJS를 개별 모듈과 함께 사용할 때는 다음 주제 목록을 참고하세요.
설치 명령어
다음 명령어들은 NPM에서 제공되는 모듈들을 설치하는 데 사용됩니다:
@mescius/spread-common
@mescius/spread-calc-engine
@mescius/spread-calc-engine-basic-functions
@mescius/spread-calc-engine-advanced-functions
@mescius/data-manager
@mescius/spread-sheets-core
@mescius/spread-sheets-bindings
@mescius/spread-sheets-cell-types
@mescius/spread-sheets-sparklines
@mescius/spread-sheets-search
@mescius/spread-sheets-outlines
@mescius/spread-sheets-floating-objects
@mescius/spread-sheets-comments
@mescius/spread-sheets-tables
@mescius/spread-sheets-touch
@mescius/spread-sheets-conditional-formatting
@mescius/spread-sheets-cell-state
@mescius/spread-sheets-data-validation
@mescius/spread-sheets-filter
@mescius/spread-sheets-fill
@mescius/spread-sheets-context-menu
@mescius/spread-sheets-formula-textbox
@mescius/spread-sheets-outline-column
@mescius/spread-sheets-drag-merge
@mescius/spread-sheets-statusbar
@mescius/spread-sheets-auto-merge
@mescius/spread-sheets-calc-engine
@mescius/spread-sheets-hyperlink
@mescius/spread-sheets-namebox
@mescius/spread-sheets-input-mask
이 모듈들은 플러그인과 리소스와 함께 사용할 수 있습니다. 이를 위해 빌드 도구나 CLI에서 "@mescius/spread-sheets"를 "@mescius/spread-common"으로 연결하는(alias) 설정을 해야 합니다.
참고: “@mescius/spread-sheets"는 개별 노드 모듈들("@mescius/spread-common" 등)을 포함하는 단일 모듈이며, 이들을 함께 사용하면 알 수 없는 오류가 발생할 수 있으므로 같이 사용하지 않아야 합니다.
의존성 표
모듈 간 의존성
다음 표는 모듈 간 최소 의존성을 보여줍니다.
패키지 | 의존성 |
|---|---|
@mescius/spread-common | |
@mescius/spread-calc-engine | @mescius/spread-common |
@mescius/spread-calc-engine-basic-functions | @mescius/spread-common @mescius/spread-calc-engine |
@mescius/spread-calc-engine-advanced-functions | @mescius/spread-common @mescius/spread-calc-engine |
@mescius/data-manager | @mescius/spread-common @mescius/spread-calc-engine |
@mescius/spread-sheets-core | @mescius/spread-common |
@mescius/spread-sheets-bindings | @mescius/spread-common @mescius/spread-sheets-core |
@mescius/spread-sheets-cell-types | @mescius/spread-common @mescius/spread-sheets-core |
@mescius/spread-sheets-sparklines | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine |
@mescius/spread-sheets-search | @mescius/spread-common @mescius/spread-sheets-core |
@mescius/spread-sheets-outlines | @mescius/spread-common @mescius/spread-sheets-core |
@mescius/spread-sheets-floating-objects | @mescius/spread-common @mescius/spread-sheets-core |
@mescius/spread-sheets-comments | @mescius/spread-common @mescius/spread-sheets-core |
@mescius/spread-sheets-tables | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column |
@mescius/spread-sheets-touch | @mescius/spread-common @mescius/spread-sheets-core |
@mescius/spread-sheets-conditional-formatting | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine |
@mescius/spread-sheets-cell-state | @mescius/spread-common @mescius/spread-sheets-core |
@mescius/spread-sheets-data-validation | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting |
@mescius/spread-sheets-filter | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column |
@mescius/spread-sheets-fill | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine |
@mescius/spread-sheets-context-menu | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine |
@mescius/spread-sheets-formula-textbox | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column @mescius/spread-sheets-tables |
@mescius/spread-sheets-outline-column | @mescius/spread-common @mescius/spread-sheets-core @mescius/spread-sheets-outlines |
@mescius/spread-sheets-drag-merge | @mescius/spread-common @mescius/spread-sheets-core |
@mescius/spread-sheets-statusbar | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-context-menu |
@mescius/spread-sheets-auto-merge | @mescius/spread-common @mescius/spread-sheets-core |
@mescius/spread-sheets-calc-engine | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core |
@mescius/spread-sheets-hyperlink | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine |
@mescius/spread-sheets-namebox | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-cell-types |
@mescius/spread-sheets-input-mask | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-cell-types |
플러그인 간 의존성
다음 표는 플러그인 간 최소 의존성을 보여줍니다.
패키지 | 의존성 |
|---|---|
@mescius/spread-sheets-languagepackages | @mescius/spread-common @mescius/spread-calc-engine |
@mescius/spread-sheets-io | @mescius/spread-common @mescius/spread-sheets-core |
@mescius/spread-sheets-charts | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-floating-objects |
@mescius/spread-sheets-shapes | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-floating-objects |
@mescius/spread-sheets-barcode | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-sparklines |
@mescius/spread-sheets-print | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine |
@mescius/spread-sheets-pdf | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-print |
@mescius/spread-sheets-slicers | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-floating-objects @mescius/spread-sheets-shapes @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column @mescius/spread-sheets-tables |
@mescius/spread-sheets-pivot-addon | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-floating-objects @mescius/spread-sheets-shapes @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column @mescius/spread-sheets-tables @mescius/spread-sheets-slicers @mescius/spread-sheets-formula-textbox |
@mescius/spread-sheets-tablesheet | @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column @mescius/spread-sheets-tables @mescius/spread-sheets-formula-textbox @mescius/spread-sheets-context-menu @mescius/spread-sheets-statusbar @mescius/data-manager @mescius/spread-sheets-auto-merge @mescius/spread-sheets-cell-state @mescius/spread-sheets-data-validation |
리소스 간 종속성
다음 표는 리소스 간 최소 종속성을 보여줍니다.
패키지 | 의존성 |
|---|---|
@mescius/spread-sheets-resources-ja | @mescius/spread-common @mescius/spread-sheets-core |
@mescius/spread-sheets-resources-ko | @mescius/spread-common @mescius/spread-sheets-core |
@mescius/spread-sheets-resources-zh | @mescius/spread-common @mescius/spread-sheets-core |
모듈 사용을 위한 샘플 코드
전역 변수를 사용한 코어 모듈 사용
다음 코드 샘플은 전역 변수를 사용하여 코어 모듈을 사용하는 방법을 보여줍니다:
<!DOCTYPE html>
<html>
<head>
<title>Test SJS Modules with Global Variable</title>
<link rel="stylesheet" type="text/css"
href="./@mescius/spread-common/styles/gc.spread.sheets.excel2016colorful.css" />
</head>
<body>
<div id="testDiv" style="width:100%;height:300px;"></div>
<script type='text/javascript' src="./@mescius/spread-common/dist/gc.spread.common.min.js"></script>
<script type='text/javascript' src="./@mescius/spread-sheets-core/dist/gc.spread.sheets.core.min.js"></script>
<script type='text/javascript'>
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
};
</script>
</body>
</html>AMD를 사용한 코어 모듈 사용
다음 코드 샘플은 AMD를 사용하여 코어 모듈을 사용하는 방법을 보여줍니다:
<!DOCTYPE html>
<html>
<head>
<title>Test SJS Modules with AMD</title>
<link rel="stylesheet" type="text/css"
href="./@mescius/spread-common/styles/gc.spread.sheets.excel2016colorful.css" />
</head>
<body>
<div id="testDiv" style="width:100%;height:300px;"></div>
<script type='text/javascript' src="./require.js"></script>
<script type='text/javascript'>
window.onload = function () {
require.config({
paths: {
'@mescius/spread-common': './@mescius/spread-common/dist/gc.spread.common.min',
'@mescius/spread-sheets-core': './@mescius/spread-sheets-core/dist/gc.spread.sheets.core.min'
}
});
require(['@mescius/spread-common', '@mescius/spread-sheets-core'], function (GC) {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
});
};
</script>
</body>
</html>CommonJS를 사용한 코어 모듈 사용
다음 코드 샘플은 CommonJS를 사용하여 코어 모듈을 사용하는 방법을 보여줍니다:
import * as GC from "@mescius/spread-common";
import "@mescius/spread-sheets-core";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));CommonJS를 사용한 sparklines 모듈 사용
다음 코드 샘플은 CommonJS를 사용하여 sparklines 모듈을 사용하는 방법을 보여줍니다:
import * as GC from "@mescius/spread-common";
import "@mescius/spread-calc-engine";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-calc-engine";
import "@mescius/spread-sheets-sparklines";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.setFormula(0, 0, '=PIESPARKLINE(0.25, "red"');
sheet.setRowHeight(0, 60);
sheet.resumePaint();CommonJS를 사용한 print 모듈 사용
다음 코드 샘플은 CommonJS를 사용하여 print 모듈을 사용하는 방법을 보여줍니다:
import * as GC from "@mescius/spread-common";
import "@mescius/spread-calc-engine";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-calc-engine";
import "@mescius/spread-sheets-print";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
var sheet = spread.getActiveSheet();
sheet.setValue(0, 0, "Hello SpreadJS!")
spread.print();CommonJS를 사용한 한국어 리소스 모듈 사용
다음 코드 샘플은 CommonJS를 사용하여 한국어 리소스 모듈을 사용하는 방법을 보여줍니다:
import * as GC from "@mescius/spread-common";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-resources-ko";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));