Vue中如何实现Excel导入导出

目标

在前面员工的添加是一个一个进行的，如果一次性添加多个员工信息，这时候就会很繁琐
因此需要我们开发一个批量导入的功能，将用户的信息存储到 excel 中然后进行批量导入

实现方式

1. 分析 vue-element-admin 中的导入方案

在vue-element-admin中，大佬已经封装好了Excel的导入导出方案，我们需要引入借鉴,拷贝 vue-element-admin 中提供的 excel 导入功能组件到自己项目中

讲解

导入相关的代码文件有两个：

使用组件：src/views/excel/upload-excel.vue
定义组件：src/components/UploadExcel/index.vue // 注册全局组件
- 最新版的xlsx包, 导出的方式改变了, 所以我们要修改UploadExcel组件代码

// import XLSX from 'xlsx'
// 上面改成下面这样, 按需引入所有然后形成一个对象保存到XLSX变量上
import * as XLSX from 'xlsx'

Excel 的导入导出都是依赖于js-xlsx来实现的，
在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据
由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader，因此我们需要提前安装
- file-saver 用户在客户端保存文件的
- script-loader 用于在前端执行一次js脚本文件的

npm install xlsx file-saver -S
npm install script-loader -S -D

tips:-S和-D (默认就是–save不写即可, -S -D(是–save-dev)

2. Excel导入

目标

数据格式转换：将 excel 解析好的数据经过处理后，转成可以传给接口调用的数据

分析

调用接口进行excel上传的重点其实是数据的处理
按照接口的要求，把 excel 表格中经过插件处理好的数据处理成后端接口要求的格式

实现

按接口要求，处理excel导入的数据。处理内容包含：

字段中文转英文。excel中读入的是姓名,而后端需要的是username
日期处理。从excel中读入的时间是一个 number 值，而后端需要的是标准日期

代码（逻辑很重要，多写几遍）

methods: {// 将表格中的数据进行格式化transExcel(results) {const userRelations = {'入职日期': 'timeOfEntry','手机号': 'mobile','姓名': 'username','转正日期': 'correctionTime','工号': 'workNumber','部门': 'departmentName','聘用形式': 'formOfEmployment'}return results.map(item => {const obj = {}// 1. 取出这个对象所有的属性名： ['姓名'， ‘手机号’]// 2. 遍历这个数组，通过 中文名去 userRelations 找对应英文名， 保存值const contentKeys = Object.keys(item)contentKeys.forEach(key => {// 找到对应的英文名const transKey = userRelations[key]// 如果格式化的是时间，需要进行转换if (transKey === 'timeOfEntry' || transKey === 'correctionTime') {// 表格的天数->转成日期对象const transDate = new Date(formatExcelDate(item[key]))// 再把日期对象转成->'年-月-日'保存到对象属性里给后台obj[transKey] = parseTime(transDate, '{yyyy}-{mm}-{dd}')} else {obj[transKey] = item[key]}})return obj})},// 导入成功以后的回调函数handleSuccess({ results, header }) {const arr = this.transExcel(results)console.log('转换之后的格式是', arr)}
}

上面用到的日期处理函数在 utils/index.js 中定义如下

// 把excel文件中的日期格式的内容转回成标准时间
export function formatExcelDate(numb, format = '/') {const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000)time.setYear(time.getFullYear())const year = time.getFullYear() + ''const month = time.getMonth() + 1 + ''const date = time.getDate() + ''if (format && format.length === 1) {return year + format + month + format + date}return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
}

小结表格读出中文key对象, 如何转换英文key的对象的?

准备一个中文key和英文key映射关系的对象, 然后遍历数据里所有中文key拿出来, 换取英文key
再准备一个新的对象, 组织英文key和value值

调用接口

// 导入成功以后的回调函数
async handleSuccess({ results, header }) {const arr = this.transExcel(results)const res = await importEmployeeAPI(arr).catch(err => err)if (!res.success) return this.$message.error(res.message)this.$router.back()this.$message.success('操作成功')
}

3. Excel导出

分析

把vue-element-admin 中的导出功能，迁移本项目
使用静态数据实现基础的导出功能（先不使用从接口获取的数据）

给导出按钮添加点击事件
<el-button type="success" size="small" @click="downloadExcel">导出excel</el-button>

// 导出excel按钮->点击事件
downloadExcel() {import('@/vendor/Export2Excel').then(excel => {// excel表示导入的模块对象excel.export_json_to_excel({header: ['姓名', '工资'], // 表头 必填data: [['刘备', 100],['关羽', 500]], // 具体数据 必填filename: 'excel-list', // 文件名称autoWidth: true, // 宽度是否自适应bookType: 'xlsx' // 生成的文件类型})})
}

以上代码表示:

当我们正式点击导出按钮之后，才去加载 vendor 文件夹中的Export2Excel模块
import 方法执行完毕返回的是一个 promise 对象，在then方法中我们可以拿到使用的模块对象
重点关注 data 的配置部分，我们发现它需要一个严格的二维数组

Excel导出参数说明：

参数	说明	类型	可选值	默认值
header	导出数据的表头	Array	/	[]
data	导出的具体数据	Array	/	[[]]
filename	导出文件名	String	/	excel-list
autoWidth	单元格是否要自适应宽度	Boolean	true / false	true
bookType	导出文件类型	String	xlsx, csv, txt, more	xlsx

Excel导出尝试实现

分析：

从后台重新获取数据（这样才能确保是最新的）
对数据的格式进行转换（后端给的数据字段名都是英文的），以用来做导出

核心在于把后端接口返回的数据转成 Export2Excel 这个插件需要的格式

准备表头header数据
因为接口中返回的数据中的key是英文，而我们期望导出的表头是中文，所以提前准备中文和英文的映射关系

const map = {'id': '编号','password': '密码','mobile': '手机号','username': '姓名','timeOfEntry': '入职日期','formOfEmployment': '聘用形式','correctionTime': '转正日期','workNumber': '工号','departmentName': '部门','staffPhoto': '头像地址'
}

具体的表格数据我们需要通过接口从后端获取回来，难点在于如何把后端返回的数据处理成Export2Excel插件需求的二维数组格式。

示例

const dataArr = [["13600000001", "吕勇锐", "1992-08-04", "正式", "2020-01-01", "0001", "总裁办"]["13600000002", "袁永安", "1993-08-04", "正式", "2020-01-01", "0002", "总裁办"]
]

最终的代码

methods: {// 处理数据的方法transData(rows) {// 写代码const map = {'id': '编号','password': '密码','mobile': '手机号','username': '姓名','timeOfEntry': '入职日期','formOfEmployment': '聘用形式','correctionTime': '转正日期','workNumber': '工号','departmentName': '部门','staffPhoto': '头像地址'}const headerKeys = Object.keys(rows[0])const header = headerKeys.map(item => {return map[item]})const data = rows.map(obj => {return Object.values(obj)})return { header, data }}// 导出 Excelasync downloadExcel() {const res = await getEmployeeList()// 调用上面定义的方法，处理返回的数据const excelObj = this.transData(res.data.rows)import('@/vendor/Export2Excel').then(excel => {// excel表示导入的模块对象excel.export_json_to_excel({header: excelObj.header, // 表头 必填data: excelObj.data, // 具体数据 必填filename: '员工列表', // 文件名称autoWidth: true, // 宽度是否自适应bookType: 'xlsx' // 生成的文件类型})})},
}

优化处理方法：数据顺序对应

transData(rows) {// 考虑顺序 (页面上列保持一致顺序)// 4.0 准备一个列表头中文数组 (8个)const headerArr = ['序号', '姓名', '头像', '手机号', '工号', '聘用形式', '部门', '入职时间']// 4.1 数据key的映射关系(思路: 遍历上边数组里按照顺序, 取出中文的名字, 但是对应数组值的数组, 要从英文key对象中取出value值, 我要用中文key换到英文key然后去取到值)const myObj = {// 序号可以等遍历的时候直接用索引值, 而不是来自于英文对象里'姓名': 'username','头像': 'staffPhoto','手机号': 'mobile','工号': 'workNumber','聘用形式': 'formOfEmployment','部门': 'departmentName','入职时间': 'timeOfEntry'}// 4.2 按照顺序, 形成值的数组 (明确目标->想要数据结构->读代码(每个变量意思)读2-3遍->仿写3-5遍)const resultArr = rows.map((item, index) => {const valueArr = [] // 值小数组headerArr.forEach(zhKey => {if (zhKey === '序号') {valueArr.push(index + 1)} else {const enKey = myObj[zhKey]valueArr.push(item[enKey])}})return valueArr})return { header: headerArr, data: resultArr }}

Vue中如何实现Excel导入导出相关推荐

SpringBoot中使用Easyexcel实现Excel导入导出功能（三）
导出的数据包含有图片导出excel表格的数据包含有图片,这种场景比较少.通Easyexcel实现这样的需求,我认为最简便的方法就是使用前面提到的自定义转换器(com.alibaba.excel.co ...
SpringBoot中使用Easyexcel实现Excel导入导出功能（一）
目录前言 1.常规导入 2.读取到指定的列 3.读取全部的sheet页 4.日期.数字及其他自定义格式的转换 5.表头有多行的表格读取 6.表头数据的读取 7.单元格内的备注内容读取前言 exce ...
jeesite html导入excel,JeeSite中Excel导入导出
在各种管理系统中,数据的导入导出是经常用到的功能,通常导入导出以Excel.CSV格式居多.如果是学习的过程中,最好是自己实现数据导入与导出的功能,然而在项目中,还是调用现成的功能比较好.近期一直使用 ...
vue+xlsx实现表格的导入导出:
文章目录一.vue前端使用xlsx和 xlsx-style 导出excel,并修改样式: 1.改造后效果: 2.实现: 3.引入库xlsx-style 4.excelUtil.js文件二.前端xl ...
注解+反射优雅的实现Excel导入导出（通用版）
以下文章来源方志朋的博客,回复"666"获面试宝典来源:blog.csdn.net/youzi1394046585/ article/details/86670203 日常在做后 ...
java超级简单到爆的Excel导入导出(easypoi)
场景: 在日常工作中,excel导入导出,是十分常见的,有两种主流的技术,一种是jxl,另一种是poi,而easypoi就是对poi进行了封装,使得导入导出变得更加的简单,阿里巴巴也有封装的工具名叫E ...
一个基于POI的通用excel导入导出工具类的简单实现及使用方法
前言: 最近PM来了一个需求,简单来说就是在录入数据时一条一条插入到系统显得非常麻烦,让我实现一个直接通过excel导入的方法一次性录入所有数据.网上关于excel导入导出的例子很多,但大多相互借鉴. ...
easyexcel 设置标题_EasyExcel，让 excel 导入导出更加简单
做积极的人,而不是积极废人! 来源:jianshu.com/p/8f3defdc76d4EasyExcelGitHub上的官方说明快速开始maven仓库地址导入导出总结 EasyExcel 在做exc ...
excel winform 导入导出_强大的 Excel 导入导出工具 hutool
" 最近项目上需要用到 Excel 的导入导出功能,想着之前使用的都有点麻烦,所以结合多方资料,终于找到了这个还算不错的 Excel 处理工具,一起来看" 今日安利好物名为 Hut ...
easypoi 多sheet导入_程序员接私活利器玩转excel导入导出
为什么会写Easypoi 以前的以前(岁月真TMD的快)我虽然写了不少代码但还是很少写poi,然后跳到一家公司之后就和业务人员聊上了,来这个需要个报表,这个报表样式是这样的,这个表头是这样的,就这样我 ...