从 API 下载 AngularJS CSV 文件

Posted 2023-03-04

【中文标题】从 API 下载 AngularJS CSV 文件

【英文标题】：AngularJS CSV File Download from API

【发布时间】：2013-12-14 02:44:01

【问题描述】：

我有一个管理员控制面板，管理员用户可以在其中设置一些选项，然后单击一个按钮来运行报告。报告应向用户返回 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 请求（带有自定义标头）启动文件下载提示？

【参考方案1】：

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

直接从 API 以文本形式返回 CSV 数据，删除文件 attachment 标头。无论如何，这是正确的解决方案，因为它使 REST JSON API 不关心文件下载，这是一个浏览器概念。

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

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

【讨论】：

这似乎是合理的，但你有一个小提琴或要点作为例子吗？或者你可以用脚本更新答案吗？谢谢

感谢哈珀的回复。下午，请在 Harper 的帖子之后找到下面的一些代码，它就像一个魅力！在视图中： 在控制器中，假设其余服务返回一个对象，其成员名为 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'); ; ;