Reactで、表のデータをCSVファイルとしてダウンロードする方法

export type Column<T> = {
  header: string;
  value: (row: T) => string | number;
};

// 表計算ソフトが数式として扱う文字で始まる文字列の前に ' を付ける
function guardFormula(s: string): string {
  return /^[=+\-@\t\r\n＝＋－＠]/.test(s) ? `'${s}` : s;
}

// 1つの値を、CSV の1つのフィールドにする
function toField(value: string | number): string {
  const s = typeof value === 'number' ? String(value) : guardFormula(value);
  // カンマ・"・改行を含む値は " で囲み、中の " は "" にする
  return /[",\r\n]/.test(s) ? `"${s.replaceAll('"', '""')}"` : s;
}

export function toCsv<T>(rows: T[], columns: Column<T>[]): string {
  const lines = [
    columns.map((c) => toField(c.header)),
    ...rows.map((row) => columns.map((c) => toField(c.value(row)))),
  ];
  return lines.map((fields) => fields.join(',')).join('\r\n') + '\r\n';
}

export function downloadCsv(csv: string, filename: string) {
  // 先頭の \uFEFF は BOM。Blob の中では EF BB BF の3バイトになる
  const blob = new Blob(['\uFEFF', csv], { type: 'text/csv;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

"A-001,ノート A5, 方眼,280,\r\n"

2行目: 5列 ["A-001","ノート A5"," 方眼","280",""]

import { useState } from 'react';
import { toCsv, downloadCsv, type Column } from './csv';

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

const PRODUCTS: Product[] = [
  { code: 'A-001', name: 'ノート A5, 方眼', price: 280, memo: '' },
  { code: 'A-002', name: '油性ボールペン 黒', price: 150, memo: '10本セットあり' },
  { code: 'A-003', name: 'クリップ "大"', price: 120, memo: '在庫は\n残りわずか' },
  { code: 'A-004', name: 'ゲルインクボールペン 赤', price: 180, memo: '=1+2' },
  { code: 'A-005', name: 'ファイル', price: 330, memo: '' },
];

const COLUMNS: Column<Product>[] = [
  { header: '商品コード', value: (p) => p.code },
  { header: '商品名', value: (p) => p.name },
  { header: '価格', value: (p) => p.price },
  { header: 'メモ', value: (p) => p.memo },
];

export function App() {
  const [query, setQuery] = useState('');
  // 画面の表と CSV の両方に、同じ絞り込み後の配列を使う
  const rows = PRODUCTS.filter((p) => p.name.includes(query));

  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}>
              {COLUMNS.map((c) => (
                <td key={c.header}>{c.value(p)}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <button
        type="button"
        disabled={rows.length === 0}
        onClick={() => downloadCsv(toCsv(rows, COLUMNS), 'products.csv')}
      >
        CSVで保存（{rows.length}件）
      </button>
    </main>
  );
}

"商品コード,商品名,価格,メモ\r\n"
"A-001,\"ノート A5, 方眼\",280,\r\n"
"A-002,油性ボールペン 黒,150,10本セットあり\r\n"
"A-003,\"クリップ \"\"大\"\"\",120,\"在庫は\n"
"残りわずか\"\r\n"
"A-004,ゲルインクボールペン 赤,180,'=1+2\r\n"
"A-005,ファイル,330,\r\n"