2017-08-02 3 views
2

Javascript Blob() ne crée pas le fichier en premier clic

<a href="" 
 
    ng-click="$ctrl.downLoadFile(file)" 
 
    ng-attr-id="{{file.id}}">{{file.filename}}</a>

Un clic sur l'étiquette ci-dessus <a> obtient un file.csv du serveur. À l'intérieur de la méthode success, je crée le fichier. Mais le problème est qu'il ne le télécharge pas avec le premier clic. Dans la première fois, je dois cliquer deux fois pour télécharger le fichier. Après le deuxième clic, cela fonctionne comme prévu.

Comment résoudre ce problème? Je veux que cela fonctionne aussi avec le premier clic.

Voici le code.

downloadService.getFile(file).then(
 
     function success(response) { 
 
      var data = response.data, 
 
      filename = file.filename.split("/"), 
 
      name = (filename[filename.length - 1]), 
 
      blob = new Blob([data], {type: 'application/octet-strea'}), 
 
      url = $window.URL || $window.webkitURL, 
 
      fileUrl = url.createObjectURL(blob); 
 
      var anchor = angular.element(document.getElementById(
 
         file.id.toString())); 
 
      anchor.attr({ 
 
       href: fileUrl, 
 
       target: '_blank', 
 
       download: name 
 
      }) 
 
      } 
 
     );

Cette balise <a> que j'accéder à Appréciez toutes sortes de solutions et conseils. Merci d'avance!

Répondre

0

Résolu ce problème avec la création d'une nouvelle balise <a>.

function success(response) { 
 
      var data = response.data, 
 
      blob = new Blob([data], {type: 'application/octet-stream; charset=UTF-8'}), 
 
      url = $window.URL || $window.webkitURL, 
 
      fileUrl = url.createObjectURL(blob); 
 

 
      var anchor = document.createElement('a'); 
 

 
      anchor.href = fileUrl; 
 
      anchor.target = '_blank'; 
 
      anchor.download = name; 
 
      anchor.style = "display: none"; 
 

 
      document.body.appendChild(anchor); 
 
      anchor.click(); 
 

 
      setTimeout(function() { 
 
      document.body.removeChild(anchor); 
 
      $window.URL.revokeObjectURL(fileUrl); 
 
      }, 100); 
 
     }