vue+axios實(shí)現(xiàn)post文件下載

更新時(shí)間：2022年04月27日 09:28:35 作者：yulj

這篇文章主要為大家詳細(xì)介紹了vue+axios實(shí)現(xiàn)post文件下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue+axios實(shí)現(xiàn)post文件下載的具體代碼，供大家參考，具體內(nèi)容如下

功能：點(diǎn)擊導(dǎo)出按鈕，提交請求，下載excel文件；

這里是axios的post方法。get方法請點(diǎn)擊這里=》here

第一步：跟后端童鞋確認(rèn)交付的接口的response header設(shè)置了

以及返回了文件流。

第二步：修改axios請求的responseType為blob，以post請求為例：

axios({
 method: 'post',
 url: 'api/user/',
 data: {
 firstName: 'Fred',
 lastName: 'Flintstone'
 },
 responseType: 'blob'
}).then(response => {
 this.download(response)
}).catch((error) => {

})

第三步：請求成功，拿到response后，調(diào)用download函數(shù)（創(chuàng)建a標(biāo)簽，設(shè)置download屬性，插入到文檔中并click）

methods: {
 // 下載文件
 download (data) {
 if (!data) {
  return
 }
 let url = window.URL.createObjectURL(new Blob([data]))
 let link = document.createElement('a')
 link.style.display = 'none'
 link.href = url
 link.setAttribute('download', 'excel.xlsx')
 
 document.body.appendChild(link)
 link.click()
 }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue elementUI使用tabs與導(dǎo)航欄聯(lián)動
這篇文章主要為大家詳細(xì)介紹了vue elementUI使用tabs與導(dǎo)航欄聯(lián)動，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-06-06
vue.extend與vue.component的區(qū)別和聯(lián)系
這篇文章主要介紹了vue.extend與vue.component的區(qū)別和聯(lián)系，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2018-09-09
Vue3之使用js實(shí)現(xiàn)動畫示例解析
這篇文章主要為大家介紹了Vue3之使用js實(shí)現(xiàn)動畫示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
Vue.js雙向綁定實(shí)現(xiàn)原理詳解
這篇文章主要為大家詳細(xì)介紹了Vue.js雙向綁定實(shí)現(xiàn)原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
Vue常用指令詳解分析
這篇文章給大家詳細(xì)分析了關(guān)于VUE的常用的相關(guān)指令內(nèi)容，對此有需要的朋友們可以學(xué)習(xí)下。
2018-08-08
vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例
這篇文章主要介紹了vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-09-09
淺析vue中的nextTick
這篇文章主要介紹了vue中nextTick的相關(guān)資料，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
elementUi vue el-radio 監(jiān)聽選中變化的實(shí)例代碼
這篇文章主要介紹了elementUi vue el-radio 監(jiān)聽選中變化，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06
Vue.js之$emit用法案例詳解
這篇文章主要介紹了Vue.js之$emit用法案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
Vue組件實(shí)現(xiàn)評論區(qū)功能
這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)評論區(qū)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04