如何让用户在 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 数据准备为 a 的函数，Blob但我不知道如何触发下载。

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

你怎么能让用户下载数据？

Answer 1

您可以使用 FileSaver，它是在客户端管理文件的绝佳工具。

您的代码应如下所示：

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');
}