18

我正在研究如何通过 jQuery ajax 调用从 ASP.NET Web Api 下载 CSV 文件。CSV 文件是基于自定义 CsvFormatter 从 Web API 服务器动态生成的。

来自 jQuery 的 Ajax：

   $.ajax({
        type: "GET",
        headers: {
            Accept: "text/csv; charset=utf-8",
        },
        url: "/api/employees",
        success: function (data) {
        }
    });

在服务器上，EmployeeCsvFormatter实现与以下文章类似，源自BufferedMediaTypeFormatter：

http://www.asp.net/web-api/overview/formats-and-model-binding/media-formatters

public class EmployeeCsvFormatter : BufferedMediaTypeFormatter
{
    public EmployeeCsvFormatter()
    {
        SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/csv"));
    }
    ...
}

我还添加了覆盖方法以表明我想像正常下载文件的方式一样下载（可以在下载选项卡中查看下载文件）：

 public override void SetDefaultContentHeaders(Type type, 
    HttpContentHeaders headers, MediaTypeHeaderValue mediaType)       
{
    base.SetDefaultContentHeaders(type, headers, mediaType);
    headers.Add("Content-Disposition", "attachment; filename=yourname.csv");
    headers.ContentType =  new MediaTypeHeaderValue("application/octet-stream");
}

但它不起作用，下载文件没有显示在状态栏或 Chrome 的下载选项卡中，即使来自 Fiddler，我看到它的响应似乎是正确的：

HTTP/1.1 200 OK
Server: ASP.NET Development Server/11.0.0.0
Date: Mon, 11 Mar 2013 08:19:35 GMT
X-AspNet-Version: 4.0.30319
Content-Disposition: attachment; filename=yourname.csv
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Content-Type: application/octet-stream
Content-Length: 26
Connection: Close

1,Cuong,123
1,Trung,123

我来自 ApiController 的方法：

public EmployeeDto[] Get()
{
    var result = new[]
               {
                   new EmployeeDto() {Id = 1, Name = "Cuong", Address = "123"},
                   new EmployeeDto() {Id = 1, Name = "Trung", Address = "123"},
               };

    return result;
}

我还没有弄清楚的地方一定是错的。如何像正常方式一样通过下载 CSV 文件使其工作？

4

3 回答 3

15

jQuery Plugin for Requesting Ajax-like File Downloads无需 Ajax 即可使用简单的表单提交。

内部：

jQuery('<form action="'+ url +'" method="'+ (method||'post') +'">'+inputs+'</form>')
    .appendTo('body').submit().remove()

它有一个 ajax 风格的界面，所以从外面你可以这样调用它

$.download('/api/employees','format=csv');

另一种简单的方法使用：

$('#btnDownload').click(function (e) {
    e.preventDefault();
    window.location = "/api/employees?format=csv";
});

在服务器上，MediaTypeMappings必须通过添加一个构造函数来使用：

    public EmployeeCsvFormatter(MediaTypeMapping mediaTypeMapping)
        : this()
    {
        MediaTypeMappings.Add(mediaTypeMapping);
    }

然后，将此格式化程序添加到 Web Api 配置中：

   configuration.Formatters.Add(new EmployeeCsvFormatter
            (new QueryStringMapping("format", "csv", "text/csv")));
于 2013-03-11T08:48:33.550 回答
3

作为一种替代方法，可以通过单击锚点 () 或按钮提供下载，并将请求的 URL 设置为响应附件的 API 方法。

在CsvMediaTypeFormatter（Derived from System.Net.Http.Formatting.MediaTypeFormatter）中，除了如上面的答案所示映射text/csv MIME类型外，我发现需要做以下事情：

public override void SetDefaultContentHeaders(Type type, HttpContentHeaders headers, MediaTypeHeaderValue mediaType)
        {
            base.SetDefaultContentHeaders(type, headers, mediaType);
            headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
            {
                FileName = string.Concat("data", DateTime.UtcNow.ToString("yyyyMMddhhmmss"), ".csv")
            };

            headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
        }

注意：写流的时候，设置Content-Lengthheader，记得flush流。我发现如果没有调用Flush()，即使设置了正确的内容长度，返回的响应也不会成功返回客户端。

于 2014-04-04T10:21:16.570 回答
1

您还可以通过修改 xhr.xml 来设置 beforeSend 中的请求标头。

    $.ajax({
    url: "/api/employees",
    type: "GET",
    beforeSend: function (xhr) {
        xhr.setRequestHeader("Accept", "text/csv");
    },
    success: function (data) {
            }
    });
于 2013-06-05T20:34:40.643 回答