使用react-csv的CSVLink下载网页HTML而非预期CSV数据问题

以下是几种针对性的解决方案，按优先级尝试：

1. 检查组件是否在表单内并阻止默认行为 #

如果CSVLink被包裹在<form>标签中，点击时可能触发表单默认提交行为，导致下载当前页面HTML。可通过两种方式解决：

• 给CSVLink添加onClick事件阻止默认行为：

<CSVLink
    data={data}
    filename={`${name}_${location}_${abbreviation}.csv`}
    onClick={(e) => e.preventDefault()}>
    下载原始数据
</CSVLink>

• 直接将CSVLink移出<form>标签范围。

2. 绕开组件，手动实现CSV下载 #

若换库无效，可直接用原生JavaScript实现CSV生成与下载，彻底避免组件相关问题：

const downloadCSV = () => {
  if (!data || data.length === 0) return;

  // 生成CSV表头
  const headers = Object.keys(data[0])
    .map(key => `"${key}"`)
    .join(',');

  // 处理每行数据，兼容null/NaN及特殊字符
  const rows = data.map(item => {
    return Object.values(item).map(value => {
      if (value === null || Number.isNaN(value)) return '""';
      // 转义包含逗号或双引号的字符串
      if (typeof value === 'string' && (value.includes(',') || value.includes('"'))) {
        return `"${value.replace(/"/g, '""')}"`;
      }
      return `"${value}"`;
    }).join(',');
  });

  // 拼接完整CSV内容
  const csvContent = [headers, ...rows].join('\n');
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);

  // 创建临时链接触发下载
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', `${name}_${location}_${abbreviation}.csv`);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
};

// 使用按钮触发下载
<button onClick={downloadCSV}>下载原始数据</button>

3. 针对SSR环境优化（如Next.js） #

如果项目使用服务端渲染框架，react-csv可能因服务端缺少window对象导致渲染异常。可通过动态导入仅在客户端渲染组件：

import dynamic from 'next/dynamic';

// 禁用SSR，仅在客户端加载CSVLink
const CSVLink = dynamic(() => import('react-csv').then(mod => mod.CSVLink), {
  ssr: false
});

// 正常使用组件
<CSVLink
    data={data}
    filename={`${name}_${location}_${abbreviation}.csv`}>
    下载原始数据
</CSVLink>

4. 确保数据更新时组件重新渲染 #

若data是异步获取的，初始渲染时可能为空，导致CSVLink生成错误链接。可通过添加key强制组件在数据变化时重新渲染：

<CSVLink
    key={JSON.stringify(data)}
    data={data}
    filename={`${name}_${location}_${abbreviation}.csv`}>
    下载原始数据
</CSVLink>

或者仅在数据存在时渲染组件：

{data?.length > 0 && (
  <CSVLink data={data} filename={`${name}_${location}_${abbreviation}.csv`}>
    下载原始数据
  </CSVLink>
)}

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