Blob 下载在 IE 中不起作用

IT技术 javascript internet-explorer angularjs blob compatibility
2021-03-18 01:20:24

我的 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:通过关闭创建它们的 blob 来撤销一个或多个 blob URL。这些 URL 将不再解析,因为支持 URL 的数据已被释放。

这是什么意思,我该如何解决?

6个回答

试试这个使用,thisuseragent

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();
}
@PierreHenry 或者您使链接不可见 link.setAttribute('style','display:none');
2021-04-17 01:20:24
+1。但要使其在 Firefox 中工作,我必须添加:document.body.appendChild(link);click()- 然后再次删除链接!
2021-04-26 01:20:24
不建议依赖 navigator.appVersion (@see developer.mozilla.org/en-US/docs/Web/API/NavigatorID/appVersion ) 我建议将 if 语句修改为: if (typeof(window.navigator.msSaveBlob) == 'function'){....
2021-05-02 01:20:24

IE 不允许您直接打开 blob。你必须使用msSaveOrOpenBlob. 还有msSaveBlob

if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
    var objectUrl = URL.createObjectURL(blob);
    window.open(objectUrl);
}
完美的 !!为我工作。
2021-04-29 01:20:24
完美,这对我有用。我现在可以在 Chrome 和 IE 中下载 PDF。++1
2021-05-08 01:20:24

我需要使用 Blob 来下载转换后的 base64 PNG 图像。我能够在 IE11 上成功下载 blobwindow.navigator.msSaveBlob

请参阅以下 msdn 链接:http : //msdn.microsoft.com/en-us/library/hh779016( v=vs.85) .aspx

具体来说,您应该致电:

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

blobObject以通常方式创建的 Blob 在哪里

或者然后在 IE 11 或 Egde 中保存或打开文件: window.navigator.msSaveOrOpenBlob(blob, 'filename.pdf');
2021-05-13 01:20:24

适用于 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();
    }
};
这对我的 IE、chrome、firefox 和 edge 非常有用,谢谢
2021-05-11 01:20:24

你的IE浏览器版本是多少?您需要现代浏览器或 IE10+ http://caniuse.com/bloburls