HTML <a> tag download file error handling

Question

Nella mia app ho un tag con collegamento ad api per il download di file (pdf). Il problema è che non è stabile al 100% e che devo gestire, quindi il servizio non è disponibile o il file non è disponibile e il server risponde con errore.

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

A proposito, sto utilizzando AngularJS in questa app. Se non v'è alcuna soluzione di utilizzarlo sarebbe aiutare un sacco

Answer 1

Nel caso in cui qualcun altro si troveranno ad affrontare problemi simili. Ecco la soluzione che ho hanno messo in atto dopo alcune ricerche

rimuovere il collegamento da un tag <a> e aggiungere un evento click:.

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

ora yo È necessario scaricare blob (qui puoi controllare se puoi accedere al file) e lasciare che l'oggetto DOM aggiunga tutti gli attributi necessari per attivarlo.

$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:

Questo stava lavorando solo per Chrome. Altri browser avevano un approccio diverso per il download di BLOB. Quindi ho utenti FileSaver.js per questa attività. Anche allora ho avuto problemi ad aprirlo su iOS. Sta bloccando il salvataggio dei file se è stato attivato dal lato dell'evento utente. Ecco la mia soluzione per questo.

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

Spero che questo risparmi tempo per qualcuno.

Answer 2

Utilizzare extensionnames dopo il link come link/to/api.pdf e download="filename.pdf". Inoltre, prova target="_self"