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

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

在任何情况下都不能替换当前窗口。

我不想打开新窗口，因为这没有任何意义。

如果发生错误，则必须向用户显示一些消息。

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

我可以想象在iframe中放置一些脚本，该脚本会通知主页onunload。看起来有点复杂，所以我先问一下。

我可以向服务器询问结果。无论如何，这肯定会起作用。但这也很复杂，因为存在计时问题并且 session 已过期，因此我必须规避这一点。

最佳答案

您可以使用 Blob 对象触发从javascript下载文件。这是通过File API引入的，并且仍处于“工作草稿”状态。因此，您将获得有限的浏览器支持。截至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

您还应该 checkout FileSaver.js，它也回落到data:URI。

关于javascript - 如何使用angularjs处理文件下载错误？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23848522/