如何使用 angularjs 处理文件下载错误？

Question

下载文件看起来很简单，而且有很多可行的解决方案。 一直工作到服务器说401 UNAUTHORIZED。我的要求很自然：

• 在任何情况下都不能替换当前窗口。
• 我不想打开新窗口，因为它没有任何意义。
• 如果出现错误，必须向用户显示一些消息。

我尝试使用iframe 作为链接的目标，并希望在出现错误时得到通知。我看我很天真。

• 我可以想象在 iframe 中放置一些脚本来通知主页onunload。它看起来有点复杂，所以我先问一下。
• 我可以向服务器询问结果。不知何故，这肯定会奏效。但这也很复杂，因为有时间问题，并且会话已过期，所以我不得不绕过这个。

Answer 1

您可以使用Blob 对象来触发从javascript 下载文件。这是由 File API 引入的，并且仍处于 Working Draft 状态。 因此，您将获得有限的浏览器支持。截至 2015 年，您拥有对 Blob URLs 和 Blob Constructor 的广泛浏览器支持。

<div ng-controller="appController" ng-app="app">
    <a ng-href="{{ fileUrl }}" download="file.txt">download</a>
</div>

var app = angular.module('app', []);

// Angular prepends "unsafe" tag in ng-href to prevent XSS
// so we need to sanitize this
app.config(['$compileProvider', function ($compileProvider) {
    // for Angular 1.0.x and 1.1.x, you should use urlSanitizationWhitelist
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|blob|ftp):/);
}]);

app.controller('appController', function ($scope, $window) {
    // Creating a Blob with our data for download
    // this will parse the URL in ng-href such as: blob:http...
    var data = 'some data here...',
        blob = new Blob([data], { type: 'text/plain' }),
        url = $window.URL || $window.webkitURL;
    $scope.fileUrl = url.createObjectURL(blob);
});

查看demo fiddle here。

有一些库可以扩展浏览器对此的支持，例如Blob.js

您还应该查看FileSaver.js，它也回退到data:URI。

Answer 2

您可以通过使用 HTTP 拦截器来处理 HTTP 错误，而不会中断您的控制器/服务逻辑。当错误发生时，在拦截器中处理它，然后将错误广播到错误处理程序，错误处理程序可以向用户显示错误。

$httpProvider.interceptors.push(function($q, dependency1, dependency2) {
    return {
       'request': function(config) {
        // same as above
        },

        'response': function(response) {
        // same as above
     }
  };

});