您好,登錄后才能下訂單哦!
這篇文章主要講解了“vue中如何使用post進(jìn)行excel表下載”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“vue中如何使用post進(jìn)行excel表下載”吧!
<!-- 導(dǎo)出提示框 --> <Modal title="導(dǎo)出" :show.sync="exportVisible" :showfooter="false" @close="closeExportFiles" > <exportFiles ref="exportFilesDom" :model="exportForm" export-url="導(dǎo)出鏈接" /> </Modal>
這次因?yàn)閷?dǎo)出的excel文件表頭有點(diǎn)復(fù)雜,后端弄了很久并且是個(gè)post請(qǐng)求,我就自己也重新寫的
后端發(fā)來的下載的話是文件流,獲取到的數(shù)據(jù)是亂碼,需要轉(zhuǎn)blob然后進(jìn)行下載,下載的話就是使用普遍的在網(wǎng)頁上創(chuàng)建一個(gè) a 鏈接,然后掛載上 a 鏈接這樣的方法,點(diǎn)擊下載
將請(qǐng)求方法封裝了一下,因?yàn)橐郧暗姆椒ǘ荚谂袛囗憫?yīng)的 code 等于200,我前期做的時(shí)候請(qǐng)求一直再走 catch 里面,我萌了很久,我太菜了,最后發(fā)現(xiàn)返回的是亂碼,沒有返回code什么的,所以在axios的響應(yīng)函數(shù)里面一直在走 Promise.reject(),就走catch里面,所以封裝了下面的方法
// 文件下載導(dǎo)出 http.exportExcel = (url,data,config) => { return instance.post(url,data,config).then(res => { return res }) }
url:請(qǐng)求地址
data:請(qǐng)求參數(shù) 3.config:請(qǐng)求時(shí)轉(zhuǎn)為blob,所以需要設(shè)置 responseType:'blob'
主要代碼解釋都放在下面的注釋中了,就不再重新解釋了,主要是設(shè)置請(qǐng)求頭中的 responseType:'blob'
async reportExport(type){ // console.log(this.multipleSelection) this.type = type if(type === 2 ){ if(this.multipleSelection.length<=0){ return this.$message.error('請(qǐng)先選擇要導(dǎo)出的數(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('請(qǐng)稍后正在導(dǎo)出中') // 這個(gè)是拿到element中this.$message的實(shí)力對(duì)象,后面調(diào)用close關(guān)閉 try { // responseType:'blob' 重點(diǎn),設(shè)置將后端傳回的數(shù)據(jù)進(jìn)行blob轉(zhuǎn)化,不然亂碼 const data = await this.$http.exportExcel('請(qǐng)求的url',form1,{responseType:'blob'}) this.download(data) // 導(dǎo)出excel,這個(gè)方法下面會(huì)有解釋 infoMessage.close() // 關(guān)閉上方的提示信息,不然兩個(gè)提示信息會(huì)同時(shí)出現(xiàn) this.$message.success('導(dǎo)出成功') } catch (error) { console.log(error) } },
// 下載文件 download (data) { if (!data) { return } window.URL = window.URL || window.webkitURL // 兼容性 // 創(chuàng)建一個(gè) URL 這個(gè) URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。這個(gè)新的URL 對(duì)象表示指定的 File 對(duì)象或 Blob 對(duì)象。 let url = window.URL.createObjectURL(new Blob([data])) let link = document.createElement('a') // 創(chuàng)建一個(gè)a元素 link.style.display = 'none' // 讓a元素在頁面中隱藏 link.href = url // 綁定 a 元素的 href 為當(dāng)前的url let exportName = this.type == 1 ? this.dayTime : this.belongMonth link.setAttribute('download', `${exportName}.xlsx`) // 設(shè)置 a 元素 download屬性,屬性名為后面的值 document.body.appendChild(link) // 添加到頁面中 link.click() // 點(diǎn)擊a元素 下載excel文件 window.URL.revokeObjectURL(url) //卸載url,釋放內(nèi)存 },
1.window.webkitURL是[webkit]內(nèi)核的實(shí)現(xiàn)(一般手機(jī)上就是使用這個(gè)),window.webkitURL和window.URL是一樣的,window.URL是標(biāo)準(zhǔn)定義,所以做一個(gè)兼容
2.標(biāo)簽變量名.setAttribute("屬性名","屬性值")
感謝各位的閱讀,以上就是“vue中如何使用post進(jìn)行excel表下載”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)vue中如何使用post進(jìn)行excel表下載這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。