前端下载文件，文件打不开的问题记录

横冲直撞de2025-06-04 21:57

需求：

下载是很常见的接口，但是经常存在下载的文件异常的问题。此处记录一个常见的错误。

分析：

1、接口请求需要配置{responseType: 'blob'}，此时要求返回的格式为blob，进而进行下载。

javascript 复制代码

const res = await axios.post(apis.exportAlertInfos, params, { responseType: 'blob' })

2、若后端报错。此时后端返回的response的类型res.data.type是application/json，但是前端接收的数据res.data还是blob格式，(打开浏览器的接口控网络显示的其实是json的格式)。此时需要通过res.data?.text()对数据进行解析将blob文件流转为json格式。

javascript 复制代码

 if (res?.data?.type == 'application/json') {
     const err = await res.data?.text()
     const errObj = JSON.parse(err)
     loading.close()
     ElMessage.error(errObj?.message || '文件下载异常')
     return 
 }

3、若后端返回的文件流正常，此时需要根据response的请求头的content-type进行数据处理。

javascript 复制代码

const fileName = res.headers['content-disposition'].split('=')[1]
const blob = new Blob([res.data], {
  type: res.headers['content-type']
})
// const blob = new Blob([res.data], {
//   type: "application/msexcel;charset=utf-8"
// })
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.setAttribute('download', decodeURI(fileName))
document.body.appendChild(link)
link.click()
window.URL.revokeObjectURL(url)
document.body.removeChild(link)