React中如何让用户下载数据（CSV）？

Question

我正在使用 React 创建一个 PWA（这意味着它应该在理想情况下可以在移动设备和浏览器中使用）。我的抽屉（汉堡菜单）中有一个按钮，可以让查看者下载 CSV 文件。

import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
// ... 

<ListItem
  button
  onClick={handleExport}
  className="drawer-export-contacts-button"
>
  <ListItemIcon>
    <ShareIcon />
  </ListItemIcon>
  <ListItemText primary={strings.exportContacts} />
</ListItem>

我有一个函数可以将 CSV 数据准备为 Blob，但我不知道如何触发下载。

function handleExport() {
  const csv = convertContactsToCSV(contacts);
  const csvData = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
  // ...
}

如何让用户下载数据？

Answer 1

您可以使用 FileSaver，这是在 client-side 上管理文件的好工具。

您的代码应如下所示：

import FileSaver from 'file-saver';

function handleExport() {
  const csv = convertContactsToCSV(contacts);
  const csvData = new Blob([csv], { type: 'text/csv;charset=utf-8;' });

  FileSaver.saveAs(csvData, 'data.csv');
}

React中如何让用户下载数据（CSV）？

How to let the user download data (CSV) in React?

javascript

reactjs

csv

blob

react-dom