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");
}

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

Answer 2

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

HTML <a> tag download file error handling</a>

2 个答案: