从 angular js 中的 web api 下载 csv 文件

IT技术 javascript angularjs csv asp.net-web-api httpresponse
2021-01-23 16:15:37

我的 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;
    }

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

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

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

在 IE10 中,不会下载任何内容。

我能做些什么来解决这个问题?

更新:这可能对你们有同样问题的人有用:链接

6个回答

试试看:

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

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

你能解决这个问题吗?我们也在 json 对象中获取 excel 文件的二进制内容。
2021-03-15 16:15:37
@Krishna 是正确的,在这里看到类似的答案:stackoverflow.com/a/17888624/1848999
2021-03-16 16:15:37
然后content是一个对象,而不是一个 csv 字符串。console.logcontent看看你得到了什么。
2021-03-25 16:15:37
这是一个字符数组
2021-04-04 16:15:37
应该使用 $http 而不是 $resource 来获取 csv 字符串;$resource 预计可以很好地处理 json 对象
2021-04-10 16:15:37

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

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

在 Chrome 42 中没有一个对我有用......

相反,我的指令现在使用这个link函数(base64使它工作):

  link: function(scope, element, attrs) {
    var downloadFile = function downloadFile() {
      var filename = scope.getFilename();
      var link = angular.element('<a/>');
      link.attr({
        href: 'data:attachment/csv;base64,' + encodeURI($window.btoa(scope.csv)),
        target: '_blank',
        download: filename
      })[0].click();
      $timeout(function(){
        link.remove();
      }, 50);
    };

    element.bind('click', function(e) {
      scope.buildCSV().then(function(csv) {
        downloadFile();
      });
      scope.$apply();
    });
  }
这就是它的用途!:)
2021-04-07 16:15:37
非常感谢为我节省了时间。
2021-04-09 16:15:37

最后一个答案对我有用了几个月,然后停止识别文件名,正如 adeneo 评论的那样......

@Scott 的回答对我有用:

使用 AngularJS 从 ASP.NET Web API 方法下载文件

我最近不得不实施这个。想分享我的想法;

为了让它在 Safari 中工作,我必须设置目标:'_self',。不要担心 Safari 中的文件名。看起来像这里提到的那样不受支持;https://github.com/konklone/json/issues/56 ( http://caniuse.com/#search=download )

下面的代码在 Mozilla、Chrome 和 Safari 中对我来说很好用;

  var anchor = angular.element('<a/>');
  anchor.css({display: 'none'});
  angular.element(document.body).append(anchor);
  anchor.attr({
    href: 'data:attachment/csv;charset=utf-8,' + encodeURIComponent(data),
    target: '_self',
    download: 'data.csv'
  })[0].click();
  anchor.remove();