一次在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ù)是亂碼,需要轉(zhuǎn)blob然后進行下載,下載的話就是使用普遍的在網(wǎng)頁上創(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:請求時轉(zhuǎn)為blob,所以需要設(shè)置 responseType:'blob'
3.2 請求的方法
主要代碼解釋都放在下面的注釋中了,就不再重新解釋了,主要是設(shè)置請求頭中的 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的實力對象,后面調(diào)用close關(guān)閉 try { // responseType:'blob' 重點,設(shè)置將后端傳回的數(shù)據(jù)進行blob轉(zhuǎn)化,不然亂碼 const data = await this.$http.exportExcel('請求的url',form1,{responseType:'blob'}) this.download(data) // 導出excel,這個方法下面會有解釋 infoMessage.close() // 關(guān)閉上方的提示信息,不然兩個提示信息會同時出現(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`) // 設(shè)置 a 元素 download屬性,屬性名為后面的值 document.body.appendChild(link) // 添加到頁面中 link.click() // 點擊a元素 下載excel文件 window.URL.revokeObjectURL(url) //卸載url,釋放內(nèi)存 },
1.window.webkitURL是[webkit]內(nèi)核的實現(xiàn)(一般手機上就是使用這個),window.webkitURL和window.URL是一樣的,window.URL是標準定義,所以做一個兼容
2.標簽變量名.setAttribute("屬性名","屬性值");害怕大家寫多了框架,忘了這些哈哈哈哈
四、總結(jié)
在使用post請求,后端返回的data為亂碼時,不能判斷 返回數(shù)據(jù)的 code==200,然后就是需要在請求頭里面的 responseType:'blob',就OK啦。
到此這篇關(guān)于一次在vue中使用post進行excel表下載的文章就介紹到這了,更多相關(guān)vue用post下載excel表內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Django+Vue實現(xiàn)WebSocket連接的示例代碼
這篇文章主要介紹了Django+Vue實現(xiàn)WebSocket連接的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-05-05Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例
下面小編就為大家分享一篇Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03使用proxy實現(xiàn)一個更優(yōu)雅的vue【推薦】
Proxy 用于修改某些操作的默認行為,等同于在語言層面做出修改,所以屬于一種“元編程”。這篇文章主要介紹了用proxy實現(xiàn)一個更優(yōu)雅的vue,需要的朋友可以參考下2018-06-06vue-cli3+echarts實現(xiàn)漸變色儀表盤組件封裝
這篇文章主要為大家詳細介紹了vue-cli3+echarts實現(xiàn)漸變色儀表盤組件封裝,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03使用vue ant design分頁以及表格分頁改為中文問題
這篇文章主要介紹了使用vue ant design分頁以及表格分頁改為中文問題,具有很好的參考價值,希望對大家有所幫助。2023-04-04使用vant-picker實現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標
這篇文章主要介紹了使用vant-picker實現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12快速解決Error: error:0308010C:digital envelope ro
因為 node.js V17版本中最近發(fā)布的OpenSSL3.0, 而OpenSSL3.0對允許算法和密鑰大小增加了嚴格的限制,下面通過本文給大家分享快速解決Error: error:0308010C:digital envelope routines::unsupported的三種解決方案,感興趣的朋友一起看看吧2024-02-02vue 組件之間事件觸發(fā)($emit)與event Bus($on)的用法說明
這篇文章主要介紹了vue 組件之間事件觸發(fā)($emit)與event Bus($on)的用法說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07