SpreadJS 独立模块
SpreadJS 模块可以在NPM上获得。许多现代的 JavaScript 构建工具和打包工具（如Webpack、Rollup、ESBuild和Vite）与 SpreadJS 的 NPM 包（包括模块、插件和资源）无缝协同工作。
此外，将SpreadJS整合到项目的构建过程中非常顺利，并且可以充分利用这些工具的功能。
在使用 SpreadJS 与单独模块时，请参考以下主题列表：
安装命令
以下命令用于安装在 NPM 上可用的模块：
@grapecity-software/spread-common
@grapecity-software/spread-calc-engine
@grapecity-software/spread-calc-engine-basic-functions
@grapecity-software/spread-calc-engine-advanced-functions
@grapecity-software/data-manager
@grapecity-software/spread-sheets-core
@grapecity-software/spread-sheets-bindings
@grapecity-software/spread-sheets-cell-types
@grapecity-software/spread-sheets-sparklines
@grapecity-software/spread-sheets-search
@grapecity-software/spread-sheets-outlines
@grapecity-software/spread-sheets-floating-objects
@grapecity-software/spread-sheets-comments
@grapecity-software/spread-sheets-tables
@grapecity-software/spread-sheets-touch
@grapecity-software/spread-sheets-conditional-formatting
@grapecity-software/spread-sheets-cell-state
@grapecity-software/spread-sheets-data-validation
@grapecity-software/spread-sheets-filter
@grapecity-software/spread-sheets-fill
@grapecity-software/spread-sheets-context-menu
@grapecity-software/spread-sheets-formula-textbox
@grapecity-software/spread-sheets-outline-column
@grapecity-software/spread-sheets-drag-merge
@grapecity-software/spread-sheets-statusbar
@grapecity-software/spread-sheets-auto-merge
@grapecity-software/spread-sheets-calc-engine
@grapecity-software/spread-sheets-hyperlink
@grapecity-software/spread-sheets-namebox
@grapecity-software/spread-sheets-input-mask您可以与插件和资源一起使用这些模块。为此，您需要在构建工具或 CLI 中配置一个从“@grapecity-software/spread-sheets”到“@grapecity-software/spread-common”的别名。
type=warning
注意：“@grapecity-software/spread-sheets”是包含这些个别节点模块（“@grapecity-software/spread-common”...）的单一模块，它们不应该同时使用，因为可能会导致一些未知错误。
依赖表
模块内部的依赖关系
以下表格显示了模块内的最小依赖关系。
Packages | Dependencies |
|---|---|
@grapecity-software/spread-sheets-languagepackages | @grapecity-software/spread-common @grapecity-software/spread-calc-engine |
@grapecity-software/spread-sheets-io | @grapecity-software/spread-common @grapecity-software/spread-sheets-core |
@grapecity-software/spread-sheets-charts | @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-floating-objects |
@grapecity-software/spread-sheets-shapes | @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-floating-objects |
@grapecity-software/spread-sheets-barcode | @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-sparklines |
@grapecity-software/spread-sheets-print | @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine |
@grapecity-software/spread-sheets-pdf | @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-print |
@grapecity-software/spread-sheets-slicers | @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-floating-objects @grapecity-software/spread-sheets-shapes @grapecity-software/spread-sheets-conditional-formatting @grapecity-software/spread-sheets-cell-types @grapecity-software/spread-sheets-filter @grapecity-software/spread-sheets-bindings @grapecity-software/spread-sheets-outlines @grapecity-software/spread-sheets-outline-column @grapecity-software/spread-sheets-tables |
@grapecity-software/spread-sheets-pivot-addon | @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-floating-objects @grapecity-software/spread-sheets-shapes @grapecity-software/spread-sheets-conditional-formatting @grapecity-software/spread-sheets-cell-types @grapecity-software/spread-sheets-filter @grapecity-software/spread-sheets-bindings @grapecity-software/spread-sheets-outlines @grapecity-software/spread-sheets-outline-column @grapecity-software/spread-sheets-tables @grapecity-software/spread-sheets-slicers @grapecity-software/spread-sheets-formula-textbox |
@grapecity-software/spread-sheets-tablesheet | @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-conditional-formatting @grapecity-software/spread-sheets-cell-types @grapecity-software/spread-sheets-filter @grapecity-software/spread-sheets-bindings @grapecity-software/spread-sheets-outlines @grapecity-software/spread-sheets-outline-column @grapecity-software/spread-sheets-tables @grapecity-software/spread-sheets-formula-textbox @grapecity-software/spread-sheets-context-menu @grapecity-software/spread-sheets-statusbar @grapecity-software/data-manager @grapecity-software/spread-sheets-auto-merge @grapecity-software/spread-sheets-cell-state @grapecity-software/spread-sheets-data-validation |
插件内的依赖关系
下表显示了插件内部的最小依赖关系。
Packages | Dependencies |
|---|---|
@grapecity-software/spread-sheets-languagepackages | @grapecity-software/spread-common @grapecity-software/spread-calc-engine |
@grapecity-software/spread-sheets-io | @grapecity-software/spread-common @grapecity-software/spread-sheets-core |
@grapecity-software/spread-sheets-charts | @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-floating-objects |
@grapecity-software/spread-sheets-shapes | @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-floating-objects |
@grapecity-software/spread-sheets-barcode | @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-sparklines |
@grapecity-software/spread-sheets-print | @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine |
@grapecity-software/spread-sheets-pdf | @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-print |
@grapecity-software/spread-sheets-slicers | @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-floating-objects @grapecity-software/spread-sheets-shapes @grapecity-software/spread-sheets-conditional-formatting @grapecity-software/spread-sheets-cell-types @grapecity-software/spread-sheets-filter @grapecity-software/spread-sheets-bindings @grapecity-software/spread-sheets-outlines @grapecity-software/spread-sheets-outline-column @grapecity-software/spread-sheets-tables |
@grapecity-software/spread-sheets-pivot-addon | @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-floating-objects @grapecity-software/spread-sheets-shapes @grapecity-software/spread-sheets-conditional-formatting @grapecity-software/spread-sheets-cell-types @grapecity-software/spread-sheets-filter @grapecity-software/spread-sheets-bindings @grapecity-software/spread-sheets-outlines @grapecity-software/spread-sheets-outline-column @grapecity-software/spread-sheets-tables @grapecity-software/spread-sheets-slicers @grapecity-software/spread-sheets-formula-textbox |
@grapecity-software/spread-sheets-tablesheet | @grapecity-software/spread-common @grapecity-software/spread-calc-engine @grapecity-software/spread-sheets-core @grapecity-software/spread-sheets-calc-engine @grapecity-software/spread-sheets-conditional-formatting @grapecity-software/spread-sheets-cell-types @grapecity-software/spread-sheets-filter @grapecity-software/spread-sheets-bindings @grapecity-software/spread-sheets-outlines @grapecity-software/spread-sheets-outline-column @grapecity-software/spread-sheets-tables @grapecity-software/spread-sheets-formula-textbox @grapecity-software/spread-sheets-context-menu @grapecity-software/spread-sheets-statusbar @grapecity-software/data-manager @grapecity-software/spread-sheets-auto-merge @grapecity-software/spread-sheets-cell-state @grapecity-software/spread-sheets-data-validation |
资源内的依赖关系
以下表格显示了资源内的最小依赖关系。
Packages | Dependencies |
|---|---|
@grapecity-software/spread-sheets-resources-ja | @grapecity-software/spread-common @grapecity-software/spread-sheets-core |
@grapecity-software/spread-sheets-resources-ko | @grapecity-software/spread-common @grapecity-software/spread-sheets-core |
@grapecity-software/spread-sheets-resources-zh | @grapecity-software/spread-common @grapecity-software/spread-sheets-core |
使用模块的示例代码
使用全局变量和核心模块
以下代码示例展示了如何使用核心模块和全局变量：
<!DOCTYPE html>
<html>
<head>
<title>Test SJS Modules with Global Variable</title>
<link rel="stylesheet" type="text/css"
href="./@grapecity-software/spread-common/styles/gc.spread.sheets.excel2016colorful.css" />
</head>
<body>
<div id="testDiv" style="width:100%;height:300px;"></div>
<script type='text/javascript' src="./@grapecity-software/spread-common/dist/gc.spread.common.min.js"></script>
<script type='text/javascript' src="./@grapecity-software/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="./@grapecity-software/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: {
'@grapecity-software/spread-common': './@grapecity-software/spread-common/dist/gc.spread.common.min',
'@grapecity-software/spread-sheets-core': './@grapecity-software/spread-sheets-core/dist/gc.spread.sheets.core.min'
}
});
require(['@grapecity-software/spread-common', '@grapecity-software/spread-sheets-core'], function (GC) {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
});
};
</script>
</body>
</html>使用 CommonJS 的核心模块
以下代码示例展示了如何使用 CommonJS 和核心模块：
import * as GC from "@grapecity-software/spread-common";
import "@grapecity-software/spread-sheets-core";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));使用 CommonJS 的 sparklines 模块
以下代码示例展示了如何使用 CommonJS 和 sparklines 模块：
import * as GC from "@grapecity-software/spread-common";
import "@grapecity-software/spread-calc-engine";
import "@grapecity-software/spread-sheets-core";
import "@grapecity-software/spread-sheets-calc-engine";
import "@grapecity-software/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 "@grapecity-software/spread-common";
import "@grapecity-software/spread-calc-engine";
import "@grapecity-software/spread-sheets-core";
import "@grapecity-software/spread-sheets-calc-engine";
import "@grapecity-software/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 "@grapecity-software/spread-common";
import "@grapecity-software/spread-sheets-core";
import "@grapecity-software/spread-sheets-resources-zh";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));