React：使用通过 Socket IO 从后端检索的数据在客户端创建 CSV

Question

我正在寻找一种解决方案，将从后端检索的数据写入 csv 并下载到由我的一个反应组件上的事件触发的客户端 pc。我已经尝试了一些带有 react-csv 等软件包的解决方案，但我无法使用异步功能。

如有任何建议，我们将不胜感激。

Answer 1

不确定 "async feature" 是什么意思，但如果您只是想创建 CSV 下载，您可以使用带有 download 属性的简单锚标记，如下所示：

  <a
    href=`data:text/csv,${encodeURI(your-csv-string)}`
    download=`your-file.csv`>

    Click to download
  </a>

如果您需要挂接到组件中的事件，您可以按照以下方式执行操作：

handleClick() {
  // Do some stuff (build the csv string?)

  // Initiate the download
  this.link.href = `data:text/csv,${encodeURI(your-csv-string)}`
  this.link.download = `your-file.csv`
  this.link.click()
}

render() {
  return (
    <div>
      // Create a hidden link with a ref you can use later
      <a ref={link => this.link = link}
        style={{display: 'none'}}
      />

      <button onClick={this.handleClick}>Click to download</button>
    </div>
  )  
}

React：使用通过 Socket IO 从后端检索的数据在客户端创建 CSV

React: Create CSV at client side with data retrieved from backend via Socket IO

csv

export-to-csv

reactjs