Как разрешить пользователю загружать данные (CSV) в React?

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