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

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

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

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

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

這里是axios的post方法。get方法請點擊這里=》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狀態(tài)管理模式之vuex
這篇文章主要介紹了簡述vue狀態(tài)管理模式之vuex，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
Vue+ElementUi實現(xiàn)點擊表格鏈接頁面跳轉(zhuǎn)和路由效果
這篇文章主要介紹了Vue+ElementUi實現(xiàn)點擊表格中鏈接進(jìn)行頁面跳轉(zhuǎn)和路由,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-03-03
VUE3頁面div如何點擊改變樣式
這篇文章主要介紹了VUE3頁面div如何點擊改變樣式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue mint-ui tabbar變組件使用
這篇文章主要介紹了vue mint-ui tabbar變組件使用方法及實例代碼，非常不錯具有參考借鑒價值,需要的朋友可以參考下
2018-05-05
vue使用nprogress實現(xiàn)進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue使用nprogress實現(xiàn)進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-12-12
一文了解Vue實例掛載的過程
這篇文章主要給大家介紹了關(guān)于Vue實例掛載的過程,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2022-03-03
使用Bootstrap + Vue.js實現(xiàn)添加刪除數(shù)據(jù)示例
本篇文章主要介紹了使用Bootstrap + Vue.js實現(xiàn) 添加刪除數(shù)據(jù)示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-02-02
vue3如何使用VueQuill插入自定義按鈕
在Vue3項目中使用VueQuill編輯器,通過自定義Blot元素,可以插入特定的標(biāo)簽或樣式元素,滿足項目需求
2024-11-11
實現(xiàn)一個簡單的vue無限加載指令方法
vue 中的自定義指令是對底層 dom 進(jìn)行操作，下面以實現(xiàn)滾動到底部加載數(shù)據(jù)，實現(xiàn)無限加載來介紹如何自定義一個簡單的指令。
2017-01-01
axios請求中斷的幾種方法
在實際應(yīng)用場景中,假如有一個下載或者導(dǎo)出請求,數(shù)據(jù)量非常大的情況下,接口響應(yīng)的會很慢,這時候我我們想中斷請求,該怎么做呢？本文給大家介紹了axios請求中斷的幾種方法,需要的朋友可以參考下
2024-10-10