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

Question

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

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

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

• 我可以想象在 iframe 中放置一些脚本来通知主页 onunload。它看起来有点复杂，所以我先问一下。
• 我可以向服务器询问结果。这肯定会以某种方式起作用。但这也很复杂，因为存在时间问题并且 session 已过期，所以我必须规避这一点。

Answer 1

您可以使用 Blob对象触发文件从 javascript 下载。这是随文件 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

您还应该查看 FileSaver.js这也回落到 data:URI。