前端页面里面的文件下载兼容IE10+

页面上一个下载按钮，然后文件就哗哗的下载到你的本地了，这其中发生了什么？

1.首先点击按钮触发事件，调用接口去后台请求下载的文件，然后后台会以二进制流的方式把文件传到你这里，这里可能需要一点时间，你可以加个loading的动画，比如这样：

2.对于拿到的文件流，前端会将其转化为blob,并加上保存的分类：

const blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;'});

[data]就是你获取到的二进制流，后面的type就是你需要保存的文件格式，我这里需要保存的是excel的文件所以上面的类型是xlsx的格式类型；这样一个文件格式是xlsx的blob;

3.对于一些现代浏览器，我们直接可以通过window.URL.createObjectURL方法处理blob，在dom里面创建一个a标签，js模拟点击下载，最后在将创建的a标签删除，

const url = window.URL.createObjectURL(blob);
let link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('download', title);   //文件的保存名称
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

这样就完成了在现代浏览器的下载文件，但是对于一些高版本的IE(IE10以上,不包括IE10)就会出问题

比如这样的错误

我们可以通过判断IE浏览器然后以本地保存的方式；

 const ie = navigator.userAgent.match(/MSIE\s([\d.]+)/),ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/),ieEDGE = navigator.userAgent.match(/Edge/g),ieVer = (ie ? ie[1] : (ie11 ? 11 : (ieEDGE ? 12 : -1)));if (ie && ieVer < 10) {this.message.error('No blobs on IE<10');return;}if (ieVer > -1) {window.navigator.msSaveBlob(blob, title);}

完整代码

downloadFile(title, data: Response) {const blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;'});const ie = navigator.userAgent.match(/MSIE\s([\d.]+)/),ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/),ieEDGE = navigator.userAgent.match(/Edge/g),ieVer = (ie ? ie[1] : (ie11 ? 11 : (ieEDGE ? 12 : -1)));console.log('ie:' + ie);console.log('ieVer:' + ieVer);if (ie && ieVer < 10) {this.message.error('No blobs on IE<10');return;}if (ieVer > -1) {window.navigator.msSaveBlob(blob, title);} else {const url = window.URL.createObjectURL(blob);let link = document.createElement('a');link.setAttribute('href', url);link.setAttribute('download', title);document.body.appendChild(link);link.click();document.body.removeChild(link);}}

前端页面里面的文件下载兼容IE10+相关推荐

Web前端页面的浏览器兼容性测试心得（三）总结一些IE8兼容问题的解决方案
Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案参考文章: (1)Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案 (2)https://www. ...
Java文件下载，提供前端页面下载、HttpClient接口下载
学习Java的文件上传/下载需要先明白一下几点: 1.下载的资源,有两种: 1).本地文件:即项目运行时可访问的文件目录,比如,在本机Idea中运行一个 fileServer,那么 fileServe ...
vuepdf转换html,Vue网页html转换PDF（最低兼容ie10）的思路详解
Vue网页html转换PDF(最低兼容ie10)的思路详解发布时间:2020-10-16 13:05:09 来源:脚本之家阅读:95 作者:冷藏封 HTML转PDF: 1.页面底层实现--Vue: ...
前端页面添加灰色滤镜,使网页整体变灰
前端页面添加灰色滤镜,使网页整体变灰修改css样式只需要在html的样式里面加一句代码 html,body,div,img{-webkit-filter: grayscale(100%);-moz ...
关于前端页面在IE浏览器下无法显示的问题
由于框架的发展和技术的革新,很多语言必须兼容浏览器才能很好的显示出新的特性和样式,那么我们的前端页面如果在IE浏览器下无法显示时该用什么办法提示用户(提示用户升级浏览器)??? 最实用的办法就是加上判 ...
前端页面优化之完善篇
前端页面优化学习目标了解为何进行前端页面的优化了解SEO,掌握前端页面语义性的评判标准与规则从代码可读性角度进行页面优化为何进行前端优化加载速度更快 -- 速度就是王道成本耕地 -- 人 ...
微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建（1）
目录一.商城架构图前端: 二.商城管理系统前端页面 1.SPA介绍 2.webpack 四个核心概念 3.vue-cli 安装 4.项目测试三.电商项目搭建创建父模块管理创建子模板注册中心l ...
Vue的使用 -- 基于Vue搭建前端页面
Vue的使用 – 基于Vue搭建前端页面首先,用到的前端技术只有 Vue.Element-ui.axios.Echarts,至于其它的技术点,我一个后端很少接触. 其次,Echarts 我也不怎么会 ...
前端页面性能优化 - 字体加载优化
相比于英文的字库来说,中文字库的体积非常之大,小则1M,动辄几十 M 的体积非常常见.所以在前端页面性能优化中,字体加载的优化就显得尤为重要.阅读了相关的知识和文章,在研究了市面上字体加载方案之后,我 ...

前端页面里面的文件下载兼容IE10+

前端页面里面的文件下载兼容IE10+相关推荐

最新文章

热门文章

前端页面里面的文件下载 兼容IE10+

前端页面里面的文件下载 兼容IE10+相关推荐

最新文章

热门文章

前端页面里面的文件下载兼容IE10+

前端页面里面的文件下载兼容IE10+相关推荐