解决微软Edge浏览器和IE浏览器下载无反应的问题

话不多说,先上代码!

var blob = new Blob([result], {type: "application/vnd.ms-excel"});//result为从后台返回的数据
var objectUrl = window.URL.createObjectURL(blob);
var aForExcel = $(")
                .attr("href",objectUrl)
                .attr("download","下载的文件");
$("body").append(aForExcel);
$(".forExcel").click();
URL.revokeObjectURL(objectUrl);
aForExcel.remove();

这段代码表示将从后台获取到的数据以表格形式(.xls)下载下来,经测试,在 Chrome、Firefox、Safari、360浏览器中,均可以成功下载文件,但是在Edge和IE中,什么反应都没有。
在查了很多资料之后,终于找到了原因:
IE / Edge 和高大上的 Chrome /Firefox 对于window.URL.createObjectURL 创建Blob链接最直观的区别在于得到的blob链接形式不一样,Chrome 和 Firefox 会生成的带有当前域名的标准blob链接形式(例如https : //www.wuxiancheng.cn/86e01467-6654-4b74-98b3-ca25f396bc2f),而 IE 和 Edge 会生成的不带域名的blob链接(例如242CACD6-06D5-4145-A6DA-55DBE47409DB),所以如果用上面代码的方式,是下载不了文件的,并且浏览器也不会报错。

解决办法来啦:
使用 window.navigator.msSaveOrOpenBlob(blob, filename),代替 window.URL.createObjectURL。
window.navigator.msSaveOrOpenBlob(blob, filename),第一个参数blob就是Blob对象,第二个参数filename是希望将Blob URL保存的文件名(加上后缀,例如 下载的文件.xls),具体代码如下:

var blob = new Blob([result], {type: "application/vnd.ms-excel"});//result为从后台返回的数据
if('msSaveOrOpenBlob' in navigator){
    window.navigator.msSaveOrOpenBlob(blob, "下载的文件.xls");
}else{
    var objectUrl = window.URL.createObjectURL(blob);
    var aForExcel = $(")
                    .attr("href",objectUrl)
                    .attr("download","下载的文件");
    $("body").append(aForExcel);
    $(".forExcel").click();
    URL.revokeObjectURL(objectUrl);
    aForExcel.remove();
}

这样就解决啦!



参考文章:
https://www.51-n.com/t-4535-1-1.html

你可能感兴趣的:(JS)