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

Question

我的应用程序中有一个带有链接到文件下载（PDF）API的标签。问题在于它不是100％稳定的，当服务不可用或文件不存在时，我必须处理服务器响应的错误。

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

顺便说一下，我在这个应用程序中使用AngularJS。如果有任何使用它的解决方案，那将会非常有帮助。

- Ricardas

Answer 1

如果有其他人遇到相似的问题，这里是我在进行一些研究后实施的解决方案。

从<a>标签中移除链接并添加点击事件：

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

现在您需要下载Blob（在这里，您可以控制是否能够访问它的文件），并让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");
}

希望这能为某些人节省时间。

- Ricardas

---

您用blob替换了标准浏览器下载，比如下载进度等。这种方法对文件大小有很大限制，而且不像普通下载那样显示。这种方式只适用于非常小的文件。 - undefined

Answer 2

在链接后使用扩展名，例如link/to/api.pdf和download="filename.pdf"。 此外，请尝试target="_self"

- Reptar

---

链接无法更改以与扩展名一起使用，因为它使用GET参数来识别要下载的文件。 文件名如何影响此过程？我可以使用type="application/pdf"代替。 这如何帮助处理异常情况？ - Ricardas