下面我就為大家分享一篇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中文網其他相關文章!