HTML <a>标签下载文件错误处理

Question

在我的应用程序中,我有标记链接到api文件下载(pdf).问题是它不是100%稳定,我必须处理服务不可用或文件不可用,服务器响应错误.

<a href="link/to/api" target="_blank" download="filename">

顺便说一句,我在这个应用程序中使用AngularJS.如果有任何使用它的解决方案,它会有很大帮助

Answer 1

如果其他人将面临类似的问题.这是我在一些研究后实施的解决方案.

从<a>标记中删除链接并添加单击事件:

<a href="#" ng-click="downloadFile()">

现在你需要下载blob(这里你可以控制你是否可以访问它的文件)并让make DOM对象添加所有需要的属性来触发它.

$scope.downloadFile = function () {
    $http.get('api/link', { responseType: 'arraybuffer' })
        .then(function (data) {
            var file = new Blob([data], { type: "application/pdf" });
            var url = $window.URL || $window.webkitURL;
            var fileURL = url.createObjectURL(file);
            var a = document.createElement("a");
            a.href = fileURL;
            a.download = "nameOfFile";
            a.target = "_self";
            a.click();
            url.revokeObjectURL(fileURL);

        }).error(function (data) {
            console.error(data);
        })
    };

更新:

这仅适用于Chrome.其他浏览器有不同的下载blob的方法.所以我有用户FileSaver.js来完成这项任务.即便如此,我在iOS上打开它时遇到了问题.如果在用户事件的一侧触发,则阻止文件保存.这是我的解决方法.

var file = new Blob([data], { type: "application/pdf" });
var isIos = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);
if(isIos){
  var element = document.getElementById("downloadButton");
  element.onclick - function(){
    saveAs(file, "name.pdf");
  }
  element.onclick();
} else {
  saveAs(file, "name.pdf");
}

希望这会为某人节省时间.