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)文章
Vue.js 實(shí)現(xiàn)數(shù)據(jù)展示全部和收起功能
這篇文章主要介紹了Vue.js 實(shí)現(xiàn)數(shù)據(jù)展示全部和收起功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
vue.js實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的方法教程
這篇文章主要給大家介紹了關(guān)于vue.js實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的方法教程，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
Vue3 + MybatisPlus實(shí)現(xiàn)批量刪除功能(詳細(xì)代碼)
這篇文章主要介紹了Vue3 + MybatisPlus實(shí)現(xiàn)批量刪除功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
vue項(xiàng)目打包后打開(kāi)頁(yè)面空白解決辦法
這篇文章主要介紹了vue項(xiàng)目打包后打開(kāi)空白解決辦法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
Babel是一個(gè)JS編譯器,主要作用是將ECMAScript2015+ 版本的代碼,轉(zhuǎn)換為向后兼容的JS語(yǔ)法,以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其它環(huán)境中,下面這篇文章主要給大家介紹了關(guān)于Vue中babel.config.js配置詳解的相關(guān)資料,需要的朋友可以參考下2023-02-02
VUE開(kāi)發(fā)一個(gè)圖片輪播的組件示例代碼
本篇文章主要介紹了VUE開(kāi)發(fā)一個(gè)圖片輪播的組件示例代碼，對(duì)圖片輪播效果感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了vue項(xiàng)目中使用scss的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
這篇文章主要給大家介紹了關(guān)于vue-router懶加載的3種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤(pán)組件封裝
這篇文章主要為大家詳細(xì)介紹了vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤(pán)組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Element Notification通知的實(shí)現(xiàn)示例
這篇文章主要介紹了Element Notification通知的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07