建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
怎么在vue.js中利用axios實(shí)現(xiàn)一個(gè)下載功能？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。
創(chuàng)新互聯(lián)是一家專(zhuān)注于網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站與策劃設(shè)計(jì),新華網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:新華等地區(qū)。新華做網(wǎng)站價(jià)格咨詢(xún):18980820575
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)
res.data='';
res.headers['content-type'] = 'text/json'
return res;
}
...
return res;
}, error => {
// Do something with response error
return Promise.reject(error.response.data || error.message)
})
export default axios 看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。
網(wǎng)站欄目：怎么在vue.js中利用axios實(shí)現(xiàn)一個(gè)下載功能
網(wǎng)址分享：http://www.dlmjj.cn/article/gcgcih.html
