admin管理员组文章数量:1568307
项目内有很多导出文件，下载文件功能，前端采用的是文件流下载方式，请求后端接口，返回文件流。
最开始不清楚普通的动态创建a标签方法并不兼容IE，后来在IE上面测试出现了bug “Unhandled promise rejection Error: 拒绝访问。”，看到这个问题直接复制百度了，然后结果都是promise方法可能不对，改了所有的promise方法还是报错，后来想到是不是创建a标签的方式不兼容IE，又百度了文件流下载兼容IE的方法，果然有收获，于是有了下面的解决方法，记录一下。
看了这位作者的文章借鉴链接
IE浏览器有微软自带的msSaveBlob 方法，a标签的download并不兼容IE。
//由于页面中有多处用到该方法，故封装为组件
//别忘了设置请求头的responseType='blob',react项目已经封装在了请求里
export const exportSaveData = (data, filename) => {
let blob = new Blob([data], { type: 'application/x-www-form-urlencoded' });
let blobUrl = window.URL.createObjectURL(blob);
if (window.navigator.msSaveBlob) { //判断了有该方法即为IE浏览器
try {
window.navigator.msSaveBlob(blob, filename)
} catch (e) {
console.log(e);
}
} else {
// 谷歌浏览器 创建a标签 添加download属性下载
const aElement = document.createElement('a'); //动态创建a标签
document.body.appendChild(aElement); //将创建的a标签追加到body内
aElement.style.display = 'none'; //可以设置a标签并不可见
aElement.href = blobUrl; a标签的href为处理过的blob
aElement.download = filename;
aElement.click();
document.body.removeChild(aElement);
window.URL.revokeObjectURL(blobUrl); //释放掉blob对象
}
}
完美解决IE不能导出的问题
版权声明：本文标题：IE浏览器报错Unhandled promise rejection Error: 拒绝访问。文件流下载 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1726425229a1070299.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论