导出
准备必需滴插件
npm install xlsx file-saver -S
npm install script-loader -S -D
因为js-xlsx
体积还是很大的,导出功能也不是一个非常常用的功能,所以使用的时候建议使用懒加载。
代码如下:
import('@/vendor/Export2Excel').then(excel => {
excel.export_json_to_excel({
header: tHeader, //表头 必填
data, //具体数据 必填
filename: 'excel-list', //非必填 表格默认的名字
autoWidth: true, //非必填
bookType: 'xlsx' //非必填 表格类型 因为默认的所以不太需要,需要该类型,可以在这修改
})
})
最只要的一件事,就是把表头和数据进行相应的对应,如果数据中的key是英文,想要导出的表头是中文的话,需要将中文和英文做对应.
const 方法名 = {
'中文': 'English',
//需要相对应 不然拿不到对应的数据
}
接下来就是导出excel数据:
import('@/vendor/Export2Excel').then(async excel => { //这是我的代码块 先是导入文件
const { rows } = await getEmployeeList({ page: 1, size: this.page.total })
// 然后调用路由里面的方法,获取页码和所有的数据
const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]
//设置表头的信息
const merges = ['A1:A2', 'B1:F1', 'G1:G2']
//设置单元格
const data = this.formatJson(headers, rows)
//拿到下面的方法 不用this,会报错
excel.export_json_to_excel({
header: Object.keys(headers, rows), // 表头 必填
data, // 具体数据 必填
filename: '员工资料表',
multiHeader, // 复杂表头
merges // 合并选项
})
})
//(里面是头和数据)
formatJson(headers, rows) {
// 首先遍历数组
return rows.map(item => {
return Object.keys(headers).map(key => {
// 判断字符
if (headers[key] === 'timeOfEntry' || headers[key] === 'correctionTime') {
return formatDate(item[headers[key]]) // 返回格式化之前的时间
} else if (headers[key] === 'formOfEmployment') {
// 返回数据
return EmployeeEnum.hireType[item[headers[key]]] || '未知'
}
//得到数据
return item[headers[key]]
})
})
}
处理时间格式的就可以搜索一下(看下面亲们)
接下来就导入的时候了
创建导入路由(没有路由的数据就没有数据)
分析excel导入代码,封装接口(封装导入数据的api接口 )
获取导入的excel数据, 导入excel接口
创建方法
async success({ header, results }) {
// (表格头和数据)
const userRelations = {
'中文': 'English',
}
const newArr = results.map(item => {
const userInfo = {}
Object.keys(userRelations).forEach(key => {
// key是当前的中文名 找到对应的英文名
if (userRelations[key] === 'timeOfEntry' || userRelations[key] === 'correctionTime') {
userInfo[userRelations[key]] = new Date(this.formatDate(item[key], '/'))
// 只有这样才能入数据库
// 因为得到的都是中文 所以要从上面声明的 userRelations 得到相应的英语
return
} else {
userInfo[userRelations[key]] = item[key]
// userInfo[userRelations[key]]是英文,item是上面userRelations的中文 找到匹配的数据
}
})
return userInfo // 得到一个新的数组 最终userInfo变成了全是英文
})
await importEmployee(newArr) // 接受一个新数组
this.$message.success('导入Excel成功')
this.$router.back() // 返回上一个页面
},
}
外加一个格式化时间的代码块
链接附上https://download.csdn.net/download/weixin_51335943/19374293(免费,免费,免费)
// 转化日期格式
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)
}