Question

我的WebApi存在问题。根据请求，响应将返回json或csv。对于序列化，我使用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内容为正文，标题显示为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

如果您使用某些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

WebApi下载响应为文件

1 个答案: