目标
在前面员工的添加是一个一个进行的,如果一次性添加多个员工信息,这时候就会很繁琐
因此需要我们开发一个批量导入的功能,将用户的信息存储到 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", "总裁办"]
]
最终的代码文章来源:https://www.toymoban.com/news/detail-413436.html
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 }
}
// 导出 Excel
async 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' // 生成的文件类型
})
})
},
}
优化处理方法:数据顺序对应文章来源地址https://www.toymoban.com/news/detail-413436.html
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导入导出的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!