浏览器中文件下载

浏览器中文件下载

function downloadFileWithToken (fileUrl, fileName) {
  if (!fileName) fileName = fileUrl.replace(/.+\/([^\/]+$)/, '$1')
  return axios({
    method: 'get',
    url: fileUrl,
    headers: {
      'xxxx': localStorage.getItem('token')
    },
    responseType: 'blob' // 希望后端返回Blob类型属性
  }).then(res => {
    const blob = new Blob([res.data], {
        // 创建一个新的Blob对象来接收后端的文件,这里第一个参数必须是数组类型，否则下载必出错。
        type: 'application/octet-stream'
        // type，表明该 Blob 对象所包含数据的 MIME 类型,这需要前后端统一规划
    })
    let link = document.createElement('a')    let body = document.querySelector('body')
    link.href = window.URL.createObjectURL(blob) // 创建一个下载文件的URL，它指向blob，因为Blob对象在之前在接收后端发来的文件流信息。因为是Blob对象，所以不会跳转页面
    link.download = fileName || 'download' // 自己制定下载文件的文件名
    // 兼容火狐浏览器
    link.style.display = 'none' // 让这个a标签不可见
    body.appendChild(link)
    link.click()    // 创建了新的a标签之后模拟点击事件，开始传输文件
    body.removeChild(link)  // 下载完成之后，移除按钮，垃圾回收，减少页面内存消耗
    window.URL.revokeObjectURL(link.href) // 移除之前使用createObjectURL创建的URL，垃圾回收
  })
}

参考链接： https://blog.csdn.net/Raymend_Lee/article/details/135568073

用blob url可以自定义下载文件的文件名 由于是blob对象，所以上面的下载方法不会打开空白页进行下载，如果希望打开一个空白页，再进行下载，可以将link.target设置成_blank。这样会打开一个空白页，然后再进行下载 如果不需要自定义文件名，可以参考链接内下载的方法 比如直接将url传给window.location.href，浏览器会直接重定向到这个url的地址，进行下载 File 接口基于 Blob，继承了 blob 的功能并将其扩展以支持用户系统上的文件。