4

我有一个生成 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.");
        });
};
4

2 回答 2

5

您无法从普通的 ajax GET 或 POST 启动下载，您必须采用传统方式，例如window.location='url'，使用正确的内容类型设置正确的 http 标头，这将在用户浏览器中提示下载对话框

于 2013-06-17T13:44:09.597 回答
2

可能更“角度”的方式是让您的控制器设置一个标志来触发下载，但将核心功能放在构建具有“下载”属性的元素的指令中，并且在显示时，回调/手表调用 ng -点击。

例如：

// 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 上更改重定向更令人费解。

于 2014-09-12T21:58:21.683 回答