Télécharger un ReactJS objet en tant que fichier

Je suis la création d'une application avec un ReactJS front-end qui se connecte à un Express de l'API serveur. Les appels à l'API sont faites en utilisant Ajax.

Dans l'un de mes points de vue, d'une table, avec une charge de "l'Exportation" des liens sur chaque ligne. L'Exportation liens conduisent à une Réagir la route qui appelle une API d'extrémité qui fournit un fichier CSV à télécharger.

Si j'ai touché l'API endpoint directement avec une demande valide (à l'extérieur de l'Réagissent app), un fichier de téléchargement est lancé dans mon navigateur. Parfait! Cependant, à la suite de l'Exportation lien de la Réagir la page tente de charger le point de vue où l'appel à l'API se produit. Le tableau disparaît de la vue et est remplacé par le contenu du fichier (sur le but de prouver que j'ai les données), mais aucun fichier n'est pas téléchargé.

Puis-je forcer un téléchargement du contenu de l'objet de la réponse dans un fichier?
Cela pourrait-il prendre place dans l'ajax succès de rappel?
J'ai fait une tentative avec le javascript, mais j'ai du mal avec la Réagir virtuel DOM...
Je suppose que ce doit être assez simple, mais je suis perplexe.

EDIT: les Commentaires de @Blex m'a aidé à résoudre ce problème! La solution est ajoutée à l'extrait de code...

Voici le JSX qui reçoit les données:

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

OriginalL'auteur fryeguy | 2015-07-03