Question

我正在尝试找出是否有任何方法可以通过使用react。单击网页上的EXPORT按钮来下载csv文件。

这是我现在在组件下的内容-

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

其中handleExport使用来自后端的JSON数据生成一个csv文件。

我尝试使用react-csv，react-csv-downloader软件包，但是它们都不适合我。

我可以通过onClick下载CSV文件吗？示例代码将不胜感激。

谢谢！

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

如何在React中导出CSV对象

1 个答案: