這篇文章主要介紹在vue中怎么使用axios實現(xiàn)post方式獲取二進制流下載文件，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)主要從事網(wǎng)站設計、網(wǎng)站制作、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務廣西,10年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18980820575

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復雜的單頁應用。

需求

點擊導出下載表格對應的excel文件

在 vue 項目中,使用的 axios ,后臺 java 提供的 post 接口 api

實現(xiàn)

第一步,在 axios 請求中加入?yún)?shù),表示接收的數(shù)據(jù)為二進制文件流

responseType: 'blob'

第二步,在拿到數(shù)據(jù)流之后,把流轉(zhuǎn)為指定文件格式并創(chuàng)建a標簽,模擬點擊下載,實現(xiàn)文件下載功能

let blob = res.data
let reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = (e) => {
 let a = document.createElement('a')
 a.download = fileName
 a.href = e.target.result
 document.body.appendChild(a)
 a.click()
 document.body.removeChild(a)
}

問題

使用 axios 會出現(xiàn)無法拿到 java 后端給出的 Content-Disposition 中的文件名

注意的是,瀏覽器中可以看到header中有信息,但是無法通過 axios 的 res.header 獲取到

 

這種情況需要后端設置 header

Access-Control-Expose-Headers: Content-Disposition

有可能后端加了之后還是獲取不到,那么讓后端單獨加一個fileName字段即可

response.setContentType("multipart/form-data");
response.setCharacterEncoding("utf-8");
response.setHeader("Content-disposition", "attachment;filename=" + UUID.randomUUID().toString() + ".xlsx");
response.setHeader("FileName", UUID.randomUUID().toString() + ".xlsx");
response.setHeader("Access-Control-Expose-Headers", "FileName")

總結(jié)

完整的 axios 代碼

axios.post({
 url:`url`,
 method:`post`,
 responseType: 'blob'
}).then(res => {
 let blob = res.data
 let reader = new FileReader()
 reader.readAsDataURL(blob)
 reader.onload = (e) => {
  let a = document.createElement('a')
  a.download = `fileName.xlsx`
  a.href = e.target.result
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
 }
})

ps：vue-axios的使用方法(簡單易懂)

1.vue-axios插件的安裝

使用 npm:

$ cnpm install axios

2.在main.js中添加(添加到原型鏈上)

import axios from 'axios';
Vue.prototype.axios = axios;

完活，然后就可以隨便在任何組件開始用了，耶!^-^!

例子:

this.axios.post('http://ai.yiche.com/web/ability/nlu/standardTokenizer', {
     "text": "動效如果有跟評審結(jié)論有出入的地方或者不清楚的地方，隨時溝通哈~"
    }).then(function(res) {
     console.log(res.data);
    }).catch(function(err) {
     if (err.response) {
      console.log(err.response)
     }
    });

以上是“在vue中怎么使用axios實現(xiàn)post方式獲取二進制流下載文件”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文名稱：在vue中怎么使用axios實現(xiàn)post方式獲取二進制流下載文件-創(chuàng)新互聯(lián)
當前網(wǎng)址：http://weahome.cn/article/pcchs.html