SpreadJSでサーバーに配置したExcelファイルを読み込む
まずは01-basicプロジェクトで、SpreadJSの初期化とExcelファイルの読み込みまでを見ていきましょう。
プロジェクトのファイル構成
今回のサンプルは、以下のようなディレクトリ構成になっています。
samples/ ├─ 01-basic/ │ ├─ index.html ← デモアプリのHTMLファイル │ ├─ css/ │ │ ├─ gc.spread.sheets.18.0.6.css ← SpreadJSメインスタイルシート │ │ ├─ ...その他のSpreadJS関連スタイルシート │ │ └─ style.css ← デモアプリ用スタイルシート │ ├─ scripts/ │ │ ├─ gc.spread.sheets.all.18.0.6.min.js ← SpreadJSメインファイル │ │ ├─ ...その他のSpreadJS関連ファイル │ │ └─ index.js ← デモアプリメインスクリプトファイル │ └─ data/ │ └─ demo.xlsx ← 移行元のExcel VBAサンプルファイル ├─ 02-with-buttons/ │ └── ... └─ 03-with-ribbon/ └── ...
なお、gc.spreadからはじまるファイルは、いずれもSpreadJSのパッケージファイルのSpreadJS_Release/SpreadJS-Libs/SpreadJSフォルダ以下に含まれるファイルをコピーします。ほかにもさまざまなファイルがあるので、必要な機能に応じてコピーして利用してください。
HTMLの準備
本記事では、Pure JSで実装するため、シンプルなindex.htmlを用意し、必要なCSSやJSファイルを読み込みます。今回はメインのスクリプトをscripts/index.jsに配置するので、そのファイルも読み込みます。
<link rel="stylesheet" href="css/gc.spread.sheets.18.0.6.css" /> <link rel="stylesheet" href="css/gc.spread.sheets.excel2013lightGray.18.0.6.css" /> <link rel="stylesheet" href="css/style.css" /> <script src="scripts/gc.spread.sheets.all.18.0.6.min.js"></script> <script src="scripts/gc.spread.sheets.io.18.0.6.min.js"></script> <script src="scripts/gc.spread.sheets.resources.ja.18.0.6.min.js"></script> <script src="scripts/index.js"></script>
css/gc.spread.sheets.excel2013lightGray.18.0.6.cssは、Excel 2013のライトグレーのテーマを適用するためのスタイルシートです。これを指定するとSpreadJSの見た目がよりExcelに近くなります。
scripts/gc.spread.sheets.io.18.0.6.min.jsは、SpreadJSのIO機能を提供するスクリプトで、Excelファイルの読み込みや保存に必要です。
また、HTMLのbodyには以下のようにid（今回はcontainer）を指定した要素を配置します。この要素にSpreadJSを展開します。
<body> <div id="container"></div> </body>
メインスクリプトの実装
既存のExcelファイルを読み込むため、以下の流れでSpreadJSを初期化します。
- ライセンスキーと言語の設定
-
new GC.Spread.Sheets.Workbook("container")のようにSpreadJSのWorkbookを初期化 -
サーバーからExcelファイルをダウンロード（
fetchを使用） -
workbook.import関数でExcelファイルをSpreadJSにインポート
実際の初期化部分のソースコードは以下のようになります。
// 1. ライセンスキーと言語の設定
// GC.Spread.Sheets.LicenseKey = "ここにSpreadJSのライセンスキーを設定します";
GC.Spread.Common.CultureManager.culture("ja-jp");
// 2. SpreadJS の Workbook を初期化
const workbook = new GC.Spread.Sheets.Workbook("container");
// 3. サーバーからExcelファイルをダウンロード
const response = await fetch("data/demo.xlsx");
if (!response.ok) {
throw new Error("Excelファイルの取得に失敗しました");
}
// 4. ExcelファイルをSpreadJSにインポート
workbook.import(
await response.blob(), // ダウンロードしたExcelファイルをBlobとして渡す
() => console.log("Excelファイルの読み込みに成功しました"),
(error) => console.error("Excelファイルの読み込みに失敗しました", error),
{
fileType: GC.Spread.Sheets.FileType.excel,
}
);
1の部分で、各自が入手したライセンスキーを記述してください。ライセンスキーを設定せずにトライアル版として利用する場合には、コメントアウトしてください。この場合、実行時にトライアル版であることを示すメッセージが表示されます。
実行してみる
VS CodeのLive Serverを起動し、http://localhost:5500/01-basic/をブラウザで開いてみましょう。Excelファイルが読み込まれ、SpreadJS上にシートが展開されていることが確認できると思います。
ここでおもしろいのは「集計」タブのB2やB3セルなど、Excelの計算式が入っているセルがそのまま動作している点です。SpreadJSはExcelの計算式をサポートしているため、計算処理をJavaScriptで独自に実装する必要がありません。
また、Excelの条件付き書式もそのまま使用できるので、集計シートの2024年10月14日のように、祝日シートに記載されている日付のセル色が動的に変更されていることが確認できます。
HTMLのボタンからSpreadJSのデータを操作する
次に、HTML上にボタンを配置し、VBAマクロを実行するのと同じように、SpreadJS上で集計やクリアといった処理を実行できるようにします。サンプルプロジェクト02-with-buttonsを参照してください。
HTMLへのボタン追加
index.htmlに2つのボタン要素を追加しています。これでもHTMLはとてもシンプルですね。
<body>
<div id="toolbar">
<button id="aggregateBtn">集計</button>
<button id="clearBtn">クリア</button>
</div>
<div id="container"></div>
</body>
http://localhost:5500/02-with-buttons/をブラウザで開くと、2つのボタンが表示されており、クリックすることで、実際に集計シートの内容が変更されることが確認できると思います。
「集計」ボタンの実装
実際の「集計」ボタンの処理を確認しましょう。
-
集計シートのB列に、各店舗シート（A店舗／B店舗／C店舗）の店舗名を記載 -
集計シートのC列～AG列に、各店舗シートの売上データを日付ごとにコピー（縦方向に並んだデータを横方向に転記するイメージ）
「集計」ボタンの実装は以下のようになっています。
function performAggregate() {
// 集計シートを取得
const aggregateSheet = workbook.getSheetFromName(aggregateSheetName);
const aggregateSheetIndex = workbook.getSheetIndex(aggregateSheetName);
// 店舗シートを取得（集計シートの後のシートを取得）
const storeSheets = workbook.sheets.slice(aggregateSheetIndex + 1, workbook.sheets.length);
workbook.suspendPaint(); // 描画を一時停止
let storeIndex = 0;
for (const storeSheet of storeSheets) {
const storeName = storeSheet.name();
// 店舗名を最初の列にセット
aggregateSheet.setValue(aggregateRange.row + storeIndex, aggregateRange.col, storeName);
// 各店舗のシートから日ごとの売り上げの値を集計シートにセット（縦に並んだ数値を横並びにセット）
for (let dateIndex = 0; dateIndex < 31; dateIndex++) {
const value = storeSheet.getValue(2 + dateIndex, 1);
aggregateSheet.setValue(aggregateRange.row + storeIndex, aggregateRange.col + dateIndex + 1, value);
}
storeIndex++;
}
workbook.resumePaint(); // 描画を再開
}
ここで使用したSpreadJSのAPIを紹介します。
-
Workbook.getSheetFromName(sheetName): 指定したシート名のシートを取得します。 -
Workbook.getSheetIndex(sheetName): 指定したシート名のシートのインデックスを取得します。 -
Workbook.suspendPaint()/Workbook.resumePaint(): 大量のデータを操作する際に、描画のパフォーマンスを向上させるために使用します。suspendPaintで描画を一時停止し、resumePaintで描画を再開します。 -
Worksheet.setValue(row, col, value): 指定した行・列のセルに値をセットします。 -
Worksheet.getValue(row, col): 指定した行・列のセルの値を取得します。 -
Worksheet.name(): シートの名前を取得します（プロパティではなく関数なので注意してください）
「クリア」ボタンの実装
「クリア」ボタンでは集計シートの各店舗の売り上げ部分を消去しています。実際の処理は以下のようにWorksheet.clear()関数で、指定した範囲のセルをクリアしているだけです。
aggregateSheet.clear( aggregateRange.row, // 開始行 aggregateRange.col, // 開始列 aggregateRange.rowCount, // 行数 aggregateRange.colCount, // 列数 GC.Spread.Sheets.SheetArea.viewport, // 対象エリア GC.Spread.Sheets.StorageType.data // ストレージタイプ );
GC.Spread.Sheets.SheetArea列挙体では、操作対象のエリアタイプを指定します。今回は 通常のセル範囲を対象とするためSheetArea.viewportを指定しています。
GC.Spread.Sheets.StorageType列挙体では、操作対象の属性タイプを指定します。今回はセルの値を消去するため、StorageType.dataを指定しています。
以上で、サーバーから読み込んだExcelデータに対し、HTML上のボタン操作で処理を行うことができました。
