反应:使用通过套接字 IO 从后端检索的数据在客户端创建 CSV

Question

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

任何建议将不胜感激。

Answer 1

不确定"异步功能"是什么意思，但如果您只是想创建 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>
  )  
}