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

需求:

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

分析:

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)
相关推荐
文火冰糖的硅基工坊15 分钟前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_8370885027 分钟前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring
yaoganjili36 分钟前
用 Tinymce 打造智能写作
前端
angelQ43 分钟前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
Dontla1 小时前
(临时解决)Chrome调试避免跳入第三方源码(设置Blackbox Scripts、将目录添加到忽略列表、向忽略列表添加脚本)
前端·chrome
我的div丢了肿么办1 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
云中雾丽1 小时前
React.forwardRef 实战代码示例
前端
朝歌青年说1 小时前
一个在多年的技术债项目中写出来的miniHMR热更新工具
前端
Moonbit1 小时前
倒计时 2 天|Meetup 议题已公开,Copilot 月卡等你来拿!
前端·后端
Glink1 小时前
现在开始将Github作为数据库
前端·算法·github