Vue实现导出Excel功能
目录
1.前端主导流程:
2. 插件使用及初始化
3.对后台数据进行处理,完成想要的效果
3.1 准备一个数据处理函数(最后会在回调里面使用)
3.2 先处理表头,定义一个对象,目的是待会将表头的英文转成中文
3.3 定义表头
3.4 要处理后台返回数据
3.5 表头处理逻辑
3.6 表格data处理逻辑
3.7 函数返回
3.8 最终完成
1.前端主导流程:
1.点击页面中导出按钮(注册点击事件)
2.事件回调里面,发送请求后台数据
3.对后台数据进行处理,完成想要的效果
4.生成Excel文件
2. 插件使用及初始化
2.1 借助vue-admin中提供的方法。将其插件包复制粘贴到自己项目下的src文件夹下面
2.2 安装插件依赖。
注:大概率会报错,这个阶段出啥错基本都是依赖没安装,都装上就好了
npm install file-saver script-loader --save
2.3 回调函数内容如下
当我们正式点击`导出`按钮之后,才去加载vendor文件夹中的Export2Excel模块
import('@/vendor/Export2Excel').then(excel => {// excel表示导入的模块对象 //import方法执行完毕返回的是一个promise对象,// 在then方法中我们可以拿到使用的模块对象console.log(excel)excel.export_json_to_excel({header: ['姓名', '工资'], // 表头 必填data: [['刘备', 100], //重点关注data的配置部分,我们发现它需要一个严格的二维数组['关羽', 500]], // 具体数据 必填filename: 'excel-list', // 文件名称autoWidth: true, // 宽度是否自适应bookType: 'xlsx' // 生成的文件类型})
})
Excel导出参数说明
注意:到这里为止,其实已经完成了简单的导出效果,用的是自己写的假数据。实际项目中肯定是拿的后台返回的数据,并且要对格式做修改,达到我们想要的效果(真测试了,上面的步骤跟着做就可完成。) 效果如下:
3.对后台数据进行处理,完成想要的效果
比如说后台返回的表头是英文需要转化成中文,然后格式不是插件要的格式。
后台返回数据:
需要将key转成中文,将value抓换成数组。
3.1 准备一个数据处理函数(最后会在回调里面使用)
3.2 先处理表头,定义一个对象,目的是待会将表头的英文转成中文
const map = {'id': '编号','password': '密码','mobile': '手机号','username': '姓名','timeOfEntry': '入职日期','formOfEmployment': '聘用形式','correctionTime': '转正日期','workNumber': '工号','departmentName': '部门','staffPhoto': '头像地址'}
3.3 定义表头
header = [待会将英文的表头转成中文的,是个数组的形式]
如下代码所示效果:
header = ['id', 'mobile', 'username',……]
3.4 要处理后台返回数据
后台返回数组,定义one是第一个数据,目的是以第一个数据为样本设置表头,如果第一条数据是false的话,说明后台啥也没返回,那就全剧终。
如下代码所示效果:
const one = list[0]if (!one) {return { header, data }}
3.5 表头处理逻辑
01 `Object.keys(one) ` 这个是遍历对象取出key组成一个数组。
02 ` map` 方法遍历对每一个项进行做事返回一个数组
03 `return map[key] ` 可以看做 map.id = '编号'(便于理解);map方法不停的对map对象做事而map[key]其实就是值,如 ‘编号’、‘部门’… 然后组成一个数组 如:['姓名', '工资']
header = Object.keys(one).map(key => {return map[key]})
3.6 表格data处理逻辑
目标:后台返回正式员工和非正式员工用1和2表示,我们需要将数字转成文字,并且需要让他们变成数组的格式。
01-首先后台返回的Obj['formOfEmployment']是数字1 , 2 我们要他们变成---> '正式', '非正式'
02-obj['formOfEmployment'] = hireTypEnmu[key] 这段代码意思是将汉字设置给左边的数字,实现替换。我们分别看左右代表什么。
03- obj['formOfEmployment'] 此时是数字
04-hireTypEnmu:{1:'正式', '2':'非正式' }这是我们自己定义的对象
05-hireTypEnmu[key] --key是数字--所以他是value是汉字
如下代码所示效果:
// data把list中每一个对象转成 对应的value数组// hireTypEnmu:{1:'正式', '2':'非正式' }data = list.map(obj => {// 把 Obj['formOfEmployment']: 1 , 2 ---> '正式', '非正式'const key = obj['formOfEmployment'] // 1, 2obj['formOfEmployment'] = hireTypEnmu[key]return Object.values(obj)})
3.7 函数返回
将处理好的数据返回
return { header, data }
3.8 最终完成
这个时候,将这个函数拿到回调函数里面,header和data的数据之前已经有了。
完成代码如下:
hExport() {import('@/vendor/Export2Excel').then(async excel => {// 发ajax请求,获取数据const res = await getEmployee(this.page, this.size)const list = res.data.rowsconsole.log('从后端获取的数据', list)const { header, data } = this.formatData(list)// excel表示导入的模块对象console.log(header, data)excel.export_json_to_excel({// header: ['姓名', '工资'], // 表头 必填header: header, // 表头 必填data: data,filename: 'excel-list', // 文件名称autoWidth: true, // 宽度是否自适应bookType: 'xlsx' // 生成的文件类型})})},
总结:
以上代码经过测试,可以直接使用达成效果。
附:vue-element-admin码云拉取,这个版本是二次开发功能多的那款
# git clone https://github.com/panjiachen/vue-element-admin.git # 从github上拉取代码
$ git clone https://gitee.com/mirrors/vue-element-admin.git # 从码云上拉取
$ cd vue-element-admin # 切换到具体目录下
$ npm install # 安装所有依赖
$ npm run dev # 启动开发调试模式 查看package.json文件的scripts可知晓启动命令
Vue实现导出Excel功能相关推荐
- vue项目导出EXCEL功能
因为一些原因导出EXCEL功能必须前端来做,所以就研究了一下,在网上也找了一些文章来看,有一些不完整,我做完了就记录下来,供大家参考: 1.首先先安装依赖: npm install file-save ...
- VUE中导出Excel功能的实现
一.在上一篇文章中我们已经完成了WebSql的操作,并且初始化了一些数据,那么如何导出这些数据呢? **当然方法有多种,本次我们采用引入Export2Excel.js的方法 1.添加所需依赖 npm ...
- vue+iView实现导入与导出excel功能
vue+iView实现导入与导出excel功能 一,需求: 1,导入导出的必要性 导入与导出在日常项目开发中经常用到, 批量导入功能可以快速插入添加数据. 导出功能则可方便直观明了拿到所需展示的重要数 ...
- vue导出excel功能实现
vue导出excel功能实现 第一步安装依赖包 第二步在项目中assets创建一个新的文件夹js用于存放Blob和Export2Excel两个js文件 第三步在你那个组件中使用 写事件方法 Expor ...
- vue快捷导出excel插件
最开始我使用的是知名度高的xlsx插件,但发现他的免费版没办法修改样式,而配合使用xlsx-style又有许多的问题,需要修改源码,使身为小菜鸟的我十分的难受o(╥﹏╥)o 机缘巧合下找到了pikaz ...
- vue中导出Excel表格
vue中导出Excel表格 项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体 ...
- 假导出Excel功能实现,按CSV格式快速导出功能代码参考(追求代码追求简洁复用)...
我们辛苦录入的数据都希望能有重复利用的价值,一方面这些基础数据需要有数据库级的重复利用,程序级别的重复利用,另一方面还需要直接可以方便的导出倒入的功能比较好,虽然我们自己制作的统计分析功能很强大,但是 ...
- django excel 导出页面_Django Admin中增加导出Excel功能过程解析
在使用Django Admin时, 对于列表我们有时需要提供数据导出功能, 如下图: 增加导出Excel功能 在Django Admin中每个模型的Admin类(继承至admin.ModelAdmin ...
- Java集成Hutool实现导出Excel功能
原文来自:https://www.j1angrui.cn/article/2019081623 在工作中刚完成项目集成Hutool实现导出Excel功能,现在记录一下实现过程,方便以后作为例子参考. ...
最新文章
- poj pku 2528 线段树的基础应用
- verilog基础—规范化参数定义parameter
- html mvc 分页 保存,Asp.net Mvc3 加载cshtml文件自定义分页+ 查询
- Zabbix3.0 安装Graphtree
- 如何在Windows中快速轻松地将文件发送到SkyDrive
- 单例模式——Java
- bzoj2435: [Noi2011]道路修建 树上dp
- java相关是什么,什么是java
- Spring MVC访问页面拦截js和css文件解决方法( No mapping found for HTTP request with URI [/Recruit/js/popper1.15.0.)
- lintcode:Search Insert Position 搜索插入位置
- tftp命令linux,tftp命令使用详解
- 如何提高自制力?自制力差怎么办?
- [poj3580]SuperMemo(splay终结题)
- 6名嫌犯兜卖假苹果手机遭拒改硬抢
- 清越光电科创板IPO过会:年营收6.9亿 高新创投是股东
- 谓词逻辑在计算机中的,谓词逻辑与归纳原理1.ppt
- WIN7系统安装及动态分区详解步骤
- python控制画笔尺寸_python教程系列终章:画笔控制
- java实现打印机打印
- 数据库 存储过程和函数