目錄
1.首先請求封裝axios的請求方式
2.根據(jù)接口文檔查看文件流的請求類型
3.請求Methods
4.以上寫完以后，好消息是文件可以成功下載
4.1壞消息是文件竟然是個(gè)損壞文件打不開，修復(fù)了也是亂碼
5.解決問題
5.1 前端做文件下載有很多方式，前端返回文件流需要我們在axios請求封裝新增一個(gè)文件下載請求，專門處理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.根據(jù)接口文檔查看文件流的請求類型
這邊兩種請求方式都有，以下按照post為例子
![new blob([responsedata]);文件打不開,前端開發(fā)常見bug,前端,vue.js,ajax,excel](https://imgs.yssmx.com/Uploads/2024/04/857355-1.png)
請求api模塊??"@/api/download"
![new blob([responsedata]);文件打不開,前端開發(fā)常見bug,前端,vue.js,ajax,excel](https://imgs.yssmx.com/Uploads/2024/04/857355-2.png)
3.請求Methods
import { postDownload } from "@/api/download"
// 導(dǎo)出事件
const ExportMethods = () => {
// 1.ts類型規(guī)范返回的結(jié)果為Blob類型
const res: Blob = await postDownload()
// 2.文件流存在,創(chuàng)建下載路徑觸發(fā)下載
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]);文件打不開,前端開發(fā)常見bug,前端,vue.js,ajax,excel](https://imgs.yssmx.com/Uploads/2024/04/857355-3.png)
4.1壞消息是文件竟然是個(gè)損壞文件打不開，修復(fù)了也是亂碼
![new blob([responsedata]);文件打不開,前端開發(fā)常見bug,前端,vue.js,ajax,excel](https://imgs.yssmx.com/Uploads/2024/04/857355-4.png)
5.解決問題
5.1 前端做文件下載有很多方式，前端返回文件流需要我們在axios請求封裝新增一個(gè)文件下載請求，專門處理Blob文件流的請求，其中?responseType:"blob" 類型必須寫
const http ={
// 導(dǎo)出blob文件流
downloadBlobFile<T>(url: string, data: any):Promise<T> {
return request({
url,
method: 'post',
data,
responseType: 'blob' // 此類型必須標(biāo)注，否則下載的文件就是損壞的
})
}
}修改api的請求函數(shù)
![new blob([responsedata]);文件打不開,前端開發(fā)常見bug,前端,vue.js,ajax,excel](https://imgs.yssmx.com/Uploads/2024/04/857355-5.png)
組件中使用方法不變，再次導(dǎo)出發(fā)現(xiàn)解決問題
![new blob([responsedata]);文件打不開,前端開發(fā)常見bug,前端,vue.js,ajax,excel](https://imgs.yssmx.com/Uploads/2024/04/857355-6.png)
![new blob([responsedata]);文件打不開,前端開發(fā)常見bug,前端,vue.js,ajax,excel](https://imgs.yssmx.com/Uploads/2024/04/857355-7.png)
文章來源：http://www.zghlxwxcb.cn/news/detail-857355.html
對你有幫助的話，點(diǎn)個(gè)贊唄文章來源地址http://www.zghlxwxcb.cn/news/detail-857355.html
到了這里，關(guān)于解決axios請求文件流前端通過new Blob完成文件流下載文件打不開的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
