作爲文件的WebApi下載響應

Question

我的WebApi出現問題。根據請求，回覆作爲json或csv返回。對於序列化，我使用NewtonSoft.Json和我自己的CsvMediaTypeFormatter。只要我從郵差測試它，反應按預期工作。

什麼我與它鬥爭，我想強制瀏覽器保存文件，以防應答是csv。爲了實現這一點，在我的CsvMediaTypeFormatter我推翻了SetDefaultContentHeaders方法如下：

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

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

當我使用郵差測試我的API，我看到了CSV內容爲體，也是頭顯示content-disposition: attachment; filename=content.csv。但是當它從瀏覽器（我試過Firefox，Chrome和Edge）中彈出時，沒有「Save file as ...」對話框。但是，開發工具顯示正在進行的調用以及具有content-disposition標題值的響應。

我試着用各種Content-type值：text/csv，text/plain，application/octet-stream或application/x-unknown，但沒有成功。

任何想法我做錯了嗎？

Answer 1

如果您使用一些js框架進行http調用，您可能需要手動將內容轉儲到文件。以下是AngularJS和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