Как экспортировать объект CSV в реагировать

Question

Я пытаюсь выяснить, могу ли я каким-либо образом загрузить CSV-файл, нажав кнопку EXPORT на моей веб-странице, с помощью реакции.

Вот что я сейчас имею под компонентом -

<div>
    <Button variant="contained" 
        size="small" 
        onClick={this.handleExport}>
        <SaveIcon label="Export" />
        Export
    </Button>
</div>

, где handleExport генерирует CSV-файл, используя данные JSON из серверной части.

Я пытался использовать пакеты response-csv, Reaction-CSV-Downloader, но ни один из них не работает для меня.

Есть ли способ загрузить файл CSV на Click?Пример кода будет принята с благодарностью.

Спасибо!

Answer 1

Я реализовал эту логику. Кодекс очень понятен.

export function exportCSVFile(headers, items, fileTitle) {
  if (headers) {
    items.unshift(headers)
  }

  // Convert Object to JSON
  var jsonObject = JSON.stringify(items)

  var csv = convertToCSV(jsonObject)

  var exportedFilenmae = fileTitle + '.csv' || 'export.csv'

  var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
  if (navigator.msSaveBlob) { // IE 10+
    navigator.msSaveBlob(blob, exportedFilenmae)
  } else {
    var link = document.createElement('a')
    if (link.download !== undefined) { // feature detection
      // Browsers that support HTML5 download attribute
      var url = URL.createObjectURL(blob)
      link.setAttribute('href', url)
      link.setAttribute('download', exportedFilenmae)
      link.style.visibility = 'hidden'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}