VUE的Excel导入导出功能
在做人力资源管理的后台项目时,实现了excel表的导入导出功能。用到了vue-element-admin提供的框架(链接地址 ),我们只需要在自己的项目中封装改造即可。
项目中实现excel表的导入与导出的步骤
1.excel导入功能
1.1.excel导入功能需要使用npm包xlsx
,所以需要安装xlsx
插件
npm i xlsx
.将vue-element-admin提供的导入功能新建一个公共组件 ,将组件引入到我们的页面中
(为了让我们的项目每次跳转都跳转到一个统一的页面,我们的项目中封装了单独的路由和页面组件@/views/import/index.vue来放excel导入)
注意:这个页面结构用到了element-ui框架,但是如果用的是其他框架只需要改页面结构,逻辑代码是通用的。
@/components/UploadExcel/index.vue
代码到链接中复制即可,要改动的只有页面结构和样式。(vue-element-admin/index.vue at master · PanJiaChen/vue-element-admin (github.com)https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/UploadExcel/index.vue)
1.2实现excel导出
在我们的import/index.vue组件中,传给UploadExcel/index.vue一个onsuccess方法,在这个方法里面我们可以拿到excel表的header表头和results表格数据。拿到这些数据就可以根据我们的业务需求来转换数据,来实现我们的业务需求逻辑代码。
拿到的数据大概是如下这种:
// 拿到的数据是如下这种,我们要将它转化成我们请求接口中所需要的数据,(因为导入的表头是中文格式,后端需要的是英文,所以需要转换)console.log(header)// ["手机号", "姓名", "入职日期", "转正日期", "工号", ...]console.log(results)// [{入职日期: 'xxx', 姓名: 'xxx', 工号: 'xxx', ...}, {入职日期: 'xxx', 姓名: 'xxx', 工号: 'xxx', ...}]// 后端需要的数据是如下这种// [{timeOfEntry: 'xxx', username: 'xxx', workNumber: 'xxx', ...}, {timeOfEntry: 'xxx', username: 'xxx', workNumber: 'xxx', ...}]
完整代码:
<template><upload-excel :on-success="success" />
</template><script>
// 导入封装的导入excel表组件
import UploadExcel from '@/components/UploadExcel/index'
import { importEmployee } from '@/api/employees'
export default {components: {UploadExcel},data() {},methods: {// 要使用这个组件,可以传入beforeUpload和onSuccess这两个函数// beforeUpload要注意要return一个布尔值// onSuccess这里面可以拿到表格的header(表头)和results(表格内容)// 在我们自己的onSuccess函数里,可以拼接出我们需要的结构的数据async success({ header, results }) {// 拿到的数据是如下这种,我们要将它转化成我们请求接口中所需要的数据console.log(header)// ["手机号", "姓名", "入职日期", "转正日期", "工号", ...]console.log(results)// [{入职日期: 'xxx', 姓名: 'xxx', 工号: 'xxx', ...}]// 1.定义我们需要的表头的映射关系(表头的字段其实就是我们接口中所需要的参数)const userRelations = {'入职日期': 'timeOfEntry','手机号': 'mobile','姓名': 'username','转正日期': 'correctionTime','工号': 'workNumber'}// 2.进行数据转换,实现业务需求var newArr = results.map(item => {const userInfo = {}Object.keys(item).forEach(k => {// key是当前的中文名 找到对应的英文名if (userRelations[k] === 'timeOfEntry' || userRelations[k] === 'correctionTime') {userInfo[userRelations[k]] = new Date(this.formatDate(item[k], '/')) // 只有这样, 才能入库return}userInfo[userRelations[k]] = item[k]})return userInfo})await importEmployee(newArr)this.$message.success('导入成功')this.$router.back() // 回到上一页},formatDate(numb, format) {const time = new Date((numb - 1) * 24 * 3600000 + 1)time.setYear(time.getFullYear() - 70)const year = time.getFullYear() + ''const month = time.getMonth() + 1 + ''const date = time.getDate() - 1 + ''if (format && format.length === 1) {return year + format + month + format + date}return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)}}
}
</script>
2.excel的导出
Excel 的导入导出都是依赖于js-xlsx来实现的。
在 js-xlsx
的基础上又封装了Export2Excel.js来方便导出数据。所以我们可以先下载该js文件到我们的项目目录下(链接地址)
src/vendor/Export2Excel.js
2.1安装导出所需的插件
npm i xlsx file-saver -S script-loader
2.2按需导入引用方法(由于下载的Export2Excel.js文件还挺大的,我们可以用按需导入的方法导入到我们的组件中。然后调用导入文件的导出对象上的方法,这个方法需要我们传入一些参数。)
// 懒加载
import('@/vendor/Export2Excel').then(excel => {// excel是引入文件(也就是@/ventor/Export2Excel)的导出对象excel.export_json_to_excel({header: tHeader, // 表头 必填 []data, // 具体数据 必填 [[], [], ...]filename: 'excel-list', // 导出文件名 非必填 autoWidth: true, // 单元格是否要自适应宽度 非必填 true / falsebookType: 'xlsx' // 导出文件类型 非必填 'xlsx'/'csv'/'txt'等})
})
在导出的函数中,我们需要将我们项目中拿到的数据转化成参数所需要的数据格式
// 拿到的数据是这种// [{ username: 'xxx', mobile: 'xxx', ... }, { username: 'xxx', mobile: 'xxx', ... }]// 要转化的是如下这种// header: ['姓名', '手机号', '入职日期', ...]// data: [['张三', '138xxxxxxxx', '1992-08-04', ...], ['李四', '135xxxxxxxx', '1992-08-04', ...]]
完整代码:
// 导出数据exportData() {// 1.定义表头对应关系const headers = {'姓名': 'username','手机号': 'mobile','入职日期': 'timeOfEntry','聘用形式': 'formOfEmployment','转正日期': 'correctionTime','工号': 'workNumber','部门': 'departmentName'}// 懒加载import('@/vendor/Export2Excel').then(async excel => {// excel是引入文件(也就是@/ventor/Export2Excel)的导出对象// 获取所有的数据const { rows } = await getEmployeeList({ page: 1, size: this.page.total })const data = this.formatJson(headers, rows) // 返回的data就是我们转化后的数据excel.export_json_to_excel({// 要求转出的表头是中文header: Object.keys(headers), // 表头 必填data, // //具体数据 必填filename: 'excel-list', // 非必填autoWidth: true, // 非必填bookType: 'xlsx' // 非必填})// 拿到的数据是这种// [{ username: 'xxx', mobile: 'xxx', ... }, { username: 'xxx', mobile: 'xxx', ... }]// 要转化的是如下这种// header: ['姓名', '手机号', '入职日期', ...]// data: [['张三', '138xxxxxxxx', '1992-08-04', ...], ['李四', '135xxxxxxxx', '1992-08-04', ...]]})},formatJson(headers, rows) {return rows.map(item => {console.log(item)return Object.keys(headers).map(k => {if (headers[k] === 'timeOfEntry' || headers[k] === 'correctionTime') {return formatDate(item[headers[k]]) // 返回格式化之前的时间} else if (headers[k] === 'formOfEmployment') {return EmployeeEnum.hireType[item.formOfEmployment] ? EmployeeEnum.hireType[item.formOfEmployment] : '未知'}return item[headers[k]]})})}
VUE的Excel导入导出功能相关推荐
- SpringBoot中使用Easyexcel实现Excel导入导出功能(三)
导出的数据包含有图片 导出excel表格的数据包含有图片,这种场景比较少.通Easyexcel实现这样的需求,我认为最简便的方法就是使用前面提到的自定义转换器(com.alibaba.excel.co ...
- SpringBoot中使用Easyexcel实现Excel导入导出功能(一)
目录 前言 1.常规导入 2.读取到指定的列 3.读取全部的sheet页 4.日期.数字及其他自定义格式的转换 5.表头有多行的表格读取 6.表头数据的读取 7.单元格内的备注内容读取 前言 exce ...
- SpringBoot 项目实现 Excel 导入导出功能
背景 Excel 导入与导出是项目中经常用到的功能,在 Java 中常用 poi 实现 Excel 的导入与导出.由于 poi 占用内存较大,在高并发下很容易发生 OOM 或者频繁 fullgc,阿里 ...
- tiptop使用java的poi包实现EXCEL导入导出功能
4gl可以调用java的poi包实现EXCEL的导入导出,今天分享一个EXCEL导入的功能! 一:环境搭建 1:poi文件导入 首先下载POI文件(找不到的可以私信我),解压后上传到ERP的服务 ...
- SpringBoot 项目优雅实现 Excel 导入导出功能
背景 Excel 导入与导出是项目中经常用到的功能,在 Java 中常用 poi 实现 Excel 的导入与导出.由于 poi 占用内存较大,在高并发下很容易发生 OOM 或者频繁 fullgc,阿里 ...
- 【飞秋】ASP.NET 之 常用类、方法的超级总结,并包含动态的EXCEL导入导出功能,奉上类库源码
最近闲了,花点几天时间将项目中常用的一些类.方法做了一下总结,希望对大家有用. 实用类:UtilityClass 包含如下方法 判断对象是否为空或NULL,如果是空或NULL返回true,否则返回fa ...
- vue中实现Excel导入导出功能
导入Excel功能 前置条件: 依赖包xlsx npm install xlsx -S 这里提供一个现成的在vue中导入Excel的功能(原作者-花裤衩),代码在最下面,可直接复制. 创建一个文件夹, ...
- 前端 - excel导入 / 导出功能
1. 导入功能 1.1 前端主导(工作大量在前端) 上传excel文件,把excel文件的内容读出来,还原成最基本的行列结构,按后端的接口要求回传过去. 前端读excel文件,调接口 1.2 后端主导 ...
- vue 实现 excel 的导出功能
一 后端代码 1 创建 excel 的导出实体 package com.baiyee.sdgt.vo.cmn;import com.alibaba.excel.annotation.ExcelProp ...
最新文章
- C++:STL标准入门汇总
- 女面试官:我拉链开了你怎么提醒我?
- HTML/CSS——网页SVG ICON(小图标)解决方案
- 读梁宁《一次失控引发的信任评估---我看胡紫薇事件》
- TensorFlow 教程 --进阶指南--3.4数据读取
- 会展管理系统是计算机软件系统,展商管理系统|会展管理信息系统
- 人生值得珍藏的80句话
- MapReduce实战(三)分区的实现
- 11个值得掌握的Java代码性能优化技巧
- 注册双击Ctrl键 (DLL版)
- Ubuntu安装Flash Player
- 阿里云短信验证第三方接口(快速使用)
- DMS专线联通外网测试
- 姚爱红计算机组成原理知识要点,计算机组成原理课程混合教学模式探究
- 微信小游戏排行榜制作(主域子域)
- Pulsar bk报错Unable to allocate memory, exiting bookie
- java简单实现在线资源多线程下载,断点续存,限制最大正在下载数
- 给入门程序员找培训班的一些建议
- 商城小程序线上线下结合能带来什么优势?
- zbb20181221 java,二维码