- 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-ganttsheet | @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-tablesheet |
@mescius/spread-sheets-reportsheet-addon | @mescius/spread-common @mescius/spread-calc-engine @mescius/data-manager @mescius/spread-calc-engine-basic-functions @mescius/spread-calc-engine-advanced-functions @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-tables @mescius/spread-sheets-bindings @mescius/spread-sheets-components @mescius/spread-sheets-floating-objects @mescius/spread-sheets-sparklines @mescius/spread-sheets-statusbar @mescius/spread-sheets-cell-state @mescius/spread-sheets-cell-types @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-data-validation @mescius/spread-sheets-filter @mescius/spread-sheets-context-menu @mescius/spread-sheets-print @mescius/spread-sheets-shapes @mescius/spread-sheets-charts @mescius/spread-sheets-datacharts-addon @mescius/spread-sheets-tablesheet @mescius/spread-sheets-reportsheet-addon |
리소스 내 의존성
패키지 | 의존성 |
|---|---|
@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)
<!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)
import * as GC from "@mescius/spread-common";
import "@mescius/spread-sheets-core";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));Sparklines 모듈 사용 (CommonJS)
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();Print 모듈 사용 (CommonJS)
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)
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"));