文件下载的ie11兼容性优化-阿里云开发者社区

文件下载的ie11兼容性优化

2018-03-01 1368

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

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

　　发现在微软在ie10 和ie11中有两个特有的方法：window.navigator.msSaveBlob和window.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    }

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

文件下载的ie11兼容性优化

热门文章

最新文章

相关课程

相关电子书