react-csv中CSVDownload组件无法指定文件名，求替代方案

我之前也碰到过这个问题！react-csv的CSVDownload组件确实不像CSVLink那样直接支持filename属性，不过有两个靠谱的办法能解决这个问题：

方法1：手动构建CSV下载逻辑 #

直接利用Blob和原生DOM API实现下载，完全可控文件名，还不需要依赖CSVDownload组件：

import { Parser } from 'react-csv';

class YourComponent extends React.Component {
  downloadCustomCSV = () => {
    const { data } = this.state;
    if (!data) return;

    // 使用react-csv的Parser生成标准CSV字符串
    const parser = new Parser();
    const csvContent = parser.parse(data);

    // 创建Blob对象
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    
    // 创建临时a标签触发下载
    const link = document.createElement('a');
    link.href = url;
    // 这里自定义你的文件名
    link.setAttribute('download', 'my-custom-data.csv');
    document.body.appendChild(link);
    link.click();
    
    // 清理临时元素和URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  };

  render() {
    return (
      // 仅当数据存在时渲染下载按钮
      this.state.data && (
        <button onClick={this.downloadCustomCSV}>下载CSV文件</button>
      )
    );
  }
}

方法2：隐藏CSVLink并触发点击 #

既然CSVLink支持filename属性，我们可以把它隐藏起来，通过ref手动触发点击事件，达到和CSVDownload一样的触发效果：

import { CSVLink } from 'react-csv';

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.csvLinkRef = React.createRef();
  }

  triggerDownload = () => {
    if (this.state.data) {
      this.csvLinkRef.current.link.click();
    }
  };

  render() {
    return (
      <>
        {this.state.data && (
          <>
            {/* 显示给用户的触发按钮 */}
            <button onClick={this.triggerDownload}>下载CSV文件</button>
            {/* 隐藏的CSVLink，用来指定文件名 */}
            <CSVLink
              ref={this.csvLinkRef}
              data={this.state.data}
              filename="my-custom-data.csv"
              style={{ display: 'none' }}
            />
          </>
        )}
      </>
    );
  }
}

两种方法都能完美解决文件名指定的问题，方法1更轻量化（不需要额外渲染隐藏组件），方法2则更贴合react-csv的原生用法，你可以根据自己的需求选择~

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