目录
1.首先请求封装axios的请求方式
2.根据接口文档查看文件流的请求类型
3.请求Methods
4.以上写完以后，好消息是文件可以成功下载
4.1坏消息是文件竟然是个损坏文件打不开，修复了也是乱码
5.解决问题
5.1 前端做文件下载有很多方式，前端返回文件流需要我们在axios请求封装新增一个文件下载请求，专门处理Blob文件流的请求，其中 responseType:"blob" 类型必须写
1.首先请求封装axios的请求方式
const service = axios.create({
baseURL:"" ,
timeout: 5000
})
export const http ={
get<T>(url: string, params: any):Promise<T> {
return request({
url,
method: 'get',
params
})
},
postJson<T>(url: string, data: any):Promise<T> {
return request({
url,
method: 'post',
headers: { 'Content-Type': 'application/json' },
data
})
}
}2.根据接口文档查看文件流的请求类型
这边两种请求方式都有，以下按照post为例子
![new blob([responsedata]);文件打不开,前端开发常见bug,前端,vue.js,ajax,excel](https://imgs.yssmx.com/Uploads/2024/04/857355-1.png)
请求api模块 "@/api/download"
![new blob([responsedata]);文件打不开,前端开发常见bug,前端,vue.js,ajax,excel](https://imgs.yssmx.com/Uploads/2024/04/857355-2.png)
3.请求Methods
import { postDownload } from "@/api/download"
// 导出事件
const ExportMethods = () => {
// 1.ts类型规范返回的结果为Blob类型
const res: Blob = await postDownload()
// 2.文件流存在,创建下载路径触发下载
if (res) {
const blob = new Blob([res], { type: 'application/vnd.ms-excel; charset=utf-8' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download ='Excel.xlsx'
link.click()
// 3.一定要释放URL对象
URL.revokeObjectURL(link.href)
}
})
}4.以上写完以后，好消息是文件可以成功下载
![new blob([responsedata]);文件打不开,前端开发常见bug,前端,vue.js,ajax,excel](https://imgs.yssmx.com/Uploads/2024/04/857355-3.png)
4.1坏消息是文件竟然是个损坏文件打不开，修复了也是乱码
![new blob([responsedata]);文件打不开,前端开发常见bug,前端,vue.js,ajax,excel](https://imgs.yssmx.com/Uploads/2024/04/857355-4.png)
5.解决问题
5.1 前端做文件下载有很多方式，前端返回文件流需要我们在axios请求封装新增一个文件下载请求，专门处理Blob文件流的请求，其中 responseType:"blob" 类型必须写
const http ={
// 导出blob文件流
downloadBlobFile<T>(url: string, data: any):Promise<T> {
return request({
url,
method: 'post',
data,
responseType: 'blob' // 此类型必须标注，否则下载的文件就是损坏的
})
}
}修改api的请求函数
![new blob([responsedata]);文件打不开,前端开发常见bug,前端,vue.js,ajax,excel](https://imgs.yssmx.com/Uploads/2024/04/857355-5.png)
组件中使用方法不变，再次导出发现解决问题
![new blob([responsedata]);文件打不开,前端开发常见bug,前端,vue.js,ajax,excel](https://imgs.yssmx.com/Uploads/2024/04/857355-6.png)
![new blob([responsedata]);文件打不开,前端开发常见bug,前端,vue.js,ajax,excel](https://imgs.yssmx.com/Uploads/2024/04/857355-7.png)
文章来源：https://www.toymoban.com/news/detail-857355.html
对你有帮助的话，点个赞呗文章来源地址https://www.toymoban.com/news/detail-857355.html
到了这里，关于解决axios请求文件流前端通过new Blob完成文件流下载文件打不开的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
