vue 封裝導(dǎo)出Excel數(shù)據(jù)的公共函數(shù)的方法
vue+element UI 封裝一個導(dǎo)出Excel數(shù)據(jù)的公共函數(shù)
將公共方法封裝在store的modules的common.js中,如下圖:
代碼如下:
const download = { actions: { downloadData({ commit, state }, data) { return new Promise((resolve, reject) => { data.event(data.formData).then(res => { const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) const objectUrl = URL.createObjectURL(blob) const link = document.createElement('a') // 創(chuàng)建a標(biāo)簽 link.href = objectUrl // 重命名文件 link.download = res.headers['content-disposition'].split( '=' )[1] link.click() URL.revokeObjectURL(objectUrl) resolve(res) }).catch((err) => { reject(err) }) }) } } } export default download
然后在store的index中導(dǎo)出到公共模塊
在需要調(diào)用方法的組件中使用
methods:{ //導(dǎo)出數(shù)據(jù)的方法 handleExport(formData) { this.loading = true const data = { // import { loanDownloadData } from '@/api/loan/userLoanList' // event: loanDownloadData, loanDownloadData是導(dǎo)出數(shù)據(jù)的接口的關(guān)鍵字 //formData是loanDownloadData接口需要的參數(shù) event: '', formData: formData } this.$store.dispatch('downloadData', data).then(res => { this.loading= false }).catch(() => { this.loading = false }) }, }
PS:如果接口能正常返回數(shù)據(jù),但是接口調(diào)用時發(fā)生報錯,可能是接口攔截文件返回的數(shù)據(jù)不對,首先找到utils->request.js文件中(一般情況下是放在這個位置),如下:
接口攔截的時候,如果是導(dǎo)出接口需要返回所有的數(shù)據(jù),如:response,因為在common.js文件中需要用到headers重命名文件,如下
接口攔截的一般情況下只需要返回data就行,如:const res = response.data ,返回res
到此這篇關(guān)于vue 封裝導(dǎo)出Excel數(shù)據(jù)的公共函數(shù)的文章就介紹到這了,更多相關(guān)vue 導(dǎo)出Excel公共函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vuex中store.commit和store.dispatch的區(qū)別及使用方法
這篇文章主要介紹了vuex中store.commit和store.dispatch的區(qū)別及使用方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01Vue?CompositionAPI中watch和watchEffect的區(qū)別詳解
這篇文章主要為大家詳細(xì)介紹了Vue?CompositionAPI中watch和watchEffect的區(qū)別,文中的示例代碼簡潔易懂,希望對大家學(xué)習(xí)Vue有一定的幫助2023-06-06laravel-admin 與 vue 結(jié)合使用實例代碼詳解
由于 Laravel-admin 采用的是 pjax 的方式刷新頁面,意味著很多頁面刷新的操作,這篇文章主要介紹了laravel-admin 與 vue 結(jié)合使用,需要的朋友可以參考下2019-06-06教你使用vue-autofit 一行代碼搞定自適應(yīng)可視化大屏
這篇文章主要為大家介紹了使用vue-autofit 一行代碼搞定自適應(yīng)可視化大屏教程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05