IE浏览器文件下载的兼容问题
文件下载是前端开发中常见的一个业务场景，由于浏览器的不同，尤其是各个现代浏览器与IE浏览器之间的差异性，很多时候都需要对文件下载功能进行兼容性处理。
比较常用的一种方法
利用a标签的download属性
直接使用a标签
<a href="text.txt" download>文件下载</a> 复制代码
使用js构建一个a标签
function downloadFile(url, name) { const html = document.createElement('a') html.download = name html.href = url document.body.appendChild(html) html.click() document.body.removeChild(html) } 复制代码但是，a标签的download存在兼容性问题。 通过 Can I Use查询可知a标签的download属性在IE浏览器上是不被支持的。
兼容的办法
思路：
发送请求获取文件的二进制数据，然后将文件的二进制数据转化为Blob对象,IE浏览器利window.navigator.msSaveOrOpenBlobAPI完成下载，其他浏览器利用URL.createObjectUrl生成url地址，赋值在a标签的href属性上，结合download属性进行下载。
要点：
请求的返回类型改为blob ->
responseType = 'blob'使用
window.navigator.msSaveOrOpenBlobAPI
function downloadFile(filename, url) { const req = new XMLHttpRequest() req.open('GET', url, true) req.responseType = 'blob' req.onload = function(e) { const blob = req.response if ('msSaveOrOpenBlob' in navigator) { // 兼容IE window.navigator.msSaveOrOpenBlob(blob, filename) } else { const a = document.createElement('a') a.download = filename a.href = URL.createObjectURL(blob) document.body.appendChild(a) a.click() document.body.removeChild(a) } } }
作者：南雁
链接：https://juejin.cn/post/7021434156508954661