対象読者
- Excelベースの帳票をそのままWebに移行したいと考えている方
- フロントエンドのHTML＋PureJSで帳票レイアウトを実装したい方
- バックエンドと連携して動的に帳票を表示・印刷したい方
必要な環境
本記事では、次の環境でSpreadJSのレポートシート機能を動作確認しています。
- Windows 11 64bit版
- SpreadJS 18.1.4
- Node.js 22.15.0 64bit版
- Google Chrome 136.0.7103.93 64bit版
- Visual Studio Code 1.99.3
サンプルコードは、公式の技術記事をもとに構築しています。手元の環境で再現する際には、下記記事からコードをコピーしてご活用ください。
SpreadJSは、公式サイトからトライアル版をダウンロードして利用できます。
また、今回の実装では簡易的なAPIサーバとして、json-server（バージョン 1.0.0-beta.3）を使用します。設定方法などの詳細は、メシウス株式会社が公開している技術記事に記載されているため、あわせてご確認ください。
SpreadJSで帳票をWeb表示する方法
ここからは、SpreadJSのレポートシート機能を使ってExcelライクな帳票テンプレートを作成し、Web上に表示するまでの流れを解説します。
1. データとサーバを準備
まずは、帳票にバインドする元データをJSON形式で用意します。今回は、次のような10件の社員情報を含む社員一覧表（employees.json）を作成します。
{
"employees": [
{ "id": "E001", "name": "田中 太郎", "department": "営業部", "position": "主任",
"hireDate": "2018-04-01" },
{ "id": "E002", "name": "鈴木 花子", "department": "総務部", "position": "係長", "hireDate": "2016-09-15" },
{ "id": "E003", "name": "佐藤 健", "department": "技術部", "position": "エンジニア", "hireDate": "2020-01-10" },
{ "id": "E004", "name": "山本 美咲", "department": "経理部", "position": "主任", "hireDate": "2019-07-20" },
{ "id": "E005", "name": "中村 翔", "department": "営業部", "position": "マネージャー", "hireDate": "2015-03-01" },
{ "id": "E006", "name": "小林 杏奈", "department": "人事部", "position": "スタッフ", "hireDate": "2021-11-11" },
{ "id": "E007", "name": "伊藤 健介", "department": "技術部", "position": "エンジニア", "hireDate": "2022-02-28" },
{ "id": "E008", "name": "斉藤 結衣", "department": "広報部", "position": "主任", "hireDate": "2017-06-12" },
{ "id": "E009", "name": "高橋 陽介", "department": "経理部", "position": "課長", "hireDate": "2014-01-05" },
{ "id": "E010", "name": "森田 未来", "department": "営業部", "position": "スタッフ", "hireDate": "2023-04-17" }
}
続いて、JSONデータをAPIとして利用するために、json-serverを使って簡易APIサーバを起動します。次のコマンドを実行してください。
json-server employees.json -p 3000
ブラウザで「http://localhost:3000/employees」にアクセスし、JSONデータが正しく表示されれば準備完了です。
2. SpreadJSデザイナで帳票テンプレートを作成
製品に付属しているSpreadJSデザイナ（デスクトップアプリ）を起動し、帳票のレイアウトを作成します。初期状態では通常のスプレッドシートになっているため、まずは「挿入」メニューから「レポートシート」を選択し、新しくレポートシートを追加しましょう。シート名が「Report1」になれば、レポートシートを追加できています。
続いて、左メニューの「データソース」から「テーブルの追加」を選択し、次のように設定します。
- テーブル名：employees
- 読み込み方法：GET（そのまま）
- URL：http://localhost:3000/employees
設定は自動保存されるため、特別な操作は不要です。
次に、レポートシートへ戻り、データのキーを任意のセルにドラッグ＆ドロップで配置します。今回のような一覧表形式の場合、すべてのセル型は右ペインから「リスト（テーブル）」に設定してください。
ヘッダー行には「社員ID」「氏名」「部署」「役職」「入社日」などの項目名を記入します。フォントサイズや罫線などのスタイルは、Excelと同様の操作感で編集可能です。
3. プレビューで帳票を確認して保存
「デザイン」メニュー内の「プレビュー」ボタンをクリックすると、データが展開された状態で帳票の完成イメージを確認できます。
プレビューで問題がなければ、ファイルを「.sjs形式」で保存します。このファイルは、Webアプリ側でテンプレートとして読み込むために使用します。
4. Webで表示準備
作成した帳票テンプレートをWebページ上で表示するための準備をしていきます。
プロジェクト構成を次のように配置します。その他の詳細なファイル構成は、技術記事を参考にしてください。
帳票テンプレートを読み込んでレポートシートを実行しているのは、「script/app.js」内の次の箇所です。
const res = fetch('reports/employees.sjs').then((response) => response.blob())
.then((myBlob) => {
spread.open(myBlob, () => {
console.log(`読み込み成功`);
reportSheet = spread.getSheetTab(0);
// レポートシートのオプション設定
reportSheet.renderMode('Preview');
reportSheet.options.printAllPages = true;
// レポートシートの印刷設定
var printInfo = reportSheet.printInfo();
printInfo.showBorder(false);
printInfo.zoomFactor(1);
reportSheet.printInfo(printInfo);
}, (e) => {
console.log(`***ERR*** エラーコード（${e.errorCode}） : ${e.errorMessage}`);
});
});
ここでは、「.sjs」形式で設計された帳票テンプレートがWebアプリケーション上に展開されています。これにより、ユーザーがブラウザ上で帳票を閲覧できる状態になります。
5. Webページで帳票を表示
index.html を右クリックして「Open with Live Server」を選択すると、ブラウザ上で帳票が表示されます。JSONデータがテンプレートにバインドされ、一覧表として表示されていれば成功です。
このように、SpreadJSとレポートシート機能を活用すれば、ノーコードで帳票テンプレートを設計し、JavaScriptのみでWeb帳票を構築することができます。
