web-dev-qa-db-ja.com

BlobのダウンロードがIE

CSVファイルをダウンロードする私のAngular.jsコントローラーにこれがあります：

 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：1つ以上のblob URLは、作成されたblobを閉じることにより取り消されました。これらのURLは、URLに対応するデータが解放されたため、解決されなくなります。

それはどういう意味ですか、どうすれば修正できますか？

javascriptinternet-explorerangularjsblobcompatibility
42
raberana

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();
}
72
Naim Sulejmani

IEでは、ブロブを直接開くことはできません。 msSaveOrOpenBlobを使用する必要があります。 msSaveBlobもあります

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

Blobを使用して、変換されたbase64 PNGイメージをダウンロードする必要がありました。 IE11でwindow.navigator.msSaveBlobを使用してblobを正常にダウンロードできました

次のmsdnリンクを参照してください： http://msdn.Microsoft.com/en-us/library/hh779016（v = vs.85）.aspx

具体的には、以下を呼び出す必要があります。

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

ここで、blobObjectは通常の方法で作成されたBlobです。

18
alex

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();
    }
};
8
slugmandrew

このようにして、私のためにうまく機能します。

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);
    }
  }
1
Dharam Mali

あなたのIEブラウザのバージョンは？最新のブラウザまたはIE10 +が必要です http://caniuse.com/bloburls

1
user1322092

たぶん、いくらかの遅延が必要です。どうですか：

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

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

代わりにこれを使用してみてください：var blob = file.slice（0、file.size）;

0
user1942990