グリッドをXLSXで保存
現在のワークシートを .xlsx ファイルとしてブラウザのダウンロードでトリガーします。
Pro 限定。
saveAsXlsxは Lite では何もせず(no-op)、console.warnを出します。
基本的な使い方
import { createReogrid } from '@reogrid/pro';
const { worksheet } = createReogrid('#grid');
// ...populate the grid...
worksheet.saveAsXlsx({
filename: 'report.xlsx',
sheetName: 'Q1 2026',
});
既定値: filename: 'reogrid.xlsx'、sheetName: 'Sheet1'。
ボタンからトリガーする(React)
import { Reogrid, type ReogridInstance } from '@reogrid/pro/react';
import { useRef } from 'react';
export default function App() {
const ref = useRef<ReogridInstance>(null);
return (
<>
<button onClick={() => ref.current?.worksheet.saveAsXlsx({ filename: 'export.xlsx' })}>
Download XLSX
</button>
<Reogrid ref={ref} style={{ width: '100%', height: 500 }} />
</>
);
}
何がエクスポートされるか
| 含まれるもの | 補足 |
|---|---|
| セルの値 | 文字列・数値・真偽値 |
| 数式 | キャッシュ済みの計算結果付き(Excel は開いたときに再計算) |
| スタイル | フォント・色・配置・背景 |
| 表示形式 | 組み込みの Excel コード + カスタム |
| 結合セル | xlsx の結合として保持 |
| 罫線 | セルごとに4辺すべて |
| 行の高さ / 列の幅 | ピクセル → ポイントへ正確に変換 |
| 条件付き書式 | cellIs・expression・containsText のルール |
| 画像 | 埋め込みメディア(xlsx のドローイングパート) |
ラウンドトリップ: loadXlsx → saveAsXlsx は上記すべてを保持します。
ダウンロードせずにエクスポートする
ダウンロードをトリガーせずに xlsx のバイト列を作るには(たとえばフォームのPOSTに添付したり、サーバーへ送信したりするため):
import { buildXlsxFromSnapshot } from '@reogrid/pro';
const snapshot = worksheet.getExportSnapshot();
const bytes: Uint8Array = buildXlsxFromSnapshot(snapshot, 'Sheet1');
await fetch('/api/upload', {
method: 'POST',
headers: { 'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
body: bytes,
});