一次在vue中使用post進行excel表下載的實戰(zhàn)記錄
一、一般大家下載excel都是使用get方法,直接點擊下載
就像這樣,我就不多說了,大家應該都可以的啦 ??♀?
<!-- 導出提示框 -->
<Modal
title="導出"
:show.sync="exportVisible"
:showfooter="false"
@close="closeExportFiles"
>
<exportFiles
ref="exportFilesDom"
:model="exportForm"
export-url="導出鏈接"
/>
</Modal>二、vue用post下載excel表
這次因為導出的excel文件表頭有點復雜,后端弄了很久并且是個post請求,我就自己也重新寫的
后端發(fā)來的下載的話是文件流,獲取到的數(shù)據(jù)是亂碼,需要轉blob然后進行下載,下載的話就是使用普遍的在網頁上創(chuàng)建一個 a 鏈接,然后掛載上 a 鏈接這樣的方法,點擊下載
三、下面是具體的實現(xiàn)
3.1 post的封裝
將請求方法封裝了一下,因為以前的方法都在判斷響應的 code 等于200,我前期做的時候請求一直再走 catch 里面,我萌了很久,我太菜了,最后發(fā)現(xiàn)返回的是亂碼,沒有返回code什么的,所以在axios的響應函數(shù)里面一直在走 Promise.reject(),就走catch里面,所以封裝了下面的方法
// 文件下載導出
http.exportExcel = (url,data,config) => {
return instance.post(url,data,config).then(res => {
return res
})
}url:請求地址
data:請求參數(shù) 3.config:請求時轉為blob,所以需要設置 responseType:'blob'
3.2 請求的方法
主要代碼解釋都放在下面的注釋中了,就不再重新解釋了,主要是設置請求頭中的 responseType:'blob'
async reportExport(type){
// console.log(this.multipleSelection)
this.type = type
if(type === 2 ){
if(this.multipleSelection.length<=0){
return this.$message.error('請先選擇要導出的數(shù)據(jù)')
}
}
let ids = []
for(let obj of this.multipleSelection){
ids.push(obj.id)
}
let form1 = {
type:type,
ids:ids,
date:this.dayTime,
}
let infoMessage = this.$message.info('請稍后正在導出中') // 這個是拿到element中this.$message的實力對象,后面調用close關閉
try {
// responseType:'blob' 重點,設置將后端傳回的數(shù)據(jù)進行blob轉化,不然亂碼
const data = await this.$http.exportExcel('請求的url',form1,{responseType:'blob'})
this.download(data) // 導出excel,這個方法下面會有解釋
infoMessage.close() // 關閉上方的提示信息,不然兩個提示信息會同時出現(xiàn)
this.$message.success('導出成功')
} catch (error) {
console.log(error)
}
},3.3 download下載方法的封裝
// 下載文件
download (data) {
if (!data) {
return
}
window.URL = window.URL || window.webkitURL // 兼容性
// 創(chuàng)建一個 URL 這個 URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a') // 創(chuàng)建一個a元素
link.style.display = 'none' // 讓a元素在頁面中隱藏
link.href = url // 綁定 a 元素的 href 為當前的url
let exportName = this.type == 1 ? this.dayTime : this.belongMonth
link.setAttribute('download', `${exportName}.xlsx`) // 設置 a 元素 download屬性,屬性名為后面的值
document.body.appendChild(link) // 添加到頁面中
link.click() // 點擊a元素 下載excel文件
window.URL.revokeObjectURL(url) //卸載url,釋放內存
},1.window.webkitURL是[webkit]內核的實現(xiàn)(一般手機上就是使用這個),window.webkitURL和window.URL是一樣的,window.URL是標準定義,所以做一個兼容
2.標簽變量名.setAttribute("屬性名","屬性值");害怕大家寫多了框架,忘了這些哈哈哈哈
四、總結
在使用post請求,后端返回的data為亂碼時,不能判斷 返回數(shù)據(jù)的 code==200,然后就是需要在請求頭里面的 responseType:'blob',就OK啦。
到此這篇關于一次在vue中使用post進行excel表下載的文章就介紹到這了,更多相關vue用post下載excel表內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue解析Json數(shù)據(jù)獲取Json里面的多個id問題
這篇文章主要介紹了vue解析Json數(shù)據(jù)獲取Json里面的多個id問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
詳解vuex中的this.$store.dispatch方法
這篇文章主要介紹了vuex中的this.$store.dispatch方法,必須要用commit(‘SET_TOKEN’,?tokenV)調用mutations里的方法,才能在store存儲成功,需要的朋友可以參考下2022-11-11
vue-element-admin 全局loading加載等待
本文主要介紹了vue-element-admin 全局loading加載等待,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09
vue復雜表格單元格合并根據(jù)數(shù)據(jù)動態(tài)合并方式
這篇文章主要介紹了vue復雜表格單元格合并根據(jù)數(shù)據(jù)動態(tài)合并方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
element?table?表格控件實現(xiàn)單選功能
本文主要介紹了element?table?表格控件實現(xiàn)單選功能,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-07-07

