如何使用jQuery Ajax调用下载从ASP.NET网页API CSV文件 [英] How to download CSV file from ASP.NET Web Api using jQuery Ajax call

问题描述

我的工作如何从jQuery的AJAX调用ASP.NET网页API下载CSV文件。从网络服务器API基于自定义CsvFormatter动态生成CSV文件。

I am working on how to download CSV file from ASP.NET Web Api from jQuery ajax call. The CSV file is generated dynamically from Web API server based on custom CsvFormatter.

从阿贾克斯jQuery的：

Ajax from jQuery:

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

在服务器上， EmployeeCsvFormatter 实施下面的文章，源于类似 BufferedMediaTypeFormatter ：

On the server, the EmployeeCsvFormatter is implemented similar with below article, derived from BufferedMediaTypeFormatter:

<一个href=\"http://www.asp.net/web-api/overview/formats-and-model-binding/media-formatters\">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"));
    }
    ...
}

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

I also added override method to indicate that I would like to download like normal way to download file (can see the download file in download tab):

 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的下载选项卡上，即使从提琴手，我看到它的反应似乎是正确的：

But it does not work, the download file does not showed in status bar or in download tab on Chrome, even though from Fiddler, I see it the response seems correct:

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方式：

My method from 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文件像正常的工作方式？

It must be wrong somewhere which I have not figured out. How can I make it work by downloading CSV file like normal way?

推荐答案

<一个href=\"http://www.filamentgroup.com/lab/jquery_plugin_for_requesting_ajax_like_file_downloads/\">jQuery插件的Ajax请求类文件下载做它不使用Ajax 一个简单的形式提交。

jQuery Plugin for Requesting Ajax-like File Downloads does it without Ajax using a simple form submit.

在内部：

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

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

It has an ajax-style interface so from outside you can call it like this

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

使用另一种简单的方法：

Another simple approach using:

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

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

On the server, MediaTypeMappings must be used by adding one more constructor:

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

然后，添加这种格式转换为Web API配置：

Then, add this formatter into Web Api configuration:

   configuration.Formatters.Add(new EmployeeCsvFormatter
            (new QueryStringMapping("format", "csv", "text/csv")));

这篇关于如何使用jQuery Ajax调用下载从ASP.NET网页API CSV文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！