vue 封裝導出Excel數(shù)據(jù)的公共函數(shù)的方法
vue+element UI 封裝一個導出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標簽 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中導出到公共模塊
在需要調用方法的組件中使用
methods:{ //導出數(shù)據(jù)的方法 handleExport(formData) { this.loading = true const data = { // import { loanDownloadData } from '@/api/loan/userLoanList' // event: loanDownloadData, loanDownloadData是導出數(shù)據(jù)的接口的關鍵字 //formData是loanDownloadData接口需要的參數(shù) event: '', formData: formData } this.$store.dispatch('downloadData', data).then(res => { this.loading= false }).catch(() => { this.loading = false }) }, }
PS:如果接口能正常返回數(shù)據(jù),但是接口調用時發(fā)生報錯,可能是接口攔截文件返回的數(shù)據(jù)不對,首先找到utils->request.js文件中(一般情況下是放在這個位置),如下:
接口攔截的時候,如果是導出接口需要返回所有的數(shù)據(jù),如:response,因為在common.js文件中需要用到headers重命名文件,如下
接口攔截的一般情況下只需要返回data就行,如:const res = response.data ,返回res
到此這篇關于vue 封裝導出Excel數(shù)據(jù)的公共函數(shù)的文章就介紹到這了,更多相關vue 導出Excel公共函數(shù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vuex中store.commit和store.dispatch的區(qū)別及使用方法
這篇文章主要介紹了vuex中store.commit和store.dispatch的區(qū)別及使用方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01Vue?CompositionAPI中watch和watchEffect的區(qū)別詳解
這篇文章主要為大家詳細介紹了Vue?CompositionAPI中watch和watchEffect的區(qū)別,文中的示例代碼簡潔易懂,希望對大家學習Vue有一定的幫助2023-06-06laravel-admin 與 vue 結合使用實例代碼詳解
由于 Laravel-admin 采用的是 pjax 的方式刷新頁面,意味著很多頁面刷新的操作,這篇文章主要介紹了laravel-admin 與 vue 結合使用,需要的朋友可以參考下2019-06-06教你使用vue-autofit 一行代碼搞定自適應可視化大屏
這篇文章主要為大家介紹了使用vue-autofit 一行代碼搞定自適應可視化大屏教程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05