vue下載excel的實(shí)現(xiàn)代碼后臺(tái)用post方法
更新時(shí)間：2019年05月10日 16:51:44 作者：六一兒童節(jié)
這篇文章主要介紹了vue下載excel的實(shí)現(xiàn)代碼,后臺(tái)用post方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
后臺(tái)方法的參數(shù)必須是@RequestBody修飾的。
前臺(tái)關(guān)鍵代碼:
axios ( {
method : 'post',
url : api.exportPlayTime , // 請(qǐng)求地址
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 對(duì)象
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的實(shí)現(xiàn)代碼后臺(tái)用post方法，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
Vue路由實(shí)現(xiàn)頁面跳轉(zhuǎn)的示例代碼
根據(jù)登錄的角色不一樣,實(shí)現(xiàn)不同的路由展示，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-04-04
vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無效的解決
這篇文章主要介紹了vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無效的解決方案，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
解決vue2中使用elementUi打包報(bào)錯(cuò)的問題
這篇文章主要介紹了解決vue2中使用elementUi打包報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue路由跳轉(zhuǎn)傳遞參數(shù)的方式總結(jié)
在本篇文章和里小編給各位總結(jié)了關(guān)于vue路由跳轉(zhuǎn)傳遞參數(shù)的三種方式以及相關(guān)代碼，需要的朋友們可以學(xué)習(xí)下。2020-05-05
這篇文章主要為大家詳細(xì)介紹了vue自定義封裝按鈕組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue2.0實(shí)現(xiàn)組件之間數(shù)據(jù)交互和通信操作示例
這篇文章主要介紹了Vue2.0實(shí)現(xiàn)組件之間數(shù)據(jù)交互和通信操作,結(jié)合實(shí)例形式分析了vue2.0組件之間通信的原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-05-05
vue實(shí)踐---vue不依賴外部資源實(shí)現(xiàn)簡(jiǎn)單多語操作
這篇文章主要介紹了vue實(shí)踐---vue不依賴外部資源實(shí)現(xiàn)簡(jiǎn)單多語操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue使用Sentry實(shí)現(xiàn)錯(cuò)誤監(jiān)控
Sentry?是一款功能強(qiáng)大的開源錯(cuò)誤監(jiān)控服務(wù),廣泛用于追蹤和修復(fù)應(yīng)用中的異常情況,本文將詳細(xì)介紹如何在?Vue?應(yīng)用中集成和使用?Sentry,感興趣的可以了解下2024-11-11
Vue.js 如何添加全局常量或變量? 這是最近一個(gè)同事問的問題，發(fā)現(xiàn)很多朋友對(duì)這塊不熟悉，所以下面這篇文章主要給大家介紹了關(guān)于Vue中定義全局變量與常量的各種方式，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
vue基礎(chǔ)ESLint?Prettier配置教程詳解
這篇文章主要介紹了vue基礎(chǔ)ESLint?Prettier配置教程詳解，本文使用VsCode?+?Vue?+?ESLint?+?Prettier?實(shí)現(xiàn)代碼格式規(guī)范?+?保存自動(dòng)修復(fù)代碼js+vue2022-07-07