vue+axios實現post文件下載

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

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

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

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

這里是axios的post方法。get方法請點擊這里=》here

第一步：跟后端童鞋確認交付的接口的response header設置了

以及返回了文件流。

第二步：修改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后，調用download函數（創(chuàng)建a標簽，設置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()
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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