使用Angular通过Ajax下载文件

本文关键字：下载 文件 Ajax 通过 Angular 使用 | 更新日期: 2023-09-27 18:18:39

我有一个服务，它生成一个CSV文件，并通过http/ajax get将其返回到页面。我希望用户点击按钮，调用服务，然后将文件下载到用户的浏览器。

我想用Angular的方式来做这件事，尽管我意识到这可能更多地与Ajax或浏览器有关，而不是Angular本身。

服务是用c#编写的，它返回的结果如下:

return File(Encoding.UTF8.GetBytes(WriteCSV(assetList)), "text/csv", "results.csv");
调用服务的控制器代码如下所示。它是有效的，但我不知道成功后该怎么做: 
$scope.exportCSV = function () {
    $http({
        method: "get",
        url: "ExportCSV"
    }).
        error(function (data, status, headers, config) {
            alert("Error exporting data to CSV.");
        });
};

使用Angular通过Ajax下载文件

你不能从一个普通的ajax GET或POST启动下载，你必须做传统的方式，例如window.location='url'和设置正确的http头与正确的内容类型，这将提示下载对话框在用户的浏览器

一种更‘angular’的方式可能是让你的控制器设置一个触发下载的标志，但将核心功能放在一个指令中，该指令构建了一个带有"download"属性的元素，并在显示时，一个回调/观察调用ng-click。

例如:

// put this in a template related to a given controller
<downloader ng-if="downloadready"></downloader>
// controller just needs to trigger the directive into action
module.controller(..., function($scope){
    $scope.downloadready = true; // trigger the directive to be created       
});
// and the directive code will build the element and click the button
module.directive('downloader', function ($compile) {
  return {
          restrict: 'E',
          replace: true,
          // values here can be placed in the template as variables and accessed in link()
          // but this is shortest to get the idea across
          template: '<a id="downloadbtn" class="btn" download="backup.json"></a>',
          link:function (scope, elm, attrs) {
              // this clicks the button outside the digest loop which the scope was updated in
              $timeout(function() {
                angular.element($('#downloadbtn')).triggerHandler('click');
              }, 0);
          }
     }
});

虽然我承认，这比在window.location.

上更改重定向更令人费解。
相关文章：