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

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

インポート

ファイルはグリッドのインスタンスで読み込みます。ブック内のすべてのシートが 1 シートずつワークシートとして読み込まれ、シートタブで切り替えられます。Excel で保存したときにアクティブだったシートが最初に表示されます。

URL からの読み込み

await grid.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 grid.loadFromFile(file);
});

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

ArrayBuffer / Uint8Array からの読み込み

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

読み込むとワークシートが入れ替わるため、読み込み前に取得したワークシートを使い続けず、読み込み後に grid.worksheet を取得し直してください。

1 シートだけ読み込む

ファイルの1 シートだけを既存の1 つのワークシートに流し込み、ブックの他の部分には触れたくない場合は、ワークシートのシート単位の読み込みメソッドを使います。

const ws = grid.worksheet;

await ws.loadSheetFromUrl('/data/sample.xlsx', { sheetName: 'Q2 Forecast' });
await ws.loadSheetFromFile(file, { sheetName: 'Q2 Forecast' });
await ws.loadSheetFromBuffer(buffer, { sheetName: 'Q2 Forecast' });

sheetName で読み込むシートを指定します。省略すると先頭のシートです。シートタブは増えず、ファイルの他のシートは読み込まれません。

v1.7.0 での名前の変更

v1.7.0 より前は、このシート単位のメソッドがインスタンスのブック単位のメソッドとまったく同じ名前でした。そのため grid.worksheet.loadFromFile(file) は「このファイルを開く」と読めるのに、実際には先頭のシートだけを黙って読み込み、1 枚目が表紙や目次のブックは真っ白に見えていました。現在は、名前で何をするかが分かるようになっています。

旧名も従来どおりそのまま動きますが、@deprecated が付き（エディタでは取り消し線で表示されます）、初回の呼び出しで両方の移行先を示す警告をコンソールに出します。2.0 で削除します。 旧名を呼んでいるコードは、ほとんどの場合ブック全体を開くつもりのはずなので、インスタンスのメソッドに置き換えてください。

読み込みオプション

await grid.loadFromUrl('/data/sample.xlsx', {
  chunked: true,       // チャンク非同期インジェスト（大きいファイルでも初回描画が高速）
});

await grid.worksheet.loadSheetFromUrl('/data/sample.xlsx', {
  sheetName: 'Sheet2', // 読み込むシート（省略時は先頭シート）
});

xlsx 内に埋め込まれた画像は常に読み込まれます — 読み込みをスキップするオプションはありません。

読み込んだファイルの表示

既定のフォント

ファイル内で独自のスタイルを持たないセルは、ブックの既定のフォント（標準スタイル）で表示されます。一般的な Excel ファイルなら、書式を設定していないセルは 游ゴシック 11 や ＭＳ Ｐゴシック 11（英語版では Calibri 11）です。v1.7.0 より前は ReoGrid 独自の Arial 10 になっていたため、表の中で書式を触っていないセルだけが、隣の書式付きセルとフォントもサイズも違って見えていました。ファイルに存在しないセルに入力した場合は、これまでどおり ReoGrid の既定のフォントで始まります。

ReoGrid で計算できない数式

数式エンジンが評価できない数式があります。他のブックへの参照（=[1]Sheet1!A1*2）、テーブルの構造化参照（=SUM(Table1[Qty])）、その他エンジンが解釈できない構文です。v1.7.0 からは、こうしたセルに数式の文字列ではなく、Excel がファイルに保存した計算結果を表示します。

• その値は他の数式から参照でき、行・列の挿入／削除、並べ替え、移動でもセルと一緒に動きます。
• 数式そのものは保持され、エクスポート時に書き戻されるため、Excel ではこれまでどおり再計算されます。
• ReoGrid 上では再計算されません。セルを編集すると置き換わります。

スタイル「なし」のテーブル

Excel でスタイルを「なし」にしたテーブルは、装飾なしで読み込まれ、スタイル名なしで書き戻されます。v1.7.0 より前は TableStyleMedium2 の青い見出しと縞模様で表示されていました。テーブルスタイルも参照してください。

表示倍率とハイパーリンク

シートの表示倍率とハイパーリンクも読み込まれます（v1.7.0）。85% で保存したブックは 85% で開き、リンクはクリックで開きます。

エクスポート

xlsx としてダウンロード

Note: xlsx エクスポート（saveAsXlsx）は Pro 版で利用可能です。

const ws = grid.worksheet;

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

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

worksheet.saveAsXlsx() はそのシート 1 枚だけを保存します。すべてのシートを 1 つのファイルに保存するには、インスタンスで grid.saveAsXlsx({ filename: 'report.xlsx' }) を呼びます。

Excel で開いたときの見え方

v1.7.0 から、エクスポートしたブックは Excel で開いてもグリッドと同じ見た目になります。以前のバージョンでは次の違いがあり、いずれも書き出し側で修正しました。

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

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

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

対応コンテンツ

これまで保存時に黙って捨てられていた 3 つ — フローティング画像、セルコメント、印刷範囲 — が v1.6.0 から往復するようになりました。回避策として ReoGrid JSON に保存していた場合、もう必要ありません。

ReoGrid JSON 形式

完全な API・ドキュメント構造・複数シート入出力・xlsx → JSON 変換パターンは、専用ページ 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/pro/react';
import type { ReogridInstance } from '@reogrid/pro/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?.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>
  );
}

ヘッドレスでの取り込み

ブラウザ用の読み込みメソッド（grid.loadFromUrl / loadFromFile / loadXlsx と、ワークシートの loadSheetFrom*）は DOM を必要とします。顧客の .xlsx をブラウザ外でテンプレートに変換するビルドツール向けに、インポーター自体がエクスポートされています。

import { XlsxImporter, convertImageInfo } from '@reogrid/pro'

const importer = new XlsxImporter(worksheet)
const result = importer.load(bytes)          // または await importer.loadAsync(bytes)

// 画像は結果に返るので、ワークシートへ明示的に渡します
for (const image of result.images) {
  worksheet.loadImageFromImport(convertImageInfo(image))
}

画像の取得

xlsx から読み込んだ画像にアクセスできます。v1.6.0 からは挿入・移動・リサイズもできます — 画像をご覧ください。

Note: createImageUrl() / revokeImageUrl() は Pro 版で利用可能です。

// 画像一覧
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);
});