从角度js的web api下载csv文件

rab*_*ana 48 javascript csv httpresponse asp.net-web-api angularjs

我的API控制器正在返回一个csv文件,如下所示:

    [HttpPost]
    public HttpResponseMessage GenerateCSV(FieldParameters fieldParams)
    {
        var output = new byte[] { };
        if (fieldParams!= null)
        {
            using (var stream = new MemoryStream())
            {
                this.SerializeSetting(fieldParams, stream);
                stream.Flush();
                output = stream.ToArray();
            }
        }
        var result = new HttpResponseMessage(HttpStatusCode.OK) { Content = new ByteArrayContent(output) };
        result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
        result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
        {
            FileName = "File.csv"
        };
        return result;
    }
Run Code Online (Sandbox Code Playgroud)

我发送和接收csv文件的angularjs如下所示:

$scope.save = function () {
            var csvInput= extractDetails();

            // File is an angular resource. We call its save method here which
            // accesses the api above which should return the content of csv
            File.save(csvInput, function (content) {
                var dataUrl = 'data:text/csv;utf-8,' + encodeURI(content);
                var hiddenElement = document.createElement('a');
                hiddenElement.setAttribute('href', dataUrl);
                hiddenElement.click();
            });
        };
Run Code Online (Sandbox Code Playgroud)

在chrome中,它会下载一个被调用document但没有文件类型扩展名的文件.文件的内容是[Object object].

在IE10中,没有下载任何内容.

我该怎么做才能解决这个问题?

更新:这可能适用于那些有相同问题的人:链接

ade*_*neo 62

试试吧:

File.save(csvInput, function (content) {
    var hiddenElement = document.createElement('a');

    hiddenElement.href = 'data:attachment/csv,' + encodeURI(content);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'myFile.csv';
    hiddenElement.click();
});
Run Code Online (Sandbox Code Playgroud)

基于这个问题中最优秀的答案

  • 这是一个人物阵列 (2认同)
  • 应该使用$ http而不是$ resource来获取csv字符串; $ resource预计可以很好地与json的对象一起使用 (2认同)
  • @Krishna是正确的,请在此处查看类似的答案:http://stackoverflow.com/a/17888624/1848999 (2认同)

Man*_*rma 9

我使用了以下解决方案,它对我有用.

 if (window.navigator.msSaveOrOpenBlob) {
   var blob = new Blob([decodeURIComponent(encodeURI(result.data))], {
     type: "text/csv;charset=utf-8;"
   });
   navigator.msSaveBlob(blob, 'filename.csv');
 } else {
   var a = document.createElement('a');
   a.href = 'data:attachment/csv;charset=utf-8,' + encodeURI(result.data);
   a.target = '_blank';
   a.download = 'filename.csv';
   document.body.appendChild(a);
   a.click();
 }
Run Code Online (Sandbox Code Playgroud)