WebApi 下载响应作为文件

WebApi download response as file

我的 WebApi 有问题。根据请求,响应返回为 jsoncsv。对于序列化,我使用 NewtonSoft.Json 和我自己的 CsvMediaTypeFormatter。只要我从 Postman 测试它,响应就会按预期工作。

我想强制浏览器保存文件,以防响应为 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"
                                 };
}

当我使用 Postman 测试我的 API 时,我看到 csv 内容为 body,header 也显示为 content-disposition: attachment; filename=content.csv

但是当它从浏览器(我试过 Firefox、Chrome 和 Edge)点击时,没有 "Save file as..." 对话框。但是,开发工具显示正在进行的调用和具有 content-disposition header 值的响应。

我尝试了各种 Content-type 值:text/csvtext/plainapplication/octet-streamapplication/x-unknown,但没有成功。

知道我做错了什么吗?

如果您使用某些 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();
});

角度2+

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?