I am building an application with a ReactJS front end that connects to an Express API server. Calls to the API are made using Ajax.

In one of my views, a table loads with Export links on each row. The Export links lead to a React route that calls an API endpoint which provides a CSV file to download.

If I hit the API endpoint directly with a valid request (outside the React app), a file download is initiated in my browser. Perfect! However, following the Export link from the React page attempts to load the view where the call to the API occurs. The table disappears from the view and is replaced by the file contents (on purpose to prove I have the data) but no file is downloaded.

Can I force a download of the contents of the response object as a file?
Could this take place in the ajax success callback?
I made an attempt with javascript but I'm struggling with the React virtual DOM...
I assume this must be pretty straight forward but I'm stumped.

EDIT: Comments by @Blex helped me solve this issue! The solution is added to the code snippet...

Here is the JSX that receives the data:

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>

            )

    }

});