在vue中使用axios實現(xiàn)post方式獲取二進(jìn)制流下載文件(實例代碼)

更新時間：2019年12月16日 08:54:28 作者：大師兄

這篇文章主要介紹了在vue中使用axios實現(xiàn)post方式獲取二進(jìn)制流下載文件的相關(guān)資料,需要的朋友可以參考下

需求

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

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

實現(xiàn)

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

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方式獲取二進(jìn)制流下載文件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: