如何获取已勾选元素存入数组并导出为CSV文件

核心实现逻辑 #

按照「收集选中条目到数组→基于数组生成CSV导出」的思路，只需要修正两个环节的逻辑就能正常运行，不需要调整整体方案。

• 选中数组维护环节：用框架响应式状态存储选中的结构化数据，不要存DOM引用，也不要在导出时临时查询DOM拿勾选状态，在勾选/取消操作的回调里实时同步更新数组
• CSV生成环节：严格遵循CSV格式规范做字段转义，添加BOM头解决中文乱码问题，通过临时a标签触发浏览器原生下载

可直接复用的代码实现 #

以下是React场景下的完整实现，和现有前端项目技术栈适配：

1. 选中状态维护 #

import { useState } from 'react';

export default function App() {
  // 存储选中的条目，初始为空数组
  const [selectedRows, setSelectedRows] = useState([]);
  // 替换为实际接口返回的列表数据即可
  const [listData] = useState([
    { id: 1, name: '测试条目1', createTime: '2024-01-01', remark: '备注内容1' },
    { id: 2, name: '测试条目2', createTime: '2024-01-02', remark: '备注,含逗号' },
    { id: 3, name: '测试条目3', createTime: '2024-01-03', remark: '备注含换行\n第二行' }
  ]);

  // 单个条目勾选回调
  const handleRowCheck = (row, checked) => {
    if (checked) {
      // 勾选时做去重判断后加入选中数组
      setSelectedRows(prev => 
        prev.some(item => item.id === row.id) ? prev : [...prev, row]
      );
    } else {
      // 取消勾选时从数组中移除对应条目
      setSelectedRows(prev => prev.filter(item => item.id !== row.id));
    }
  };

  // 全选框回调
  const handleCheckAll = (checked) => {
    setSelectedRows(checked ? [...listData] : []);
  };

2. CSV导出核心方法 #

const handleExportCsv = () => {
    if (selectedRows.length === 0) {
      alert('请至少选择一条要导出的数据');
      return;
    }

    // CSV表头，和实际数据字段一一对应
    const csvHeaders = ['条目ID', '条目名称', '创建时间', '备注'];
    // 字段转义方法：处理逗号、换行、双引号，避免导出后列错位
    const escapeField = (val) => {
      const strVal = String(val ?? '');
      if (strVal.includes(',') || strVal.includes('\n') || strVal.includes('"')) {
        return `"${strVal.replaceAll('"', '""')}"`;
      }
      return strVal;
    };

    // 拼接完整CSV内容
    const csvContent = [
      csvHeaders.map(escapeField).join(','),
      ...selectedRows.map(row => 
        [row.id, row.name, row.createTime, row.remark].map(escapeField).join(',')
      )
    ].join('\n');

    // 生成Blob，添加BOM头解决Excel打开中文乱码问题
    const blob = new Blob(['\ufeff', csvContent], { type: 'text/csv;charset=utf-8;' });
    const downloadUrl = URL.createObjectURL(blob);
    // 创建临时a标签触发下载
    const aTag = document.createElement('a');
    aTag.href = downloadUrl;
    aTag.download = `选中数据导出_${Date.now()}.csv`;
    document.body.appendChild(aTag);
    aTag.click();
    // 移除临时标签、释放内存
    document.body.removeChild(aTag);
    URL.revokeObjectURL(downloadUrl);
  };

3. 列表渲染部分 #

return (
    <div>
      <button onClick={handleExportCsv}>导出选中为CSV</button>
      <table>
        <thead>
          <tr>
            <th>
              <input 
                type="checkbox"
                checked={selectedRows.length === listData.length}
                onChange={(e) => handleCheckAll(e.target.checked)}
              />
            </th>
            <th>ID</th>
            <th>名称</th>
            <th>创建时间</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          {listData.map(row => (
            <tr key={row.id}>
              <td>
                <input
                  type="checkbox"
                  checked={selectedRows.some(item => item.id === row.id)}
                  onChange={(e) => handleRowCheck(row, e.target.checked)}
                />
              </td>
              <td>{row.id}</td>
              <td>{row.name}</td>
              <td>{row.createTime}</td>
              <td>{row.remark}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

常见问题排查 #

• 导出后CSV列错位：是字段未做转义导致，字段内的逗号、换行被解析为列分隔符，用上述escapeField方法处理每个字段即可修复
• Excel打开中文乱码：生成Blob时加上\ufeff BOM头即可解决
• 导出条目和实际勾选不一致：不要在导出时用DOM选择器拿勾选节点，必须以响应式状态维护的selectedRows数组作为唯一数据源

注意：如果列表是分页/虚拟滚动场景，选中数组需要额外处理跨页选中逻辑，不要只存储当前页的选中项。

内容的提问来源于stack exchange，提问作者Ronice Yemeli