vue 封裝導(dǎo)出Excel數(shù)據(jù)的公共函數(shù)的方法
vue+element UI 封裝一個(gè)導(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:如果接口能正常返回?cái)?shù)據(jù),但是接口調(diào)用時(shí)發(fā)生報(bào)錯(cuò),可能是接口攔截文件返回的數(shù)據(jù)不對(duì),首先找到utils->request.js文件中(一般情況下是放在這個(gè)位置),如下:
接口攔截的時(shí)候,如果是導(dǎo)出接口需要返回所有的數(shù)據(jù),如:response,因?yàn)樵赾ommon.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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vuex中store.commit和store.dispatch的區(qū)別及使用方法
這篇文章主要介紹了vuex中store.commit和store.dispatch的區(qū)別及使用方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01vue項(xiàng)目調(diào)試的三種方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue項(xiàng)目調(diào)試的三種方法,大家可以根據(jù)需要選擇調(diào)試方法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09Vue?CompositionAPI中watch和watchEffect的區(qū)別詳解
這篇文章主要為大家詳細(xì)介紹了Vue?CompositionAPI中watch和watchEffect的區(qū)別,文中的示例代碼簡(jiǎn)潔易懂,希望對(duì)大家學(xué)習(xí)Vue有一定的幫助2023-06-06laravel-admin 與 vue 結(jié)合使用實(shí)例代碼詳解
由于 Laravel-admin 采用的是 pjax 的方式刷新頁(yè)面,意味著很多頁(yè)面刷新的操作,這篇文章主要介紹了laravel-admin 與 vue 結(jié)合使用,需要的朋友可以參考下2019-06-06Vue在項(xiàng)目中如何引入本地Json數(shù)據(jù)
這篇文章主要介紹了Vue在項(xiàng)目中如何引入本地Json數(shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11教你使用vue-autofit 一行代碼搞定自適應(yīng)可視化大屏
這篇文章主要為大家介紹了使用vue-autofit 一行代碼搞定自適應(yīng)可視化大屏教程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05基于Vue3實(shí)現(xiàn)的圖片散落效果實(shí)例
最近工作中遇到一個(gè)效果還不錯(cuò),所以想著實(shí)現(xiàn)一下,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3實(shí)現(xiàn)的圖片散落效果的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04