対象読者
- 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帳票を構築することができます。
レポートシートを利用するメリット
SpreadJSのレポートシートは、帳票をWeb上に表示するだけでなく、既存のExcel資産を活用しながら帳票業務を効率化・自動化できる強力な機能です。
主なメリットは次のとおりです。
- Excel帳票をテンプレート化してそのまま再利用できる
- ノーコードで直感的に帳票を設計・編集できる
- データバインドによりWeb上で動的に帳票を表示できる
- 帳票システムの開発・保守の工数を大幅に削減できる
- そのままPDF出力や印刷もできる
このように、SpreadJSのレポートシートは、Excel資産の活用・開発工数の削減・紙とWebのハイブリッド運用といった観点から、実務での帳票開発を力強くサポートします。
既存のExcel帳票をWebに移行する方法
SpreadJSの「レポートシート」機能を活用すれば、既存のExcel帳票をそのままテンプレートとして読み込み、Webアプリ上で再利用することが可能です。
ここでは、無料でダウンロードした請求書テンプレートを例に、帳票テンプレートのインポートからWeb上での表示までの手順をご紹介します。
1. Excelファイルをインポート
レポートシートを開いた状態で、上部メニューから「デザイン」→「テンプレートをインポート」を選択し、インポート対象となるExcelファイルを読み込みます。
インポート後、SpreadJSデザイナ上に元のExcel帳票と同じレイアウトが表示されれば、取り込みは成功です。
元のExcelファイルに含まれる数式や関数も、SpreadJSのレポートシート上でそのまま利用可能です。明細行の2行目以降（計算式やサンプルデータを含む部分）は、テンプレートとして利用する際に不要なため、削除しておきましょう。
2. データソースの定義とバインド
帳票に差し込むデータは、あらかじめJSON形式で用意します。今回は請求明細データを10件含む「invoices.json」を作成し、json-serverを使ってローカルAPIとして提供できるようにします。
{
"invoices": [
{
"ID": 1,
"CustomerID": 1,
"CustomerName": "ABC株式会社",
"InvoiceNo": "1001",
"InvoiceDate": "2024/04/30",
"Subject": "ライティング案件（メディアA）",
"Description": "コラム記事執筆（SEO対応）",
"Quantity": 1,
"Unit": "式",
"UnitPrice": 8882
},
{
"ID": 2,
"CustomerID": 1,
"CustomerName": "ABC株式会社",
"InvoiceNo": "1001",
"InvoiceDate": "2024/04/30",
"Subject": "ライティング案件（メディアA）",
"Description": "軽微なWebデザイン調整",
"Quantity": 3,
"Unit": "本",
"UnitPrice": 18657
},
{
"ID": 3,
"CustomerID": 1,
"CustomerName": "ABC株式会社",
"InvoiceNo": "1001",
"InvoiceDate": "2024/04/30",
"Subject": "ライティング案件（メディアA）",
"Description": "サービス紹介ページのテキスト作成",
"Quantity": 2,
"Unit": "件",
"UnitPrice": 18424
},
{
"ID": 4,
"CustomerID": 1,
"CustomerName": "ABC株式会社",
"InvoiceNo": "1001",
"InvoiceDate": "2024/04/30",
"Subject": "ライティング案件（メディアA）",
"Description": "バナー文言提案",
"Quantity": 3,
"Unit": "件",
"UnitPrice": 18988
},
{
"ID": 5,
"CustomerID": 1,
"CustomerName": "ABC株式会社",
"InvoiceNo": "1001",
"InvoiceDate": "2024/04/30",
"Subject": "ライティング案件（メディアA）",
"Description": "LP原稿作成（構成案込み）",
"Quantity": 2,
"Unit": "本",
"UnitPrice": 14717
},
{
"ID": 6,
"CustomerID": 2,
"CustomerName": "テックワークス合同会社",
"InvoiceNo": "1002",
"InvoiceDate": "2024/05/10",
"Subject": "Webコンテンツ制作案件",
"Description": "軽微なWebデザイン調整",
"Quantity": 1,
"Unit": "本",
"UnitPrice": 12020
},
{
"ID": 7,
"CustomerID": 2,
"CustomerName": "テックワークス合同会社",
"InvoiceNo": "1002",
"InvoiceDate": "2024/05/10",
"Subject": "Webコンテンツ制作案件",
"Description": "コラム記事執筆（SEO対応）",
"Quantity": 1,
"Unit": "本",
"UnitPrice": 9154
},
{
"ID": 8,
"CustomerID": 2,
"CustomerName": "テックワークス合同会社",
"InvoiceNo": "1002",
"InvoiceDate": "2024/05/10",
"Subject": "Webコンテンツ制作案件",
"Description": "バナー文言提案",
"Quantity": 1,
"Unit": "件",
"UnitPrice": 11616
},
{
"ID": 9,
"CustomerID": 2,
"CustomerName": "テックワークス合同会社",
"InvoiceNo": "1002",
"InvoiceDate": "2024/05/10",
"Subject": "Webコンテンツ制作案件",
"Description": "コラム記事執筆（SEO対応）",
"Quantity": 1,
"Unit": "件",
"UnitPrice": 10135
},
{
"ID": 10,
"CustomerID": 2,
"CustomerName": "テックワークス合同会社",
"InvoiceNo": "1002",
"InvoiceDate": "2024/05/10",
"Subject": "Webコンテンツ制作案件",
"Description": "軽微なWebデザイン調整",
"Quantity": 2,
"Unit": "本",
"UnitPrice": 18132
}
]
}
次のコマンドでローカルサーバを起動してください。
json-server invoices.json -p 3000
ブラウザで「http://localhost:3000/invoices」にアクセスし、JSONデータが表示されれば準備完了です。
次に、SpreadJSデザイナを開き、レポートシートにデータソースを設定します。左側の「データソース」パネルから「テーブルの追加」を選び、以下の情報を入力してください。
- テーブル名：invoices
- 取得方法：GET（そのまま）
- URL：http://localhost:3000/invoices
設定が完了すると、データ項目をシート上にドラッグ＆ドロップできるようになります。明細行にあたる表部分のセルを選択し、右ペインの「セル型」を「リスト」に設定してください。これにより、複数行のデータを繰り返し表示できるようになります。
さらに、帳票レイアウトが固定行の明細表である場合は、「スピル時に上書きする」にもチェックを入れておきます。これでデータが流し込まれたときにレイアウトが伸長することなく、固定行の明細表を作成することができます。
各セルには、前半で作成した社員リストと同じ感覚で、データソースのパネルからDescription、Quantity、Unit、UnitPriceのフィールドをドラッグ＆ドロップしてデータバインドします。
最後に、1ページ単位で帳票を出力するため、コンテキスト（キー項目）を設定します。伝票番号を表示するセルを選び、右ペインの「拡張」タブから「コンテキスト」を「ユーザー設定」に変更し、「InvoiceNo」が入力されているセルを指定してください。
この設定により、請求書番号ごとに1ページとして帳票が生成され、複数の取引先への一括出力にも対応できます。
3. プレビューで確認して保存
レイアウトとデータバインドが完了したら、「デザイン」メニューの「プレビュー」ボタンで帳票の表示内容を確認します。請求書ごとにページが分かれ、明細やヘッダー、金額の計算式などが正しく表示されていればOKです。
問題がなければ、テンプレートを 「.sjs形式」で保存しておきましょう。
4. Webアプリ用ファイルを準備してWebで表示
作成した帳票テンプレート（.sjsファイル）をWebページ上に表示するには、プロジェクトファイル一式を準備する必要があります。
具体的な手順やファイル構成については、Page1「4.Webで表示準備」および技術記事を参照してください。また、サンプルが公式のGitHubでも公開されています。ページングや印刷、PDF出力などの実装方法もこちらをご参考ください。
準備が整ったら、index.html を右クリックして「Open with Live Server」を選択します。帳票テンプレートとJSONデータが正しくバインドされていれば、Webページ上に帳票が表示されます。
複数の請求書データがある場合は、コンテキスト設定に従ってページごとに分割表示されていれば成功です。
Web表示した帳票をPDFで出力する方法
SpreadJSでは、savePDF() 関数を使ってWeb上に表示された帳票をそのままPDFとして出力できます。ボタンに処理を割り当てれば、クリックひとつでPDFを表示・保存できます。
pdfButton.onclick = function () {
spread.savePDF(function (blob) {
var url = URL.createObjectURL(blob);
window.open(url);
})
}
日本語のテキストがPDF内で「□□□」や「?」に文字化けする場合は、PDF出力時に日本語フォントを読み込み、PDFFontsManager.registerFont() を使って登録してください。
※使用するフォントファイルは TrueType（.ttf）形式がおすすめです。詳細は技術記事を参照してください。
実務に活かせるレポートシートの応用例
SpreadJSのレポートシートは、帳票をWebで表示するだけでなく、実務のさまざまなシーンで活用できます。
例えば、次のような用途に対応可能です。
- 請求書の自動発行：APIで取得したデータをテンプレートにバインド。PDF出力や印刷にも対応可能
- 受注履歴の表示と管理：顧客ごとの取引履歴をテンプレートに差し込み、一覧や個別帳票として出力
- 帳票テンプレートの一元管理：「リボンコンテナ」機能でデザイナをWebアプリに組み込み、テンプレート編集や運用をブラウザ上で実現
このように、帳票業務のWeb化・自動化を進めたい現場にとって、SpreadJSは有力な選択肢となります。
まとめ
SpreadJSのレポートシートを使えば、ExcelライクなGUIで帳票を設計し、データをバインドするだけでWeb帳票を簡単に構築できます。Excel資産の再利用やPDF出力にも対応しており、開発と実務の両面で高い効果が期待できます。帳票のWeb化や業務自動化を検討している方にとって、有力な選択肢となるでしょう。
