Blob下载在IE中不起作用

rab*_*ana 45 javascript compatibility internet-explorer blob angularjs

我在我的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();
Run Code Online (Sandbox Code Playgroud)

这适用于Chrome,但不适用于IE.浏览器控制台日志说:

HTML7007:通过关闭为其创建的blob来撤消一个或多个blob URL.这些URL将不再解析,因为已释放支持URL的数据.

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

小智 77

尝试使用,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();
}
Run Code Online (Sandbox Code Playgroud)

  • +1.但为了使它在Firefox中工作,我必须在`click()`之前添加:`document.body.appendChild(link);`然后再次删除链接! (12认同)
  • 不建议依赖navigator.appVersion(@see https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID/appVersion)我建议将if语句修改为此:`if (typeof(window.navigator.msSaveBlob)=='function'){....` (3认同)

小智 43

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

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


小智 19

我需要使用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');
Run Code Online (Sandbox Code Playgroud)

blobObjectBlob以通常的方式创建在哪里.


slu*_*rew 10

适用于Chrome,Internet Explorer Firefox和Opera的完整解决方案

此页面上有很多不错的地方,但是我不得不结合使用一些方法来使它们全部正常工作。希望这对您有帮助。

  1. 使用按钮或链接触发称为的功能download()
<button class="button-no save-btn" ng-click="download()">DOWNLOAD</button>
Run Code Online (Sandbox Code Playgroud)
  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();
    }
};
Run Code Online (Sandbox Code Playgroud)


小智 0

尝试使用它: var blob = file.slice(0, file.size);