Question

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

我想这样做Angular Way，虽然我知道这可能与Anguler本身有关的Ajax或浏览器更多。

服务在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.");
        });
};

Answer 1

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

Answer 2

可能更有“棱角分明”的方法是让你的控制器设置一个标志来触发下载，但是将核心功能放在一个指令中，该指令构建一个具有“下载”属性的元素，并在显示器上显示回调/监视调用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上的重定向更令人费解。

使用Angular通过Ajax下载文件

2 个答案: