在vue中怎么使用axios實現(xiàn)post方式獲取二進制流下載文件

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

vue是什么

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

需求

點擊導(dǎo)出下載表格對應(yīng)的excel文件

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

實現(xiàn)

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

responseType: 'blob'

第二步,在拿到數(shù)據(jù)流之后,把流轉(zhuǎn)為指定文件格式并創(chuàng)建a標(biāo)簽,模擬點擊下載,實現(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 獲取到

這種情況需要后端設(shè)置 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)注億速云行業(yè)資訊頻道！