将 ReactJS 对象下载为文件

Question

我正在构建一个带有连接到 Express API 服务器的 ReactJS 前端的应用程序。使用 Ajax 调用 API。

在我的一个观点中，表格的每一行都加载了“导出”链接。导出链接指向一个 React 路由，该路由调用一个 API 端点，该端点提供一个 CSV 文件供下载。

如果我使用有效请求（在 React 应用程序之外）直接访问 API 端点，则会在我的浏览器中启动文件下载。完美的！但是，按照 React 页面中的导出链接尝试加载调用 API 的视图。该表从视图中消失并被文件内容替换（目的是证明我有数据）但没有文件被下载。

我可以强制将响应对象的内容下载为文件吗？这会发生在 ajax 成功回调中吗？我尝试使用 javascript，但我在 React 虚拟 DOM 上苦苦挣扎……我认为这一定很简单，但我被难住了。

编辑：@Blex 的评论帮助我解决了这个问题！解决方案已添加到代码片段中…

这是接收数据的 JSX：

 module.exports = React.createClass({

    mixins: [Router.State],
    getInitialState: function() {
        return {
            auth: getAuthState(),
            export: [],
            passedParams: this.getParams()
        };
    },

    componentDidMount: function(){
        $.ajax({
            type: 'GET',
            url: ''+ API_URL +'/path/to/endpoint'+ this.state.passedParams.id +'/export',
            dataType: 'text',
            headers: {
                'Authorization': 'Basic ' + this.state.auth.base + ''
            },
            success: function (res) {
                // can I force a download of res here?
                console.log('Export Result Success -- ', res);
                if(this.isMounted()){
                    console.log('Export Download Data -- ', res);
                    this.setState({export: res[1]});
                    // adding the next three lines solved my problem
                    var data = new Blob([res], {type: 'text/csv'});
                    var csvURL = window.URL.createObjectURL(data);
                    //window.open(csvURL);
                    // then commenting out the window.open & replacing
                    // with this allowed a file name to be passed out
                    tempLink = document.createElement('a');
                    tempLink.href = csvURL;
                    tempLink.setAttribute('download', 'filename.csv');
                    tempLink.click();
                }
            }.bind(this),
            error: function (data) {
                console.log('Export Download Result Error -- ', data);
            }
        });
    },

    render: function(){
        console.log('exam assignment obj -- ', this.state.passedParams.name);
        var theFileContents = this.state.export;
            return(
            <div className="row test-table">
                <table className="table" >
                    <tr className="test-table-headers">
                    {theFileContents} // this loads the contents
                    // can I auto download theFileContents?
                    </tr>
                </table>
            </div>
            )
    }
});

原文由 fryeguy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据@blex 的评论添加以下代码可以使文件下载正常进行。要在上下文中查看它，请查看问题中的成功回调。

 var data = new Blob([res], {type: 'text/csv'});
var csvURL = window.URL.createObjectURL(data);
tempLink = document.createElement('a');
tempLink.href = csvURL;
tempLink.setAttribute('download', 'filename.csv');
tempLink.click();

原文由 fryeguy 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我在我的 React 应用程序中使用了一个包 jsonexport ，现在我可以通过单击链接下载 csv 文件。这是我所做的：

 .
.
import React, {useState,useEffect} from 'react';// I am using React Hooks
import * as jsonexport from "jsonexport/dist";
.
.
.
const [filedownloadlink, setFiledownloadlink] = useState("");//To store the file download link

.
.
.

创建一个将为 CSV 提供数据的函数。它也可以在网络请求的回调中。当调用此方法时，它将在 filedownloadlink 状态中设置值。

 function handleSomeEvent(){
var contacts = [{
        name: 'Bob',
        lastname: 'Smith'
    },{
        name: 'James',
        lastname: 'David'
    },{
        name: 'Robert',
        lastname: 'Miller'
    },{
        name: 'David',
        lastname: 'Martin'
    }];

    jsonexport(contacts,function(err, csv){
        if(err) return console.log(err);
        var myURL = window.URL || window.webkitURL //window.webkitURL works in Chrome and window.URL works in Firefox
        var csv = csv;
        var blob = new Blob([csv], { type: 'text/csv' });
        var csvUrl = myURL.createObjectURL(blob);
        setFiledownloadlink(csvUrl);
    });
}

在渲染函数中使用这样的东西：

 {filedownloadlink &&<a download="UserExport.csv" href={filedownloadlink}>Download</a>}

当 filedownloadlink 有一些数据要下载时，上面的链接将可见。

原文由 Neo 发布，翻译遵循 CC BY-SA 4.0 许可协议