需求

點擊導(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方式獲取二進制流下載文件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對云海天教程網(wǎng)站的支持！

如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

總結(jié)

以上是生活随笔為你收集整理的vue 文件转换二进制_在vue中使用axios实现post方式获取二进制流下载文件(实例代码)...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。