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を試しました）、[名前を付けてファイルを保存...]ダイアログは表示されません。しかし、開発ツールは、呼び出しが行われたことと、content-dispositionヘッダー値を持つ応答を示します。

私は様々なContent-type値で試してみました：text/csv、text/plain、application/octet-streamまたはapplication/x-unknown、ない成功。

私が間違っていることは何ですか？

Answer 1

http呼び出しを行うためにいくつかのjsフレームワークを使用する場合は、手動でコンテンツをファイルにダンプする必要があります。以下は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