WebApi télécharger la réponse en tant que fichier

Question

J'ai un problème avec mon WebApi. En fonction de la demande, la réponse est renvoyée sous la forme json ou csv. Pour la sérialisation, j'utilise NewtonSoft.Json et le mien CsvMediaTypeFormatter. Tant que je l'ai testé chez Postman, la réponse fonctionne comme prévu.

Ce que je lutte avec ce que je voudrais forcer le navigateur pour enregistrer le fichier au cas où la réponse est csv. Pour cela, dans mon CsvMediaTypeFormatter je l'emporterait sur la méthode SetDefaultContentHeaders comme suit:

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

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

Quand je teste mon API à l'aide Postman, je vois le contenu csv comme le corps, les en-têtes montrent également content-disposition: attachment; filename=content.csv.

Mais quand il est frappé par le navigateur (j'ai essayé Firefox, Chrome et Edge), il n'y a pas de boîte de dialogue "Enregistrer le fichier sous ...". Cependant, les outils de développement montrent l'appel en cours et la réponse ayant la valeur d'en-tête content-disposition.

J'ai essayé avec différentes valeurs Content-type: text/csv, text/plain, application/octet-stream ou application/x-unknown, mais sans succès.

Des idées que je fais mal?

Answer 1

Si vous utilisez une structure js pour effectuer l'appel http, vous devrez peut-être vider manuellement le contenu dans un fichier. Voici des exemples pour AngularJS et 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