对点击调用 API 做出反应并创建 csv答案

【问题标题】：React on click call API and create csv对点击调用 API 做出反应并创建 csv
【发布时间】：2017-07-11 18:47:43
【问题描述】：

我正在开发一个由 RoR 后端提供服务的 React 应用程序。我想要一个按钮，当单击该按钮时，它将向服务器查询所需数据并在用户浏览器中创建 CSV 以供下载。

我非常精通 Rails 方面的事情，但我完全不确定如何在 React 方面执行此操作（或者即使这是最好的顺序，因为我已经看到了一些答案说在组件最初安装时进行 API 调用可能会更好）。

感谢任何建议！

【问题讨论】：

您能否说明您想在哪里创建 CSV？您的意思是要在浏览器中生成 CSV（而不是进行 API 调用并让服务器返回 CSV 文件）？
我希望创建 CSV 供用户在他们的浏览器中下载，但希望不要将其存储在我们的应用程序中，因为如果有很多人，最终可能会产生大量数据下载它。我认为这必须发生在 React 端，因为 Rails 端没有视图，只是为 React 端提供数据，但我并不在乎，只要我得到所需的功能

标签： ruby-on-rails reactjs csv react-router

【解决方案1】：

这里最大的问题是您不能通过 AJAX 下载文件——浏览器不允许这样做。唯一的解决方案是在你的 react 组件中呈现一个静态表单，保存对它的引用，然后在你单击按钮时手动提交它。这是一个例子：

class MyComponent extends React.Component {
    constructor(props) {
      super(props)
      this.onClickDownload = this.onClickDownload.bind(this)
    }

    render() {
      return (
        <div>
          <form style={{display: 'none'}} method="POST" action="/api/reports/export"
            ref={(el) => {this.exportForm = el}}>
          </form>

          <button onClick={this.onClickDownload}>Download CSV</button>
        </div>
      )
    }

    onClickDownload() {
      this.exportForm.submit()
    }
}

【讨论】：

谢谢，但不起作用。这条线似乎不对<button onClick={onClick={}>Download CSV</button>
@SomeSchmo 我的错，我的代码中有错字。固定！

【解决方案2】：

我建议您在 Rails 应用程序中设置一个端点，该端点接受 CSV 报告的参数。当用户按下按钮时，此端点会被触发。

Rails 应用程序将创建 CSV，将其放在某个地方（可能是使用 https://github.com/carrierwaveuploader/carrierwave 的 S3），然后将 S3 URL 返回给 React 应用程序。然后用户可以转到该 URL 并下载文件。

最好异步生成 CSV，以免占用资源。在这种情况下，前端可以轮询（或使用 websocket）并等待报告准备好。准备就绪后，API 将返回 URL。

【讨论】：

【解决方案3】：

上述带有表单的解决方案可以，但为什么不直接使用链接并将其样式设置为按钮。这样你甚至可以有一个 GET 请求

render() {
  return ()
   <a href='api/reports/export'>Download CSV</a>
 }

【讨论】：