从API下载AngularJS CSV文件

Question

我有一个管理员控制面板，管理员用户可以设置一些选项，然后点击按钮运行报告。该报告应返回一个CSV文件下载提示给用户。

我正在使用ui-router和$resource服务。响应头/ MIME类型已正确设置，但是$resource处理程序将CSV文件作为文本返回（未启动文件下载）。

我尝试直接创建下载链接，通过从$scope形成查询字符串，但不幸的是，我的API的身份验证方案使用自定义HTTP标头令牌，无法通过锚标签将其发送到API（也在另一个子域上）。例如这个：

<a href="http://example.com/admin/report/csv?usertype=1&days=5">Run</a>

有没有一种方式可以使用XHR请求（带有自定义头）来启动文件下载提示框？

- Harper

Answer 1

我正在使用自定义头部令牌，因此无法通过简单的链接下载报告；请求必须通过 XHR 进行。我的两部分解决方案：

1. 直接将 CSV 数据作为文本从 API 返回，移除文件 attachment 头部。这是正确的解决方案，因为它使 REST JSON API 与文件下载无关，而文件下载是浏览器的概念。

2. 将 API 响应数据包装在 Blob 中，然后使用 https://github.com/eligrey/FileSaver.js 启动文件下载。

缺点是需要 IE10+，但在我的情况下没问题。

- Harper

---

这听起来很合理，但你有一个fiddle或gist的例子吗？或者你能更新答案并提供一个脚本吗？谢谢。 - P.M

感谢Harper的回复。PM，请看下面的代码，它遵循了Harper的帖子并且运行得非常好！在视图中： <a ng-click="exportToCsv()">在控制器中，假设REST服务返回一个名为data的成员对象，其中包含CSV原始数据： $scope.exportToCsv = function () { ReportAction.runFullReport($scope.filterCriteria).$promise.then(function (result) { var blob = new Blob([result.data], { type: "text/plain;charset=utf-8" }); saveAs(blob, "report.csv"); }), function() { console.log('error'); }; }; - Bruno Deprez