从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', ];