web-dev-qa-db-fra.com

Le téléchargement de blob ne fonctionne pas dans IE

J'ai dans mon contrôleur Angular.js qui télécharge un fichier CSV:

 var blob = new Blob([csvContent.join('')], { type: 'text/csv;charset=utf-8'});
 var link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
 link.href = URL.createObjectURL(blob);
 link.download = 'teams.csv';
 link.click();

Cela fonctionne parfaitement dans Chrome mais pas dans IE. Un journal de la console du navigateur indique:

HTML7007: Une ou plusieurs URL de blob ont été révoquées en fermant le blob pour qu'ils ont été créés. Ces URL ne seront plus résolues en tant que données sauvegarder l'URL a été libéré.

Qu'est-ce que cela signifie et comment puis-je résoudre ce problème? 

javascriptinternet-explorerangularjsblobcompatibility
36
raberana

Essayez ceci en utilisant this ou useragent

if (navigator.appVersion.toString().indexOf('.NET') > 0)
        window.navigator.msSaveBlob(blob, filename);
else
{
 var blob = new Blob(['stringhere'], { type: 'text/csv;charset=utf-8' });
 var link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
 link.href = URL.createObjectURL(blob);
 link.download = 'teams.csv';
 link.click();
}
64
Naim Sulejmani

IE ne vous permettra pas d'ouvrir des blobs directement. Vous devez utiliser msSaveOrOpenBlob. Il y a aussi msSaveBlob

if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
    var objectUrl = URL.createObjectURL(blob);
    window.open(objectUrl);
}
24
Vinícius Todesco

Je devais utiliser un blob pour télécharger une image PNG base64 convertie. J'ai réussi à télécharger le blob sur IE11 avec window.navigator.msSaveBlob

Voir le lien msdn suivant: http://msdn.Microsoft.com/en-us/library/hh779016(v=vs.85).aspx

Plus précisément, vous devriez appeler:

window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt');

où blobObject est un blob créé de la manière habituelle. 

15
alex

Quelle est la version de votre navigateur IE? Vous avez besoin d’un navigateur moderne ou de IE10 + http://caniuse.com/bloburls

1
user1322092

Peut-être avez-vous besoin d'un peu de retard. Qu'en est-il avec:

link.click();
setTimeout(function(){
    document.body.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    URL.revokeObjectURL(link.href);  
}, 100);
1
pmirnd

J'avais besoin que la fonctionnalité de téléchargement fonctionne dans Chrome et IE11. J'ai eu un bon succès avec ce code.

HTML

<div ng-repeat="attachment in attachments">
  <a ng-click="openAttachment(attachment)" ng-href="{{attachment.fileRef}}">{{attachment.filename}}</a>
</div>

JS

$scope.openAttachment = function (attachment) {
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(
      b64toBlob(attachment.attachment, attachment.mimeType),
      attachment.filename
    );
  }
};
1
Json

Fait de cette façon, fonctionne bien pour moi.

downloadFile(data) {
    if (navigator.msSaveBlob) {
      let blob = new Blob([data], {
        "type": "text/csv;charset=utf8;"
      });
      navigator.msSaveBlob(blob, this.fileName);
    }
    else {
      let blob = new Blob(['\ufeff' + data], { type: 'text/csv;charset=utf-8;' });
      let $link = document.createElement("a");
      let url = URL.createObjectURL(blob);
      $link.setAttribute("target", "_blank");
      $link.setAttribute("href", url);
      $link.setAttribute("download", this.fileName);
      $link.style.visibility = "hidden";
      document.body.appendChild($link);
      $link.click();
      document.body.removeChild($link);
    }
  }
0
Dharam Mali

Essayez plutôt d’utiliser ceci: Var blob = file.slice (0, file.size);

0
user1942990