兼容性要求不高的情况下可以用a标签的download属性，HTML5新增的
export function open (url, name) {
let a = document.createElement('a')
a.target = '_blank'
a.setAttribute('href', url)
if (name) {
a.setAttribute('download', name)
}
a.style.display = 'none'
document.body.appendChild(a)
let e = document.createEvent('MouseEvents')
e.initEvent('click', true, true)
a.dispatchEvent(e)
setTimeout(() => {
document.body.removeChild(a)
}, 1000)
}
以下情况可以支持
download属性支持情况
可以看到，万恶的IE不支持，所以下载下来就是后端指定的名称或者默认名称
前端重命名文件名还有另一种方法：Blob
async download (url, name) {
if (window.navigator.msSaveBlob) { // msSaveBlob仅支持IE10+
const res = await api().get(url) // 获取到文件的二进制流
const blob = new Blob([res], { type: 'application/json;charset=utf-8' }) // application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
const href = window.URL.createObjectURL(blob) // 创建下载的链接
try {
window.navigator.msSaveBlob(blob, name)
} catch (e) {
console.log(e)
}
window.URL.revokeObjectURL(href)
} else {
open(url, name) // 上面那个open函数
}
}
但是这种方法有一些弊端：
- 消耗内存，下载大文件可能会崩
- 点击下载之后，IE浏览器会先把文件下载到电脑（此时浏览器看起来没有任何反应），等下载完成再提示：是否保存文件；所以需要你手动在点击下载的时候加个toast提示之类的
所以我觉得最好的办法就是在后端返回文件名，既保证兼容性，又不占内存
