帳票テンプレートを差し込む

固定様式の帳票を一度だけ設計し（{{token}} セルをヘッダー / 明細（×N） / フッターの帯に分ける）、データを差し込んでその場に展開します。展開後はただのセルなので、改ページ・PDF出力・xlsx・数式はすべてそのまま動きます。請求書や帳票に最適です。v1.4 で追加されました。

Pro 限定。 defineReportTemplate / bindReport には有効な licenseKey が必要です。

1. テンプレートを設計する

リテラル文字列と {{token}} セルをそのままグリッドに入力します。単一トークンのセルは差し込む値の型を保ちます（数値は数値のまま）。明細帯では {{#index}}（1始まりの行番号）と {{#count}}（総件数）が使えます:

import { createReogrid } from '@reogrid/pro';

const grid = createReogrid('#grid', { licenseKey: 'YOUR-LICENSE-KEY' });
const ws = grid.worksheet;

// ヘッダー
ws.cell('A1').setValue('請求書');
ws.cell('A3').setValue('No:');    ws.cell('B3').setValue('{{invoiceNo}}');
ws.cell('A4').setValue('日付:');   ws.cell('B4').setValue('{{date}}');
ws.cell('A5').setValue('請求先:'); ws.cell('B5').setValue('{{customer.name}}'); // ドット区切りのパス可

// 明細帯 — 設計上は1行、レコードごとに繰り返し
ws.cell('A7').setValue('{{#index}}');
ws.cell('B7').setValue('{{name}}');
ws.cell('C7').setValue('{{qty}}');
ws.cell('D7').setValue('{{price}}');
ws.cell('E7').setValue('=C7*D7');    // 行ごとの数式 — 相対参照はレコードごとにシフト

// フッター
ws.cell('D9').setValue('合計');
ws.cell('E9').setValue('=SUM(E7:E7)'); // 集計は展開後の明細範囲に広がる

2. セクションを定義する

各帯に属する0始まり・両端含むの設計行を指定します。セクションは連続しており、detail セクションは source でデータ内の配列フィールドを指定します:

ws.defineReportTemplate({
  columns: [0, 4], // A:E — 展開する列範囲
  sections: [
    { role: 'header', rows: [0, 5] },
    { role: 'detail', rows: [6, 6], source: 'items', pageBreakEvery: 20 },
    { role: 'footer', rows: [7, 9] },
  ],
});

pageBreakEvery: N は、展開されたレコード N 件ごとに手動改ページを打ちます（固定様式の帳票に便利）。keepTogether（既定 true）は1レコードをページ境界で分割しません。

3. データを差し込む

トップレベルのフィールドがヘッダー/フッターのトークンに、各配列フィールド（detail の source をキーに）が繰り返し帯に流れます。明細は縦に展開され、行は下にずれ、列は動きません:

ws.bindReport({
  invoiceNo: 'INV-2026-0042',
  date: '2026-06-18',
  customer: { name: '株式会社サンプル' },
  items: [
    { name: 'Webサイト構築', qty: 1,  price: 350000 },
    { name: '保守（月額）',   qty: 12, price: 30000 },
    { name: 'ドメイン',       qty: 2,  price: 5000 },
  ],
});

// 展開を取り消してテンプレート表示に戻す:
ws.unbindReport();

行ごとの数式はレコードごとに相対シフトし、=SUM(E7:E7) のようなフッター集計は展開後の明細範囲全体をカバーするよう広がります。

grid.report ハンドル

同じ操作は、アクティブシートにスコープした grid.report からも行えます:

grid.report.define({ /* ReportTemplateSpec */ });
grid.report.bind({ /* ReportData */ });
grid.report.unbind();
grid.report.get();   // ReportTemplateSpec | null
grid.report.state(); // 'none' | 'template' | 'bound'

Lite で読める同等物: ws.getReportTemplate()、ws.getReportState()。

PDF出力と組み合わせる

差し込んだ帳票はただのセルなので、そのまま印刷品質の PDF に流せます。ブラウザ側で完結する請求書・帳票パイプラインになります:

import { loadDefaultJapaneseFont } from '@reogrid/pro';

const font = await loadDefaultJapaneseFont();
grid.saveAsPdf({ font, usePageBreaks: true, filename: 'invoice.pdf' });

関連

• 帳票バインディング
• PDFを書き出す
• 請求書を作る