響應點擊通話API並創建csv

我正在處理由RoR後端提供服務的React應用程序。我想要一個按鈕，單擊它時將查詢所需數據的服務器並在用戶瀏覽器中創建用於下載的CSV。響應點擊通話API並創建csv

我對事物的Rails方面非常精通，但我一點也不確定如何在React方面做這件事（或者，即使這是我見過的最佳順序一些答案表示，組件最初安裝時可能會更好地執行API調用）。

任何意見是讚賞！

2017-07-11 SomeSchmo

你能說明你想在哪裏創建CSV？你的意思是你想在瀏覽器中生成CSV（而不是進行API調用並讓服務器返回CSV文件）？ – srt32

我希望爲用戶創建CSV以便在其瀏覽器中下載，但希望不會將其存儲在我們的應用程序中，因爲如果許多人下載它，最終可能會導致大量的大量文件。我認爲必須在React方面發生，因爲Rails方面沒有視圖，只是爲數據提供React方面，但我並不關心哪個方面，只要我得到所需的功能 – SomeSchmo

這裏最大的問題是你不能通過AJAX下載文件 - 瀏覽器不允許它。唯一的解決方案是在反應組件中呈現靜態表單，保存對其的引用，並在您單擊按鈕時手動提交它。這裏有一個例子：

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

來源

2017-07-11 22:16:21

謝謝，但不工作。這條線似乎不正確'' – SomeSchmo

@SomeSchmo我的壞，我的代碼中有一個錯字。固定！ –

我建議你在Rails應用程序中有一個接受CSV報告參數的端點。當用戶按下按鈕時，該端點被擊中。

Rails應用程序將創建CSV，將其放置在某處（可能S3使用https://github.com/carrierwaveuploader/carrierwave），並返回一個S3 URL到React應用程序。然後用戶可以訪問該URL並下載該文件。

這可能是最好的異步生成CSV不捆綁資源。在這種情況下，前端可以輪詢（或使用websocket），並等待報告準備就緒。準備就緒後，API將返回URL。

來源

2017-07-11 22:09:51 srt32

上面的表單與表單解決方案將解決方案，但爲什麼不只是使用鏈接和樣式就像一個按鈕。這樣你甚至可以有一個GET請求

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

來源

2018-02-22 00:19:30

響應點擊通話API並創建csv

回答

相關問題