如何使用jQueryAjax调用从ASP.NETWebApi下载CSV文件

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (453)

我正在研究如何从jQueryAjax调用中从ASP.NETWebApi下载CSV文件。CSV文件是根据定制的CsvFormat从WebAPI服务器动态生成的。

jQuery的Ajax:

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

在服务器上,EmployeeCsvFormatter派生自BufferedMediaTypeFormatter:

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文件来使它工作呢?

提问于
用户回答回答于

内部:

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);
    }

然后,将此格式化程序添加到WebApi配置中:

   configuration.Formatters.Add(new EmployeeCsvFormatter
            (new QueryStringMapping("format", "csv", "text/csv")));
用户回答回答于

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

CsvMediaTypeFormatter(派生自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");
        }

所属标签

可能回答问题的人

  • 人生的旅途

    10 粉丝484 提问5 回答
  • 无聊至极

    4 粉丝504 提问5 回答
  • 富有想象力的人

    4 粉丝0 提问4 回答
  • 嗨喽你好

    7 粉丝480 提问4 回答

扫码关注云+社区

领取腾讯云代金券