vue 封装导出Excel数据的公共函数的方法
vue+element UI 封装一个导出Excel数据的公共函数
将公共方法封装在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') // 创建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:{ //导出数据的方法 handleExport(formData) { this.loading = true const data = { // import { loanDownloadData } from '@/api/loan/userLoanList' // event: loanDownloadData, loanDownloadData是导出数据的接口的关键字 //formData是loanDownloadData接口需要的参数 event: '', formData: formData } this.$store.dispatch('downloadData', data).then(res => { this.loading= false }).catch(() => { this.loading = false }) }, }
PS:如果接口能正常返回数据,但是接口调用时发生报错,可能是接口拦截文件返回的数据不对,首先找到utils->request.js文件中(一般情况下是放在这个位置),如下:
接口拦截的时候,如果是导出接口需要返回所有的数据,如:response,因为在common.js文件中需要用到headers重命名文件,如下
接口拦截的一般情况下只需要返回data就行,如:const res = response.data ,返回res
到此这篇关于vue 封装导出Excel数据的公共函数的文章就介绍到这了,更多相关vue 导出Excel公共函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vuex中store.commit和store.dispatch的区别及使用方法
这篇文章主要介绍了vuex中store.commit和store.dispatch的区别及使用方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-01-01Vue CompositionAPI中watch和watchEffect的区别详解
这篇文章主要为大家详细介绍了Vue CompositionAPI中watch和watchEffect的区别,文中的示例代码简洁易懂,希望对大家学习Vue有一定的帮助2023-06-06laravel-admin 与 vue 结合使用实例代码详解
由于 Laravel-admin 采用的是 pjax 的方式刷新页面,意味着很多页面刷新的操作,这篇文章主要介绍了laravel-admin 与 vue 结合使用,需要的朋友可以参考下2019-06-06教你使用vue-autofit 一行代码搞定自适应可视化大屏
这篇文章主要为大家介绍了使用vue-autofit 一行代码搞定自适应可视化大屏教程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-05-05
最新评论