XLSXインポート・エクスポート

Excel 形式 (.xlsx) のファイルを読み込み・書き出す方法を説明します。

インポート

URL からの読み込み

const ws = grid.worksheet;

await ws.loadFromUrl('/data/sample.xlsx');

File オブジェクトからの読み込み

ファイル入力要素やドラッグ＆ドロップで取得した File を読み込めます。

// ファイル入力
const input = document.querySelector<HTMLInputElement>('#file-input');
input.addEventListener('change', async () => {
  const file = input.files?.[0];
  if (file) await ws.loadFromFile(file);
});

// ドラッグ＆ドロップ
container.addEventListener('drop', async (e) => {
  e.preventDefault();
  const file = e.dataTransfer?.files[0];
  if (file?.name.endsWith('.xlsx')) {
    await ws.loadFromFile(file);
  }
});

ArrayBuffer / Uint8Array からの読み込み

const response = await fetch('/data/sample.xlsx');
const buffer = await response.arrayBuffer();
await ws.loadFromBuffer(buffer);

読み込みオプション

await ws.loadFromUrl('/data/sample.xlsx', {
  startRow: 0,        // 挿入開始行
  startColumn: 0,     // 挿入開始列
  loadImages: true,    // 画像の読み込み
  autoFit: true,       // 列幅を自動調整
  chunked: true,       // チャンク非同期インジェスト（大きいファイルでも初回描画が高速）
});

エクスポート

xlsx としてダウンロード

// デフォルトファイル名でダウンロード
ws.saveAsXlsx();

// ファイル名・シート名を指定
ws.saveAsXlsx({
  filename: 'report.xlsx',
  sheetName: 'Sheet1',
});

エクスポートスナップショット

プログラムで xlsx データを扱いたい場合、スナップショットを取得できます。

const snapshot = ws.getExportSnapshot();
// snapshot には全セルデータ、スタイル、結合、列幅などが含まれる

エクスポートされる内容

ReoGrid JSON 形式

アプリケーション側でワークシート状態を永続化したい場合 — xlsx を経由せずに完全な状態を保存・復元したい場合 — は ReoGrid JSON 形式を使用してください。無損失で、ランタイムが必要とするすべて（セル・スタイル・数値書式・リッチテキスト・結合・罫線・サイズ／表示状態・固定・条件付き書式・アウトライン・フィルター・セルタイプ・保護・交互行）をカバーします。

import {
  writeReoGridJson,
  readReoGridJson,
  parseReoGridJson,
  type ReoGridJsonDocument,
} from '@reogrid/lite'

// シリアライズ
const doc: ReoGridJsonDocument = writeReoGridJson(worksheet)
const json = JSON.stringify(doc)
localStorage.setItem('my-sheet', json)

// 復元
const saved = localStorage.getItem('my-sheet')
if (saved) {
  const parsed = parseReoGridJson(saved)   // JSON 文字列 → ドキュメント
  readReoGridJson(worksheet, parsed)       // ワークシートに適用
}

これらは @reogrid/lite および @reogrid/pro のメインエントリから再エクスポートされているため、深いパスを参照する必要はありません。

使用例：React でのファイル操作

import { useRef } from 'react';
import { Reogrid } from '@reogrid/lite/react';
import type { ReogridInstance } from '@reogrid/lite/react';

function SpreadsheetApp() {
  const gridRef = useRef<ReogridInstance>(null);

  async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (file) {
      await gridRef.current?.worksheet.loadFromFile(file);
    }
  }

  function handleExport() {
    gridRef.current?.worksheet.saveAsXlsx({ filename: 'export.xlsx' });
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <div>
        <input type="file" accept=".xlsx" onChange={handleFileChange} />
        <button onClick={handleExport}>エクスポート</button>
      </div>
      <Reogrid ref={gridRef} style={{ flex: 1 }} />
    </div>
  );
}

画像の取得

xlsx から読み込んだ画像にアクセスできます。

// 画像一覧
const images = ws.getImages();

// Blob URL の生成
images.forEach((img) => {
  const url = ws.createImageUrl(img.id);
  console.log(img.id, url);
});

// 不要になった Blob URL の解放
ws.revokeImageUrl(imageId);

// 画像変更イベント
ws.onImagesChange((images) => {
  console.log('Images:', images);
});