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)
        }
    }
}