wake-up-neo.com

Blob-Download funktioniert nicht IE

Ich habe dies in meinem Angular.js-Controller, der eine CSV-Datei herunterlädt:

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

Dies funktioniert perfekt in Chrome, aber nicht in IE. Ein Browserkonsolenprotokoll sagt:

HTML7007: Eine oder mehrere Blob-URLs wurden widerrufen, indem der Blob für .__ geschlossen wurde. die sie geschaffen wurden. Diese URLs werden nicht mehr aufgelöst wie die Daten Das Sichern der URL wurde freigegeben.

Was bedeutet es und wie kann ich es beheben? 

javascriptinternet-explorerangularjsblobcompatibility
36
raberana

Versuchen Sie dies mit this oder 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 erlaubt Ihnen nicht, Blobs direkt zu öffnen. Sie müssen msSaveOrOpenBlob verwenden. Es gibt auch 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

Ich musste ein Blob verwenden, um ein konvertiertes Base64-PNG-Bild herunterzuladen. Ich konnte den Blob mit window.navigator.msSaveBlob auf IE11 herunterladen.

Siehe den folgenden Msdn-Link: http://msdn.Microsoft.com/en-us/library/hh779016(v=vs.85).aspx

Insbesondere sollten Sie anrufen:

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

dabei ist blobObject ein Blob, der wie üblich erstellt wird. 

15
alex

Komplettlösung für Chrome, Internet Explorer Firefox und Opera

Es gibt viele nette Dinge auf dieser Seite, aber ich musste eine Kombination von ein paar Dingen verwenden, um alles zum Laufen zu bringen. Hoffentlich hilft dir das.

  1. Verwenden Sie eine Schaltfläche oder einen Link, um eine Funktion namens download() auszulösen:
<button class="button-no save-btn" ng-click="download()">DOWNLOAD</button>
  1. Fügen Sie dies in Ihren Controller ein:
$scope.download = function () {

    // example shows a JSON file
    var content = JSON.stringify($scope.stuffToPutInFile, null, "  ");
    var blob = new Blob([content], {type: 'application/json;charset=utf-8'});

    if (window.navigator && window.navigator.msSaveBlob) {

        // Internet Explorer workaround
        $log.warn("Triggering download using msSaveBlob");
        window.navigator.msSaveBlob(blob, "export.json");

    } else {

        // other browsers
        $log.warn("Triggering download using webkit/
        var url = (window.URL || window.webkitURL).createObjectURL(blob);

        // create invisible element
        var downloadLink = angular.element('<a></a>');
        downloadLink.attr('href', url);
        downloadLink.attr('download', 'export.json');

        // make link invisible and add to the DOM (Firefox)
        downloadLink.attr('style','display:none');
        angular.element(document.body).append(downloadLink);

        // trigger click
        downloadLink[0].click();
    }
};
8
slugmandrew

Was ist Ihre IE Browserversion? Sie benötigen einen modernen Browser oder IE10 + http://caniuse.com/bloburls

1
user1322092

Vielleicht brauchen Sie etwas Verspätung. Was ist mit mit:

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

Ich brauchte die Download-Funktion, um in Chrome und IE11 zu funktionieren. Ich hatte guten Erfolg mit diesem 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

So geschah es für mich.

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

Versuchen Sie es stattdessen zu verwenden: Var blob = file.slice (0, file.size);

0
user1942990