a标签下载在IE浏览器不兼容问题

今天碰到用户使用后台点击下载无效问题，通过其他浏览器测试其实是没问题的，但是根据用户反馈他使用的是IE浏览器，所以本人测试了使用<a>标签在IE下触发下载可能保存时会直接将文件命名成download，并且还没有文件后缀，所以用户可能会不知道你下载的是什么。

其实写过好几个后台的下载都是要么使用 <a> download 属性或window.open实现下载效果，使用这两个方法除IE浏览器外，应该大部分浏览器都可以实现下载效果的。

例如：

//下载
function downloadFile(row){var link = document.createElement('a');link.setAttribute("download", row.fileName);link.href = '/download?id=' + row.id;link.click();
}

//下载
function downloadFile(row){window.open('/download?id=' + row.id);
}

最后还是要根据用户反馈来进行修改下载功能，在网上百度了下大佬的解决方案，改成这种写法就能在IE下实现下载并可以把文件生成对应名称和后缀。

//下载
function downloadFile(row){var url = prefix + '/download?id=' + row.id;var xhr = new XMLHttpRequest();xhr.open('get', url, true);xhr.responseType = "blob"; // 返回类型blob// 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑xhr.onload = function() {// 请求完成,返回200if(this.status === 200) {var blob = this.response;var href = window.URL.createObjectURL(blob); //创建下载的链接//判断是否是IE浏览器，是的话返回trueif (window.navigator.msSaveBlob) {try {window.navigator.msSaveBlob(blob, row.fileName)} catch (e) {console.log(e);}} else {// 谷歌浏览器 创建a标签 添加download属性下载var downloadElement = document.createElement('a');downloadElement.href = href;downloadElement.target = '_blank';downloadElement.download = row.fileName; //下载后文件名document.body.appendChild(downloadElement);downloadElement.click(); //点击下载document.body.removeChild(downloadElement); //下载完成移除元素window.URL.revokeObjectURL(href); //释放掉blob对象}}}// 发送ajax请求xhr.send()$.table.refresh();
}

注：下载请求的链接是后台将文件已流的格式返回给前端

a标签下载在IE浏览器不兼容问题相关推荐

使用a标签下载文件，浏览器会直接打开解决方案
使用a标签下载文件,浏览器会直接打开解决方案背景一.HTML中的a标签实现点击下载二.即使使用a标签的download属性,chrome浏览器还是会打开三.解决方案解决方案一:使用ajax请 ...
a标签下载文件，浏览器变打开预览的解决方案
前景: 处理接口返回的文件链接需要下载,例如http://xxxxx/xxx.jpeg,使用a标签进行下载时(加了download),浏览器对这些类型的文件可以解析,还会打开这个文件在浏览器上进行预览 ...
A标签下载文件 IE浏览器
<a href="XXX.zip" target="_blank" >下载导入程序</a> 在IE有用,加上一个Target的属性,会弹 ...
js下载文件及命名（兼容多浏览器）
js文件下载 ; 文件下载方法 ; IE中文件下载的方法 ; 使用IE下载 ; 文件下载兼容性 ; a标签下载 ; 浏览器下载函数功能:实现主流浏览器的文件下载功能: 兼容性: >=IE10, ...
解决a标签下载网络图片直接打开的问题，通过浏览器下载网络文件
因为公司用的分布式文件系统上传文件后返回的是 http文件路径,当文件是图片是,用a标签下载会直接打开而不是下载,所以找了下怎么通过浏览器下载远程服务器上的图片.网上大部分都是后台代码,现在把前端后台 ...
oracle火狐,火狐浏览器下载 Mozilla 火狐浏览器 Firefox v87.0 免费官方正式安装版下载-脚本之家...
火狐浏览器Mozilla Firefox是一个自由的,开放源码的浏览器,适用于 Windows, Linux 和 MacOS X平台,它体积小速度快,还有其它一些高级特征,主要特性有:标签式浏览,使上 ...
IE6,IE7,FF等浏览器不兼容原因及解决办法(转)
IE6,IE7,FF等浏览器不兼容原因及解决办法 2008-07-15 11:26 本文转载,作者:阿里巴巴前端开发,发到这里只是方便以后查看,也给各位需要的朋友. 浏览器的不兼容,大家肯定都是深恶痛 ...
解决pc端浏览器不兼容的问题
1.对于浏览器之间存在的默认样式差距 <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css&quo ...
Blazor 中如何下载文件到浏览器
Blazor 中如何下载文件到浏览器目录一.前言二.方法一(导航跳转) 三.方法二(下载后传出) (一) 使用 RestSharp 下载 (二) 使用 BlazorDownloadFile 传出 ...

a标签下载在IE浏览器不兼容问题

a标签下载在IE浏览器不兼容问题相关推荐

最新文章

热门文章