javascript-从Angu中的服务器下载文本/ csv内容作为文件

我正在尝试从node.js服务器流式传输ng-click文件。 服务器部分非常简单:

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的按钮时会调用此函数:

<button ng-click="csv()">.csv</button>

我查看了有关从Angular中的服务器下载文件的其他答案,但没有找到对我有用的东西。 有一种通用的方法吗? 似乎应该很简单。

5个解决方案
112 votes

$http服务将返回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
  });
dcodesmith answered 2019-11-08T02:59:28Z
21 votes

网络上有关此问题的大多数参考都指出,您不能通过ajax调用“开箱即用”来下载文件。 我已经看到涉及($window.location.search)的(骇人听闻的)解决方案,以及像@dcodesmith一样有效且完全可行的解决方案。

这是我发现的另一个可在Angular中使用且非常简单的解决方案。

在视图中,将$window.location.search下载按钮包装为<a>标签,方法如下:

<a target="_self" ng-href="{{csv_link}}">
  <button>download csv</button>
</a>

(请注意那里的$window.location.search,至关重要的是在ng-app中禁用Angular的路由在这里更多关于它的信息)

在控制器内部,您可以通过以下方式定义$window.location.search

$scope.csv_link = '/orders' + $window.location.search;

$window.location.search是可选的,如果要将附加搜索查询传递到服务器,则为onlt)

现在,每次单击该按钮时,它应该开始下载。

Michael answered 2019-11-08T03:00:33Z
21 votes
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

Komal Singh answered 2019-11-08T03:00:57Z
7 votes

这对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();
}
Nilath answered 2019-11-08T03:01:22Z
0 votes

使用角度1.5.9

我通过将window.location设置为csv文件下载URL使其工作。 经过测试,并且可以与最新版本的Chrome和IE11一起使用。

角度的

   $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',
];
forsimb answered 2019-11-08T03:02:08Z
translate from https://stackoverflow.com:/questions/20904151/download-text-csv-content-as-files-from-server-in-angular