Laden Sie eine CSV-Datei in EmberJs

Question

Ich habe eine Vielzahl von verschiedenen Funktionsaufrufen versucht, aber nicht herausfinden, wie Sie einen Download für eine CSV in EmberJs auslösen.

Hier ist mein letzter Code:

let endpoint = '/api/foo/'; 
let options = { 
    url: endpoint, 
    type: 'POST', 
    data: {}, 
    dataType: 'text' 
}; 
return new Ember.RSVP.Promise((resolve, reject) => { 
    options.success = function(result) { 
     var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(result); 
     window.open(uri, 'foo.csv'); 
    }; 
    options.error = (xhr, errorThrown) => { 
    console.log('error'); 
    // return Ember.run(null, reject, this.didError(xhr, xhr.status, xhr.responseJSON, 1)); 
    }; 
    Ember.$.ajax(options); 
}); 

Dieser Code erhebt keine Server- oder Client-Seite Fehler. Es bekommt eine 200 Antwort. Keine JavaScript-Fehler, und keine Konsole loggt irgendetwas, also weiß ich, dass es den Fehlerblock nicht trifft. Aber ... es wird den Dateidownload auf dem Client nicht auslösen. Weiß jemand, was fehlt?

Answer 1

Ich bin nicht in der Lage, dies zu testen, aber ich glaube, Ihr Problem ist mit einer new Versprechen, während was Sie wirklich wollen, ist das Versprechen selbst zurückzugeben.

So Ihren Code ändern:

let endpoint = '/api/foo/'; 
let options = { 
    url: endpoint, 
    type: 'POST', 
    data: {}, 
    dataType: 'text' 
}; 
return Ember.RSVP.Promise((resolve, reject) => { // note the deletion of new 
    options.success = function(result) { 
     var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(result); 
     window.open(uri, 'foo.csv'); 
    }; 
    options.error = (xhr, errorThrown) => { 
    console.log('error'); 
    // return Ember.run(null, reject, this.didError(xhr, xhr.status, xhr.responseJSON, 1)); 
    }; 
    Ember.$.ajax(options); 
}); 

Answer 2

In ein ähnliches Stück Funktionalität Implementierung, ging ich für einen anderen Weg. Anstatt eine AJAX-Anfrage zu erstellen, erstelle ich ein Formular und sende es an den Server. Mein API-Endpunkt gibt dann die CSV-Datei in der Antwort mit den entsprechenden Kopfzeilen für die Inhaltsdisposition zurück, und der Browser lädt die Datei einfach herunter.

(Abhängig von Ihrem Authentifizierungsschema müssen Sie möglicherweise Ihr Authentifizierungstoken als Wert in Ihre Formulardaten aufnehmen).

Beispielcode unten. Sie werden sehen, dass ich das Authentifizierungs-Token hinzufüge. Die Aktions-URL des Formulars wird im Markup der Seite festgelegt, Sie können sie jedoch hier dynamisch festlegen.

csvDownload() { 
    let form = Ember.$('#csvdownloadform') 
    let input = Ember.$('#csvdownloadtoken') 
    input.val(this.get('session').get('session.content.authenticated.token')) 
    form.submit() 
    input.val('') 
    form_func.val('') 
},