ReoGrid ReoGrid Web

グリッドを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辺すべて
行の高さ / 列の幅ピクセル → ポイントへ正確に変換
条件付き書式cellIsexpressioncontainsText のルール
画像埋め込みメディア(xlsx のドローイングパート)

ラウンドトリップ: loadXlsxsaveAsXlsx は上記すべてを保持します。

ダウンロードせずにエクスポートする

ダウンロードをトリガーせずに 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,
});

関連

ニュースレター

開発の最新情報をお届けします

新しいリリース・機能追加・お知らせをいち早く受け取るには、
メーリングリストにご登録ください。