怎么在vue.js中利用axios實(shí)現(xiàn)一個(gè)下載功能？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站與策劃設(shè)計(jì),新華網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:新華等地區(qū)。新華做網(wǎng)站價(jià)格咨詢:18980820575

Ajax無法下載文件的原因

瀏覽器的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本身無法觸發(fā)瀏覽器的下載功能。

Axios攔截請(qǐng)求并實(shí)現(xiàn)下載

為了下載文件，我們通常會(huì)采用以下步驟：

發(fā)送請(qǐng)求

獲得response

通過response判斷返回是否為文件

如果是文件則在頁面中插入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)的支持。