iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue 封装导出Excel数据的公共函数的方法
  • 541
分享到

vue 封装导出Excel数据的公共函数的方法

2024-04-02 19:04:59 541人浏览 八月长安
摘要

Vue+element UI 封装一个导出excel数据的公共函数 将公共方法封装在store的modules的common.js中,如下图: 代码如下: const down

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公共函数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue 封装导出Excel数据的公共函数的方法

本文链接: https://www.lsjlt.com/news/137187.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue 封装导出Excel数据的公共函数的方法
    vue+element UI 封装一个导出Excel数据的公共函数 将公共方法封装在store的modules的common.js中,如下图: 代码如下: const down...
    99+
    2024-04-02
  • mysql数据库表导出到excel的方法
    mysql数据库表导出到excel的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!mysql数据库表导出到excel的...
    99+
    2024-04-02
  • Java Excel数据导入数据库的方法
    目录1、根据业务需求设计数据库表2、根据数据库表设计一个Excel模板3、环境准备4、通过插件生成表对应的实体类5、自定义编写工具类6、编写具体业务逻辑Service7、在dao层对...
    99+
    2024-04-02
  • pentaho工具将数据库数据导入导出为Excel图文的方法
    今天小编给大家分享一下pentaho工具将数据库数据导入导出为Excel图文的方法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2023-06-29
  • PHP函数的数据导入导出函数
    PHP是一种广泛应用于动态网站开发的编程语言。在PHP中,函数是一种可重复利用的代码块,可以提高开发效率和代码质量。其中,数据导入和导出函数尤为常用,能够帮助我们快速地将数据表格导出/导入到文件或数据库中。下面,我们来详细了解一下PHP函数...
    99+
    2023-05-19
    PHP函数 数据导入 数据导出
  • navicat导出查询结果数据成excel的方法
    这篇文章主要介绍navicat导出查询结果数据成excel的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Navicat作为一个数据库管理软件,查询的结果很有参考意义,能够直接导...
    99+
    2024-04-02
  • MySQL数据库导入导出数据的方法
    这篇文章主要介绍“MySQL数据库导入导出数据的方法”,在日常操作中,相信很多人在MySQL数据库导入导出数据的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”MySQL数...
    99+
    2024-04-02
  • mysql导出数据的方法
    mysql导出数据的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!简单的介绍一下命令行进入mysql的方法:C:\&g...
    99+
    2024-04-02
  • JS实现将数据导出到Excel的方法详解
    修改之前项目代码的时候,发现前人导出excel是用纯javascript实现的。并没有调用后台接口。 之前从来没这么用过,记录一下。以备不时之需。 方法一: 将table标签,包括t...
    99+
    2024-04-02
  • Java将Excel数据导入到数据库的方法
    小编给大家分享一下Java将Excel数据导入到数据库的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!所用Jar包 sqljdbc4.jar连接数据库的Jar...
    99+
    2023-05-30
    java excel 数据库
  • SQL导入和导出Excel数据的语句
    本篇内容主要讲解“SQL导入和导出Excel数据的语句”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“SQL导入和导出Excel数据的语句”吧!--从Excel文...
    99+
    2024-04-02
  • SpringBoot+easypoi实现数据的Excel导出
    本文实例为大家分享了SpringBoot+easypoi实现数据的Excel导出的具体代码,供大家参考,具体内容如下 maven <dependency> ...
    99+
    2024-04-02
  • Java中用POI实现将数据导出到Excel的方法
    这篇文章将为大家详细讲解有关Java中用POI实现将数据导出到Excel的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。常用的java框架有哪些1.SpringMVC,Spring Web MVC是一...
    99+
    2023-06-14
  • navicat导出表数据的方法
    小编给大家分享一下navicat导出表数据的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!Navicat作为一个数据库管理软件。接下来小编介绍一下如何使用navicat导出表中的数据。1、...
    99+
    2024-04-02
  • navicat导出数据库的方法
    这篇文章主要介绍navicat导出数据库的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!navicat怎样导出数据库导出数据库:首先打开Navicat ,在我们要导出的数据库上右...
    99+
    2024-04-02
  • 将mysql数据导出的方法
    小编给大家分享一下将mysql数据导出的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!MySQL 是最流行的关系型数据库管理...
    99+
    2024-04-02
  • mysql导出数据库的方法
    这篇文章给大家分享的是有关mysql导出数据库的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。方法一cmd 到mysql bin目录下用如下命令: mysqldump --o...
    99+
    2024-04-02
  • python封装函数的方法有哪些
    在Python中,封装函数有以下几种方法: 使用函数:将一段代码封装在一个函数中,通过调用函数来执行这段代码。函数可以接收参数,返...
    99+
    2023-10-23
    python
  • Excel数据如批量导入navicat的方法
    这篇文章主要介绍了Excel数据如批量导入navicat的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。打开电脑上的Navicat,点击左上...
    99+
    2024-04-02
  • PostgreSQL数据库导入和导出的方法
    今天小编给大家分享一下PostgreSQL数据库导入和导出的方法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。Postgre...
    99+
    2023-06-27
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作