vue.js 使用axios實(shí)現(xiàn)下載功能的示例
本文主要來(lái)源于知乎一個(gè)回答，這里紅色部分做了自己的處理，雖然自己的少，可是很有用的幾句代碼哦
只好回答一下axios如何攔截get請(qǐng)求并下載文件的了。
Ajax無(wú)法下載文件的原因
瀏覽器的GET(frame、a)和POST(form)請(qǐng)求具有如下特點(diǎn)：
response會(huì)交由瀏覽器處理
response內(nèi)容可以為二進(jìn)制文件、字符串等
Ajax請(qǐng)求具有如下特點(diǎn)：
response會(huì)交由Javascript處理
response內(nèi)容僅可以為字符串
因此，Ajax本身無(wú)法觸發(fā)瀏覽器的下載功能。
Axios攔截請(qǐng)求并實(shí)現(xiàn)下載
為了下載文件，我們通常會(huì)采用以下步驟：
發(fā)送請(qǐng)求
獲得response
通過(guò)response判斷返回是否為文件
如果是文件則在頁(yè)面中插入frame
利用frame實(shí)現(xiàn)瀏覽器的get下載
我們可以為axios添加一個(gè)攔截器：
import axios from 'axios'
// download url
const downloadUrl = url => {
let iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = url
iframe.onload = function () {
document.body.removeChild(iframe)
}
document.body.appendChild(iframe)
}
// Add a response interceptor
axios.interceptors.response.use(c=> {
// 處理excel文件
if (res.headers && (res.headers['content-type'] === 'application/x-msdownload' || res.headers['content-type'] === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')) {
downloadUrl(res.request.responseURL)
<span style="color:#ff0000;"> res.data='';
res.headers['content-type'] = 'text/json'
return res;</span>
}
...
return res;
}, error => {
<span style="color:#ff0000;">// Do something with response error
return Promise.reject(error.response.data || error.message)</span>
})
export default axios
之后我們就可以通過(guò)axios中的get請(qǐng)求下載文件了。
以上這篇vue.js 使用axios實(shí)現(xiàn)下載功能的示例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vuejs element table 表格添加行,修改,單獨(dú)刪除行,批量刪除行操作
這篇文章主要介紹了vuejs element table 表格添加行,修改,單獨(dú)刪除行,批量刪除行操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問(wèn)題
這篇文章主要介紹了Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-11-11
基于Vue實(shí)現(xiàn)一個(gè)"蛇形"步驟條
在現(xiàn)代Web應(yīng)用中,步驟條作為一種常見(jiàn)的UI組件,廣泛應(yīng)用于表單提交、任務(wù)進(jìn)度以及多步驟操作等場(chǎng)景,下面我們來(lái)看看如何利用Vue實(shí)現(xiàn)一個(gè)蛇形步驟條吧2024-11-11
這篇文章主要介紹了Vue獲取DOM的幾種方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue中安裝element-ui失敗問(wèn)題原因及解決
Vue中安裝element-ui失敗問(wèn)題原因及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
詳解elementui之el-image-viewer(圖片查看器)
這篇文章主要介紹了詳解elementui之el-image-viewer(圖片查看器)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了Vue的屬性、方法、生命周期的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
vue3使用pdf.js來(lái)預(yù)覽文件的操作步驟(本地文件測(cè)試)
這篇文章主要介紹了vue3使用pdf.js來(lái)預(yù)覽文件的操作步驟(本地文件測(cè)試),文中通過(guò)代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-05-05
京東 Vue3 組件庫(kù)支持小程序開(kāi)發(fā)的詳細(xì)流程
這篇文章主要介紹了京東 Vue3 組件庫(kù)支持小程序開(kāi)發(fā)的詳細(xì)流程，通過(guò)引入NutUI，即可在項(xiàng)目中使用，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-06-06
vue等框架對(duì)Tabs、Moda等設(shè)置固定高度后沒(méi)有滾動(dòng)條問(wèn)題
這篇文章主要介紹了vue等框架對(duì)Tabs、Moda等設(shè)置固定高度后沒(méi)有滾動(dòng)條問(wèn)題,解決方法很簡(jiǎn)單，只需要一行簡(jiǎn)短代碼就可以解決，下面小編給大家詳細(xì)講解，需要的朋友可以參考下2023-05-05