将ReactJS对象下载为文件

Question

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

在我的一个视图中,表格在每行上加载"导出"链接.导出链接指向一个React路由,该路由调用API端点,该端点提供要下载的CSV文件.

如果我直接使用有效请求(在React应用程序之外)命中API端点,则会在浏览器中启动文件下载.完善!但是,在React页面的Export链接后,尝试加载发生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>
            )
    }
});

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