如何在反应中导出c​​sv对象 [英] How to export csv object in react

问题描述

我想知道是否有任何方法可以使用 react 在我的网页上单击 EXPORT 按钮下载 csv 文件.

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

<按钮变体="包含"大小=小"onClick={this.handleExport}><SaveIcon label="导出"/>出口</按钮>

handleExport 使用来自后端的 JSON 数据生成 csv 文件.

我曾尝试使用 react-csv、react-csv-downloader 软件包，但没有一个对我有用.

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

谢谢！

解决方案

我已经实现了这个逻辑.代码一目了然.

 导出函数 exportCSVFile(headers, items, fileTitle) {如果(标题){items.unshift(标题)}//将对象转换为 JSONvar jsonObject = JSON.stringify(items)var csv = convertToCSV(jsonObject)var 导出文件名 = 文件标题 + '.csv' ||'导出.csv'var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })if (navigator.msSaveBlob) {//IE 10+navigator.msSaveBlob(blob，导出文件名)} 别的 {var link = document.createElement('a')if (link.download !== undefined) {//特征检测//支持 HTML5 下载属性的浏览器var url = URL.createObjectURL(blob)link.setAttribute('href', url)link.setAttribute('下载', 导出文件名)link.style.visibility = '隐藏'document.body.appendChild(链接)链接.点击()document.body.removeChild(链接)}}}

I am trying to figure out if there is any way I can download a csv file onClick of the EXPORT button on my webpage using react.

Here's what I have under component right now -

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

where handleExport generates a csv file using JSON data from backend.

I have tried to use react-csv, react-csv-downloader packages but none of them work for me.

Is there any way I can download the csv file onClick? Sample code would be greatly appreciated.

Thanks!

解决方案

I have this logic implemented. Code is very self explanatory.

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

这篇关于如何在反应中导出c​​sv对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！