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，这是在客户端管理文件的好工具。

您的代码应如下所示：

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）？

1 个答案: