vue下載excel的實現(xiàn)代碼后臺用post方法
更新時間:2019年05月10日 16:51:44 作者:六一兒童節(jié)
這篇文章主要介紹了vue下載excel的實現(xiàn)代碼,后臺用post方法,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值 ,需要的朋友可以參考下
后臺方法的參數(shù)必須是@RequestBody修飾的。
前臺關(guān)鍵代碼:
axios ( { method : 'post', url : api.exportPlayTime , // 請求地址 data : { choose : type, begindate : startDate, enddate : endDate }, responseType : 'arraybuffer', observe: 'response', } ) .then ( ( res ) => { const fileName = ""+filename+".xlsx" let blob = new Blob([res.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}); if ( 'download' in document.createElement ( 'a' ) ) { // 非IE下載 const elink = document.createElement ( 'a' ) elink.download = fileName elink.style.display = 'none' elink.href = URL.createObjectURL ( blob ) document.body.appendChild ( elink ) elink.click () URL.revokeObjectURL ( elink.href ) // 釋放URL 對象 document.body.removeChild ( elink ) } else { // IE10+下載 navigator.msSaveBlob ( blob, fileName ) } })
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() },
總結(jié)
以上所述是小編給大家介紹的vue下載excel的實現(xiàn)代碼后臺用post方法,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
相關(guān)文章
Vue 3.0的attribute強制行為理解學(xué)習(xí)
這篇文章主要為大家介紹了Vue 3.0的attribute強制行為理解學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能
這篇文章主要介紹了使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能,需要的朋友可以參考下2019-04-04Vue學(xué)習(xí)筆記進階篇之函數(shù)化組件解析
本篇文章主要介紹了Vue學(xué)習(xí)筆記進階篇之函數(shù)化組件探究,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07echarts鼠標(biāo)覆蓋高亮顯示節(jié)點及關(guān)系名稱詳解
下面小編就為大家分享一篇echarts鼠標(biāo)覆蓋高亮顯示節(jié)點及關(guān)系名稱詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03在Vuex使用dispatch和commit來調(diào)用mutations的區(qū)別詳解
今天小編就為大家分享一篇在Vuex使用dispatch和commit來調(diào)用mutations的區(qū)別詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09