IE下载文件前端重命名

兼容性要求不高的情况下可以用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提示之类的

所以我觉得最好的办法就是在后端返回文件名，既保证兼容性，又不占内存

IE下载文件前端重命名

推荐阅读更多精彩内容