文件下载的ie11兼容性优化

简介:   在 http://www.cnblogs.com/sunshine6/p/8296945.html 中有说关于前后端分离时如何实现文件下载的功能,但是过完年回来,同事告诉我这个方式在ie11上存在不兼容的问题,报如下错:  浏览器兼容问题是很头疼的问题,因为之前也没遇到过这样的问题,所以经过两三个小时才解决。

  在 http://www.cnblogs.com/sunshine6/p/8296945.html 中有说关于前后端分离时如何实现文件下载的功能,但是过完年回来,同事告诉我这个方式在ie11上存在不兼容的问题,报如下错:

  浏览器兼容问题是很头疼的问题,因为之前也没遇到过这样的问题,所以经过两三个小时才解决。

  发现在微软在ie10 和ie11中有两个特有的方法:window.navigator.msSaveBlobwindow.navigator.msSaveOrOpenBlob 方法,这两个方法的区别在于,前者只有保存,后者有保存和打开两个选项,按个人喜好使用就行。

  优化之后的代码如下:

 1  /**
 2      * 导出用户列表
 3      */
 4     private exportUsers(){
 5         this.http.doPost({
 6             url: 'system/sysmanager/user/exportUsers',
 7             responseType:ResponseContentType.Blob,
 8             body:this.form,
 9             success: (req, res) => {
10                 if(window.navigator.msSaveOrOpenBlob){
11                     // 兼容ie11
12                     try{
13                         var blobObject = new Blob([res.json()]); 
14                         window.navigator.msSaveOrOpenBlob(blobObject, "用户列表.xlsx"); 
15                     }
16                     catch(e){
17                         console.log(e);
18                     }
19                 }
20                 else{
21                     var blob = new Blob([res.json()]); 
22                     var a = document.createElement('a');
23                     a.href = URL.createObjectURL(blob); // xhr.response is a blob
24                     a.download = "用户列表.xlsx";
25                     a.style.display = 'none';
26                     document.body.appendChild(a);
27                     a.click();
28                     a.remove();
29                 }
30             }
31         });
32    }

 

  如果有什么不当之处,请大家多多指出。

 

目录
相关文章
找回 文件下载 ie 窗口
引用:http://tech.sina.com.cn/c/2004-06-23/1405379225.shtml 笔者是一个网虫,常常在网上挂着,总喜欢下载、试用一些最新推出的软件,IE的下载功能也一直能正常使用。
777 0
|
Web App开发 前端开发 JavaScript
|
2月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
1月前
|
JavaScript 前端开发
|
5月前
|
Web App开发 XML 开发框架
技术心得记录:在IE浏览器中的奇怪页面表现
技术心得记录:在IE浏览器中的奇怪页面表现
56 0
|
3月前
|
JavaScript
VUE——如何兼容IE9|IE10|IE11浏览器
VUE——如何兼容IE9|IE10|IE11浏览器
143 0
VUE——如何兼容IE9|IE10|IE11浏览器
|
4月前
|
安全 网络安全
用IE浏览器访问网站提示证书错误
当你在Internet Explorer中遇到证书错误提示,通常是因网站SSL/TLS证书问题或浏览器安全设置需调整。解决方法包括: 检查时间设置 调整IE设置 安装证书 调整计算机时间
113 3
|
5月前
win10取消ie浏览器自动跳转edge浏览器
win10取消ie浏览器自动跳转edge浏览器
183 4
|
Web App开发 XML 编解码
IE浏览器下载文件中文文件名乱码问题解决
IE浏览器下载文件中文文件名乱码问题解决
138 0
|
6月前
|
存储 机器人
在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
【2月更文挑战第28天】在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
135 1
下一篇
无影云桌面