javascript - 将 ReactJS 对象下载为文件

Question

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

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

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

我可以强制将响应对象的内容下载为文件吗？这会发生在 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>
            )
    }
});

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