Загрузка блоба не работает в IE

У меня есть это в моем контроллере Angular.js, который загружает файл 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();

Это прекрасно работает в Chrome, но не в IE. Журнал консоли браузера говорит:

HTML7007: один или несколько URL-адресов больших двоичных объектов были аннулированы путем закрытия большого двоичного объекта, для которого они были созданы. Эти URL больше не будут разрешаться, поскольку данные, поддерживающие URL, были освобождены.

Что это значит и как я могу это исправить?

Ответы

Ответ 1

Попробуйте это, используя this или 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();
}

Ответ 2

IE не позволит вам напрямую открывать капли. Вы должны использовать msSaveOrOpenBlob. Там также msSaveBlob

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

Ответ 3

Мне нужно было использовать Blob для загрузки преобразованного изображения PNG base64. Я смог успешно загрузить blob на IE11 с помощью window.navigator.msSaveBlob

См. Следующую ссылку msdn: http://msdn.microsoft.com/en-us/library/hh779016(v=vs.85).aspx

В частности, вы должны позвонить:

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

где blobObject - это Blob, созданный обычным способом.

Ответ 4

Комплексное решение для Chrome, Internet Explorer Firefox и Opera

На этой странице есть много приятных моментов, но мне пришлось использовать комбинацию из нескольких вещей, чтобы все это заработало. Надеюсь, это поможет вам.

  1. Используйте кнопку или ссылку, чтобы вызвать функцию с названием download():
<button class="button-no save-btn" ng-click="download()">DOWNLOAD</button>
  1. Поместите это в свой контроллер:
$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();
    }
};

Ответ 5

Какая версия браузера IE? Вам нужен современный браузер или IE10+ http://caniuse.com/bloburls

Ответ 6

Возможно, вам нужна задержка. Как насчет:

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

Ответ 7

Мне нужно, чтобы функция загрузки работала в Chrome и IE11. У меня был хороший успех с этим кодом.

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

Ответ 8

Сделано таким образом, работает нормально для меня.

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

Ответ 9

Попробуйте использовать это вместо: var blob = file.slice(0, file.size);