我正在尝试csv
从node.js服务器流式传输文件.服务器部分非常简单:
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) }
在我的角度控制器中,我试图做这样的事情
$scope.csv = function() { $http({method: 'GET', url: '/orders'}); };
ng-click
在我的视图中点击按钮时调用此函数:
我已经查看了有关从Angular中的服务器下载文件的其他答案,但没有找到任何对我有用的内容.有一个共同的方法来做到这一点?似乎应该很简单.
这对我来说对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(); }
网上有关此问题的大多数参考文献都指出,您无法通过ajax调用"开箱即用"下载文件.我见过(hackish)涉及的解决方案,iframes
以及像@ dcodesmith这样的解决方案,它们都很有效.
这是我发现的另一种解决方案,它在Angular中工作并且非常直观.
在视图中,csv
使用<a>
以下方式包含带标记的下载按钮:
<a target="_self" ng-href="{{csv_link}}"> <button>download csv</button> </a>
(注意target="_self
那里,关键是要更加禁用它角的NG信内部应用程序的路由这里)
在您的控制器内,您可以定义csv_link
以下方式:
$scope.csv_link = '/orders' + $window.location.search;
($window.location.search
如果你想将额外的搜索查询传递给你的服务器,那么它是可选的和onlt)
现在,每次单击该按钮,它都应该开始下载.
$http
service返回一个promise
有两个回调方法,如下所示.
$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 });
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