個々のモジュール
SpreadJS モジュールをnpmからインストールできます。Webpack、Rollup、ESBuild、Vite などの多くの最新のJavaScriptビルドツールやバンドラーは、モジュール、プラグイン、リソースを含む SpreadJS のNPM パッケージとシームレスに連携します。また、SpreadJS をプロジェクトのビルドプロセスに統合して、これらのツールの機能を最大限に活用することができます。
SpreadJSで個々のモジュールを使用する際、次の項目のリストを参照してください。
インストールのコマンド
npm installコマンドを実行して、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」を設定する必要があります。
type=warning
メモ：「@mescius/spread-sheets」は、個別のノードモジュール(「@mescius/spread-common」…)で構成される単一のモジュールです。不明なエラーが発生する可能性があるため、「@mescius/spread-sheets」と個別のモジュールを一緒に使用しないでください。
依存関係テーブル
モジュール内の依存関係
次の表は、モジュール内の最小限の依存関係を示しています。
パッケージ | 依存関係 |
|---|---|
@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-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でスパークラインモジュールを使用する
次のサンプルコードは、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();CommonJSでプリントモジュールを使用する
次のサンプルコードは、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で中国語のリソースモジュールを使用する
次のサンプルコードは、CommonJSで中国語のリソースモジュールを使用する方法を示しています。
import * as GC from "@mescius/spread-common";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-resources-zh";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));