下面我就為大家分享一篇vue.js 使用axios實現下載功能的範例，具有很好的參考價值，希望對大家有幫助。
本文主要來自於知乎一個回答，這裡紅色部分做了自己的處理，雖然自己的少，可是很有用的幾句程式碼哦
只好回答一下axios如何攔截get請求並下載檔案的了。
Ajax無法下載檔案的原因
#瀏覽器的GET(frame、a)和POST(form)請求具有以下特點：
response會交由瀏覽器處理
response內容可以為二進位檔案、字串等
Ajax請求具有以下特點：
response會交由Javascript處理
response內容僅可以為字串
因此，Ajax本身無法觸發瀏覽器的下載功能。
Axios攔截請求並實現下載
#為了下載文件，我們通常會採用以下步驟：
發送請求
獲得response
透過response判斷回傳是否為檔案
如果是檔案則在頁面中插入frame
利用frame實現瀏覽器的get下載
我們可以為axios新增一個攔截器：
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之後我們就可以透過axios中的get請求下載檔案了。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
nodejs mongodb aggregate級聯查詢操作範例
以上是透過vue.js使用axios實現下載功能（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
