HTML <a>標籤下載文件錯誤處理

在我的應用程序中，我有標籤鏈接到api文件下載（pdf）。問題是它不是100％穩定，我必須處理服務不可用或文件不可用，並且服務器響應錯誤。HTML <a>標籤下載文件錯誤處理

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

順便說一下，我在這個應用程序中使用AngularJS。如果使用它的任何解決方案，將幫助很多像link/to/api.pdf和download="filename.pdf」的鏈接後

來源

2015-03-03 Ricardas

以防其他人將面臨類似的問題。下面是解我經過一番研究，已經實現

從<a>標籤刪除鏈接，並添加一個click事件：

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

UPDATE：

這只是工作的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"); 
}

希望這將節省時間的人。

來源

2015-03-03 13:28:51 Ricardas

使用extensionnames。另外，嘗試target="_self"

來源

2015-03-03 08:24:58 bbvanee

鏈接無法更改爲與擴展名一起使用，因爲它使用GET參數來標識要下載的文件。文件名稱如何影響此過程？我可以使用type =「application/pdf」。這有助於處理異常？ – Ricardas 2015-03-03 08:59:35

HTML <a>標籤下載文件錯誤處理

回答

相關問題