本文主要來源于知乎一個回答，這里紅色部分做了自己的處理，雖然自己的少，可是很有用的幾句代碼哦
只好回答一下axios如何攔截get請求并下載文件的了。
Ajax無法下載文件的原因
瀏覽器的GET(frame、a)和POST(form)請求具有如下特點(diǎn)：
response會交由瀏覽器處理
response內(nèi)容可以為二進(jìn)制文件、字符串等
Ajax請求具有如下特點(diǎn)：
response會交由Javascript處理
response內(nèi)容僅可以為字符串
因此，Ajax本身無法觸發(fā)瀏覽器的下載功能。
Axios攔截請求并實(shí)現(xiàn)下載
為了下載文件，我們通常會采用以下步驟：
發(fā)送請求
獲得response
通過response判斷返回是否為文件
如果是文件則在頁面中插入frame
利用frame實(shí)現(xiàn)瀏覽器的get下載
我們可以為axios添加一個攔截器：
import axios from 'axios'// download urlconst 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 interceptoraxios.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之后我們就可以通過axios中的get請求下載文件了。
以上這篇vue.js 使用axios實(shí)現(xiàn)下載功能的示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
