当前位置：首页 > React

React如何下载csv文件

2026-03-31 14:56:15React

使用Blob对象和URL.createObjectURL

在React中，可以通过创建Blob对象并使用URL.createObjectURL生成下载链接。将CSV数据转换为Blob，创建一个隐藏的<a>标签触发下载。

React如何下载csv文件

const downloadCSV = (data, filename) => {
  const blob = new Blob([data], { type: 'text/csv' });
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.setAttribute('hidden', '');
  a.setAttribute('href', url);
  a.setAttribute('download', filename);
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

使用第三方库如react-csv

安装react-csv库可以简化CSV下载流程。该库提供CSVLink组件，直接绑定数据即可生成下载按钮。

React如何下载csv文件

npm install react-csv

import { CSVLink } from 'react-csv';

const data = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 }
];

<CSVLink data={data} filename={"users.csv"}>
  Download CSV
</CSVLink>

通过后端API下载文件

如果CSV数据需要从后端获取，可以使用fetch或axios请求API，将响应处理为Blob后下载。

const downloadCSVFromAPI = async (url, filename) => {
  const response = await fetch(url);
  const blob = await response.blob();
  const downloadUrl = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = filename;
  a.click();
  window.URL.revokeObjectURL(downloadUrl);
};

处理动态生成的数据

对于动态生成的CSV内容，先将数据转换为CSV格式字符串。使用数组的map和join方法处理字段和行。

const convertToCSV = (data) => {
  const headers = Object.keys(data[0]).join(',');
  const rows = data.map(row => 
    Object.values(row).join(',')
  );
  return [headers, ...rows].join('\n');
};

const handleDownload = () => {
  const csvData = convertToCSV(yourDataArray);
  downloadCSV(csvData, 'data.csv');
};