如何在反应中导出csv对象答案

【问题标题】：How to export csv object in react如何在反应中导出csv对象
【发布时间】：2019-07-04 18:41:07
【问题描述】：

我想知道是否有任何方法可以使用 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 包，但它们都不适合我。

有什么方法可以下载 csv 文件 onClick 吗？示例代码将不胜感激。

谢谢！

【问题讨论】：

为什么语言标签是垃圾邮件？
您一直使用的标签不适合这个问题。请收下tour，查看what are tags and how should I use them? 和edit 您的帖子。请记住至少在提问时阅读您使用的标签上的鼠标悬停。

标签： javascript reactjs react-redux

【解决方案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 exportedFilename = fileTitle + '.csv' || 'export.csv'
    
      var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
      if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, exportedFilename)
      } 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', exportedFilename)
          link.style.visibility = 'hidden'
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        }
      }
    }

【讨论】：

乐于助人:)