WebApi Antwort herunterladen als Datei

Question

Ich habe ein Problem mit meinem WebApi. Basierend auf der Anforderung wird die Antwort entweder als json oder csv zurückgegeben. Für die Serialisierung verwende ich NewtonSoft.Json und meine eigene CsvMediaTypeFormatter. Solange ich es von Postman aus teste, funktioniert die Antwort wie erwartet.

Was ich damit zu tun habe, möchte ich den Browser zwingen, die Datei zu speichern, falls die Antwort csv ist. Um das zu erreichen, in meinem CsvMediaTypeFormatter overrode ich die SetDefaultContentHeaders Methode wie folgt:

public override void SetDefaultContentHeaders(Type type, HttpContentHeaders headers, MediaTypeHeaderValue mediaType) 
{ 
    base.SetDefaultContentHeaders(type, headers, mediaType); 

    headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") 
           { 
            FileName = "content.csv" 
           }; 
} 

Wenn ich meine API testen mit Postman, ich sehe den csv Inhalt wie der Körper, auch die Header zeigen content-disposition: attachment; filename=content.csv.

Aber wenn es vom Browser getroffen wird (ich habe Firefox, Chrome und Edge ausprobiert), gibt es kein Dialogfeld "Datei speichern unter ...". Die Dev-Tools zeigen jedoch den auszuführenden Anruf und die Antwort mit dem Header-Wert content-disposition an.

Ich habe versucht, mit verschiedenen Content-type Werte: text/csv, text/plain, application/octet-stream oder application/x-unknown, aber ohne Erfolg.

Irgendwelche Ideen, was ich falsch mache?

Answer 1

Falls Sie ein js-Framework zum Ausführen des http-Aufrufs verwenden, müssen Sie den Inhalt möglicherweise manuell in eine Datei speichern. Im Folgenden finden Sie Beispiele für AngularJS und Angular2.

AngularJS:

this.$http(req).success(data => { 
    const file = new Blob([data], 
     { 
      type: "text/csv" 
     }); 

    const a = document.createElement("a"); 
    a.href = URL.createObjectURL(file); 
    a.target = "_blank"; 
    a.download = `yourfilename.csv`; 
    document.body.appendChild(a); 
    a.click(); 
}); 

Angular2 +

downloadFile(data: Response){ 
    const file = new Blob([data], 
     { 
      type: "text/csv" 
     }); 
    var url= window.URL.createObjectURL(blob); 
    window.open(url); 
} 

How to create and save file to local fileSystem using AngularJS?

How do I download a file with Angular2