从Angular中的服务器下载文本/ csv内容作为文件
我想从一个node.js服务器streamcsv文件。 服务器部分非常简单：
server.get('/orders' function(req, res) { res.setHeader('content-type', 'text/csv'); res.setHeader('content-disposition', 'attachment; filename='orders.csv'); return orders.pipe(res); // assuming orders is a csv file readable stream (doesn't have to be a stream, can be a normal response) }
在我的angular度控制器，我试图做这样的事情
$scope.csv = function() { $http({method: 'GET', url: '/orders'}); };
当我在视图中ng-clickbutton时，调用此函数：
<button ng-click="csv()">.csv</button>
我已经看过有关从Angular中的服务器下载文件的其他答案，但没有find任何对我有用的东西。 有没有一个共同的方法来做到这一点？ 似乎应该是简单的东西。
$http服务返回一个promise ，它有两个callback方法，如下所示。
$http({method: 'GET', url: '/someUrl'}). success(function(data, status, headers, config) { var anchor = angular.element('<a/>'); anchor.attr({ href: 'data:attachment/csv;charset=utf-8,' + encodeURI(data), target: '_blank', download: 'filename.csv' })[0].click(); }). error(function(data, status, headers, config) { // handle error });
网上有关这个问题的大多数引用指出，你不能通过ajax调用“开箱即可”下载文件。 我已经看到（hackish）的解决scheme，涉及iframes和像@ dcodesmith这样的解决scheme的工作，是完全可行的。
这是我发现在Angular中工作的另一个解决scheme，非常直观。
在视图中 ，按以下方式用<a>标记包装csv下载button：
<a target="_self" ng-href="{{csv_link}}"> <button>download csv</button> </a>
（注意target="_self ，在这里关掉ng-app里的Angular路由是非常重要的）
在你的控制器里面，你可以通过以下方式定义csv_link ：
$scope.csv_link = '/orders' + $window.location.search;
（ $window.location.search是可选的，如果你想传递另外的search查询到你的服务器）
现在，每次你点击button，它应该开始下载。
var anchor = angular.element('<a/>'); anchor.css({display: 'none'}); // Make sure it's not visible angular.element(document.body).append(anchor); // Attach to document anchor.attr({ href: 'data:attachment/csv;charset=utf-8,' + encodeURI(data), target: '_blank', download: 'filename.csv' })[0].click(); anchor.remove(); // Clean it up afterwards
这段代码同时适用于Mozilla和Chrome
这对我来说是适用于IE 11+，Firefox和Chrome的。 在Safari浏览器下载一个文件，但作为未知和文件名未设置。
if (window.navigator.msSaveOrOpenBlob) { var blob = new Blob([csvDataString]); //csv data string as an array. // IE hack; see http://msdn.microsoft.com/en-us/library/ie/hh779016.aspx window.navigator.msSaveBlob(blob, fileName); } else { var anchor = angular.element('<a/>'); anchor.css({display: 'none'}); // Make sure it's not visible angular.element(document.body).append(anchor); // Attach to document for FireFox anchor.attr({ href: 'data:attachment/csv;charset=utf-8,' + encodeURI(csvDataString), target: '_blank', download: fileName })[0].click(); anchor.remove(); }
使用angular度1.5.9
我通过将window.location设置为csv文件下载url来实现它的工作。 经过testing，并与最新版本的Chrome和IE11一起工作。
angular
$scope.downloadStats = function downloadStats{ var csvFileRoute = '/stats/download'; $window.location = url; }
HTML
<a target="_self" ng-click="downloadStats()"><i class="fa fa-download"></i> CSV</a>
在PHP中设置响应的下面的标题：
$headers = [ 'content-type' => 'text/csv', 'Content-Disposition' => 'attachment; filename="export.csv"', 'Cache-control' => 'private, must-revalidate, post-check=0, pre-check=0', 'Content-transfer-encoding' => 'binary', 'Expires' => '0', 'Pragma' => 'public', ];
