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,       // 列幅を自動調整
});

エクスポート

xlsx としてダウンロード

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

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

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

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

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

エクスポートされる内容

使用例：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);
});