Reactで、表のデータをExcelファイルとして保存する方法

npm i --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz

xlsx  *
Severity: high
Prototype Pollution in sheetJS - https://github.com/advisories/GHSA-4r6h-8v6p-xvw6
SheetJS Regular Expression Denial of Service (ReDoS) - https://github.com/advisories/GHSA-5pgg-2g8v-p4x9
No fix available

import { utils, writeFileXLSX } from 'xlsx';

export type Column<T> = {
  header: string;
  value: (row: T) => string | number | Date;
  width?: number; // 列の幅（文字数）
  format?: string; // 数や日付の表示形式（例：'#,##0'）
};

export function downloadXlsx<T>(
  rows: T[],
  columns: Column<T>[],
  filename: string,
  sheetName: string,
) {
  // 1行目に見出し、2行目からデータを並べた「配列の配列」にする
  const aoa = [
    columns.map((c) => c.header),
    ...rows.map((row) => columns.map((c) => c.value(row))),
  ];
  const ws = utils.aoa_to_sheet(aoa);

  // 列の幅
  ws['!cols'] = columns.map((c) => ({ wch: c.width ?? 10 }));

  // 表示形式は、セル（数や日付）ごとに z に入れる
  columns.forEach((c, col) => {
    if (!c.format) return;
    for (let r = 1; r <= rows.length; r++) {
      const cell = ws[utils.encode_cell({ r, c: col })];
      if (cell && cell.t === 'n') cell.z = c.format;
    }
  });

  const wb = utils.book_new();
  utils.book_append_sheet(wb, ws, sheetName);
  writeFileXLSX(wb, filename, { compression: true });
}

import { useState } from 'react';
import type { Column } from './xlsx-export';

type Product = {
  code: string;
  name: string;
  price: number;
  arrived: Date;
  memo: string;
};

const PRODUCTS: Product[] = [
  { code: 'A-001', name: 'ノート A5, 方眼', price: 280, arrived: new Date(2026, 10, 2), memo: '' },
  { code: 'A-002', name: '油性ボールペン 黒', price: 150, arrived: new Date(2026, 10, 5), memo: '10本セットあり' },
  { code: 'A-003', name: 'クリップ "大"', price: 120, arrived: new Date(2026, 9, 28), memo: '在庫は\n残りわずか' },
  { code: 'A-004', name: 'ゲルインクボールペン 赤', price: 180, arrived: new Date(2026, 10, 8), memo: '=1+2' },
  { code: 'A-005', name: 'デスクマット 大判', price: 12800, arrived: new Date(2026, 9, 15), memo: '' },
];

const COLUMNS: Column<Product>[] = [
  { header: '商品コード', value: (p) => p.code, width: 10 },
  { header: '商品名', value: (p) => p.name, width: 26 },
  { header: '価格', value: (p) => p.price, width: 8, format: '#,##0' },
  { header: '入荷日', value: (p) => p.arrived, width: 12, format: 'yyyy-mm-dd' },
  { header: 'メモ', value: (p) => p.memo, width: 16 },
];

export function App() {
  const [query, setQuery] = useState('');
  const [saving, setSaving] = useState(false);
  const rows = PRODUCTS.filter((p) => p.name.includes(query));

  async function handleClick() {
    setSaving(true);
    try {
      // SheetJS はボタンを押したときに読み込む
      const { downloadXlsx } = await import('./xlsx-export');
      downloadXlsx(rows, COLUMNS, 'products.xlsx', '商品一覧');
    } finally {
      setSaving(false);
    }
  }

  return (
    <main>
      <label>
        商品名で絞り込む
        <input value={query} onChange={(e) => setQuery(e.target.value)} />
      </label>
      <table>
        <thead>
          <tr>
            {COLUMNS.map((c) => (
              <th key={c.header}>{c.header}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((p) => (
            <tr key={p.code}>
              <td>{p.code}</td>
              <td>{p.name}</td>
              <td>{p.price.toLocaleString('ja-JP')}</td>
              <td>{p.arrived.toLocaleDateString('ja-JP')}</td>
              <td>{p.memo}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <button type="button" disabled={rows.length === 0 || saving} onClick={handleClick}>
        Excelで保存（{rows.length}件）
      </button>
    </main>
  );
}

B2: t=s v="ノート A5, 方眼" z="General" w="ノート A5, 方眼" f=null
C2: t=n v=280 z="#,##0" w="280" f=null
C6: t=n v=12800 z="#,##0" w="12,800" f=null
D2: t=n v=46328 z="yyyy-mm-dd" w="2026-11-02" f=null
E4: t=s v="在庫は\n残りわずか" z="General" w="在庫は\n残りわずか" f=null
E5: t=s v="=1+2" z="General" w="=1+2" f=null

D2（z を変えない場合）: {"v":46328,"z":"m/d/yy","t":"n","w":"11/2/26"}

A-005,デスクマット 大判,"12,800",2026-10-15,

TZ=Asia/Tokyo: v=46328.375 w=2026-11-02
TZ=UTC: v=46328 w=2026-11-02
TZ=America/Los_Angeles: v=46327.666666666664 w=2026-11-01

<c r="E5" t="str"><v>=1+2</v></c>

chunk-SQE76S5B.js 577 バイト（gzip 376 バイト）
main.js 224999 バイト（gzip 69637 バイト）
xlsx-export-R33LAH4X.js 132444 バイト（gzip 42644 バイト）

シート名 "在庫/入荷": Sheet name cannot contain : \ / ? * [ ]
シート名 "ああああああああああああああああああああああああああああああああ": Sheet names cannot exceed 31 chars