vue.js 使用axios實現(xiàn)下載功能的示例
更新時間：2018年03月05日 09:55:58 作者：seanxwq
下面小編就為大家分享一篇vue.js 使用axios實現(xiàn)下載功能的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看
本文主要來源于知乎一個回答，這里紅色部分做了自己的處理，雖然自己的少，可是很有用的幾句代碼哦
只好回答一下axios如何攔截get請求并下載文件的了。
Ajax無法下載文件的原因
瀏覽器的GET(frame、a)和POST(form)請求具有如下特點：
response會交由瀏覽器處理
response內(nèi)容可以為二進(jìn)制文件、字符串等
Ajax請求具有如下特點：
response會交由Javascript處理
response內(nèi)容僅可以為字符串
因此，Ajax本身無法觸發(fā)瀏覽器的下載功能。
Axios攔截請求并實現(xiàn)下載
為了下載文件，我們通常會采用以下步驟：
發(fā)送請求
獲得response
通過response判斷返回是否為文件
如果是文件則在頁面中插入frame
利用frame實現(xiàn)瀏覽器的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請求下載文件了。
以上這篇vue.js 使用axios實現(xiàn)下載功能的示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js 實現(xiàn)數(shù)據(jù)展示全部和收起功能
這篇文章主要介紹了Vue.js 實現(xiàn)數(shù)據(jù)展示全部和收起功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
vue.js實現(xiàn)刷新當(dāng)前頁面的方法教程
這篇文章主要給大家介紹了關(guān)于vue.js實現(xiàn)刷新當(dāng)前頁面的方法教程，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
Vue3 + MybatisPlus實現(xiàn)批量刪除功能(詳細(xì)代碼)
這篇文章主要介紹了Vue3 + MybatisPlus實現(xiàn)批量刪除功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了vue項目打包后打開空白解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
Babel是一個JS編譯器,主要作用是將ECMAScript2015+ 版本的代碼,轉(zhuǎn)換為向后兼容的JS語法,以便能夠運行在當(dāng)前和舊版本的瀏覽器或其它環(huán)境中,下面這篇文章主要給大家介紹了關(guān)于Vue中babel.config.js配置詳解的相關(guān)資料,需要的朋友可以參考下2023-02-02
本篇文章主要介紹了VUE開發(fā)一個圖片輪播的組件示例代碼，對圖片輪播效果感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了vue項目中使用scss的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要給大家介紹了關(guān)于vue-router懶加載的3種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
vue-cli3+echarts實現(xiàn)漸變色儀表盤組件封裝
這篇文章主要為大家詳細(xì)介紹了vue-cli3+echarts實現(xiàn)漸變色儀表盤組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Element Notification通知的實現(xiàn)示例
這篇文章主要介紹了Element Notification通知的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07