execl导入
一、组件封装
- 首先封装以导入excel点击上传的组件,类似功能,vue-element-admin已经提供了,地址:https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/UploadExcel/index.vue
- 安装xlsx插件: npm i xlsx
- 将vue-element-admin提供的导入功能新建一个组件
- 注册全局的导入excel组件,并修改样式和布局
- 根据自己的需要,修改组件样式和布局
import UploadExcel from './UploadExcel'
export default {
install(Vue) {
Vue.component('UploadExcel', UploadExcel) // 注册导入excel组件
}
}
二、建立公共导入的页面路由
-
创建import路由组件
src/views/import/index.vue <template> <!-- 公共导入组件 --> <upload-excel :on-success="success" /> </template>
-
新建一个公共的导入页面 挂载路由
src/router/index.js { path: '/import', component: Layout, hidden: true, // 隐藏在左侧菜单中 children: [{ path: '', // 二级路由path什么都不写 表示二级默认路由 component: () => import('@/views/import') }] },
三、分析excel导入代码,封装接口
首先看到有两个按钮,分别绑定了点击事件;
点击上传@click=“handleUpload” ,这个方法里面refs 取到了dom实例–>input,点击上传按钮的时候,会触发这个input 的点击事件, 并且这个input是隐藏的。再看到input中有一个change事件:是选择了一个文件之后触发,只接收accept=".xlsx, .xls"类型。
在 change事件handleClick(e)中,e表示事件参数;e.target指的是input;e.target.files就是你选择的文件(可使用断点查看)。如果文件存在,就把这个文件给了upload方法,作为参数传递进去。
upload(rawFile):在这个方法中,首先把input的value设置为null,然后如果没有beforeUpload(props函数),就调用readerData(rawFile)方法;readerData里面用js原生读取文件的形式, new了一个FileReader js原生读取文件的一个对象。reader.onload 会要等reader.readAsArrayBuffer 执行完毕才进入到里面的回调函数,回调函数中会解析文件中的数据,header:得到一个数组,是文件的表头标题[‘手机号’,‘姓名’,…];resultsr:得到一个数组对象,包含每一条数据[{‘手机号’:1212122122,‘姓名’:‘嘻嘻’,…},{}];拿到数据之后 执行generateData({ header, results }) 方法,最后执行this.onSuccess && this.onSuccess(this.excelData):先判断它存在不存在,存在的话就执行this.onSuccess(this.excelData),那onSuccess又是props传入的函数,那么就是你在使用这个组件的时候 ,传递了一个函数叫onSuccess,就会传出一个对象this.excelData,对象里有header和results。
在导入组件中,传入一个onSuccess,在methods里面绑定一个方法success,里面导入一个对象success({ header, results }) ,拿到execl数据,但是数据表头标题是中文,后台不认识,所以等下在success方法中转换数据。
<upload-excel :on-success="success" />
<template>
<div class="upload-excel">
<div class="btn-upload">
<el-button :loading="loading" size="mini" type="primary" @click="handleUpload">
点击上传
</el-button>
</div>
<input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
<div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
<i class="el-icon-upload" />
<span>将文件拖到此处</span>
</div>
</div>
</template>
<script>
import XLSX from 'xlsx'
export default {
props: {
beforeUpload: Function, // eslint-disable-line
onSuccess: Function// eslint-disable-line
},
data() {
return {
loading: false,
excelData: {
header: null,
results: null
}
}
},
methods: {
generateData({ header, results }) {
this.excelData.header = header
this.excelData.results = results
this.onSuccess && this.onSuccess(this.excelData)
},
handleDrop(e) {
e.stopPropagation()
e.preventDefault()
if (this.loading) return
const files = e.dataTransfer.files
if (files.length !== 1) {
this.$message.error('Only support uploading one file!')
return
}
const rawFile = files[0] // only use files[0]
if (!this.isExcel(rawFile)) {
this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
return false
}
this.upload(rawFile)
e.stopPropagation()
e.preventDefault()
},
handleDragover(e) {
e.stopPropagation()
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
},
handleUpload() {
this.$refs['excel-upload-input'].click()
},
handleClick(e) {
const files = e.target.files
const rawFile = files[0] // only use files[0]
if (!rawFile) return
this.upload(rawFile)
},
upload(rawFile) {
this.$refs['excel-upload-input'].value = null // fix can't select the same excel
if (!this.beforeUpload) {
this.readerData(rawFile)
return
}
const before = this.beforeUpload(rawFile)
if (before) {
this.readerData(rawFile)
}
},
readerData(rawFile) {
this.loading = true
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = e => {
const data = e.target.result
const workbook = XLSX.read(data, { type: 'array' })
const firstSheetName = workbook.SheetNames[0]
const worksheet = workbook.Sheets[firstSheetName]
const header = this.getHeaderRow(worksheet)
const results = XLSX.utils.sheet_to_json(worksheet)
this.generateData({ header, results })
this.loading = false
resolve()
}
reader.readAsArrayBuffer(rawFile)
})
},
getHeaderRow(sheet) {
const headers = []
const range = XLSX.utils.decode_range(sheet['!ref'])
let C
const R = range.s.r
/* start in the first row */
for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
/* find the cell in the first row */
let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
headers.push(hdr)
}
return headers
},
isExcel(file) {
return /\.(xlsx|xls|csv)$/.test(file.name)
}
}
}
</script>
<style scoped lang="scss">
.upload-excel {
display: flex;
justify-content: center;
margin-top: 100px;
.excel-upload-input{
display: none;
z-index: -9999;
}
.btn-upload , .drop{
border: 1px dashed #bbb;
width: 350px;
height: 160px;
text-align: center;
line-height: 160px;
}
.drop{
line-height: 80px;
color: #bbb;
i {
font-size: 60px;
display: block;
}
}
}
</style>
封装一个导入员工的api接口
/** *
* 封装一个导入员工的接口
*
* ***/
export function importEmployee(data) {
return request({
url: '/sys/user/batch',
method: 'post',
data
})
}
四、实现excel导入
由于在success方法中 获取到的header,results中的数据都是中文,所以将在success方法中将中文转换成英文。后台数据新增员工的属性和表头标题是一致的。
首先需要定义一个对应关系userRelations对象,遍历results数组对象,item是每一条数据对象,Object.key拿到item(每一条数据对象:入职日期: 43535,姓名: “高大山”,工号: 20089…)中的属性键([手机号,姓名…])对并遍历,但是现在遍历到的key都是中文,userRelations[key]拿到的是timeOfEntry…,在 userInfo[userRelations[key]] = item[key] 存入userRelations对象中,将原来中文对应的值,赋值给原来英文对应的值,然后再push 到 arr数组中。
引入导入员工的接口,接收一个arr数组,导入成功后,返回到上一个页面
还需在页面中用参数来判断,是否是导入员工 type: this.$route.query.type
当excel中有日期格式的时候,实际转化的值为一个数字:在中文转换成英文的时候判断一下,如果当前的值是(timeOfEntry)入职日期和(correctionTime)转正日期 , 就this.formatDate(item[key],但又因为后端接口 限制了 不能是字符串,所以要转化成时间类型new Date(this.formatDate(item[key], ‘/’)) 只有这样,才能入库
methods: {
async success({ header, results }) {
// 如果是导入员工
if (this.type === 'user') {
const userRelations = {
'入职日期': 'timeOfEntry',
'手机号': 'mobile',
'姓名': 'username',
'转正日期': 'correctionTime',
'工号': 'workNumber'
}
const arr = []
// 遍历所有数组
results.forEach(item => {
// 需要将每一条数据里面的中文都换成英文
const userInfo = {}
Object.keys(item).forEach(key => {
// key是当前的中文名 找到对应的英文名
// userInfo[userRelations[key]] = item[key]
if (userRelations[key] === 'timeOfEntry' || userRelations[key] === 'correctionTime') {
userInfo[userRelations[key]] = new Date(this.formatDate(item[key], '/')) // 只有这样,才能入库
return
}
userInfo[userRelations[key]] = item[key]
})
// 最终userInfo变成了全是英文
arr.push(userInfo)
})
await importEmployee(arr) // 调用导入接口
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)
}
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NDkmhoMq-1622874430036)(C:\Users\笑眼\AppData\Roaming\Typora\typora-user-images\image-20210604201645473.png)]
excel导出
一、execl导出参数的介绍
vue-element-admin提供了导出的功能模块vendor文件夹里面有两个js文件 一个导出的excel(Export2Excel.js),一个是导出的压缩包(Export2Zip.js),放置到src目录下
需要导出 的参数如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U5DBpr6T-1622874430041)(C:\Users\笑眼\AppData\Roaming\Typora\typora-user-images\image-20210604232224344.png)]
给导出按钮注册一个事件exportData() ,通过懒加载的方式,引入excel导出的功能模块包 import(’@/vendor/Export2Excel’),excel对象里面有个方法export_json_to_excel(),方法里面传入的参数里面的data也要转化成中文,并和表头的顺序对应上。
那么这些参数数据从哪里来?header(拿到所有的key属性键名);data(获取到所有的数据,调用获取员工的接口,传入页码、每页条数、总数,拿到所有的数据行);但是rows获取到的数据格式不对,所以就写个方法去转化formatJson(将表头数据和数据进行对应),方法里需要传入参数headers,rows,然后返回一个转化好格式的data,这个data也就是要导出结果(数组套数组[[]],没转化之前是数组套对象[{}])
formatJson: 遍历rows(item是一个对象,{mobile:132111,username:‘张三’}),把这个对象转化成数组;对应着headers里面的数据,Object.keys(headers):拿到所有的[“手机号”, “姓名”, “入职日期” 。。],再去遍历这个标题,通过这个key去找到他所对应的英文名(headers[key]);item[headers[key]]拿到值(例如:132111),并return
处理导出时间格式问题:在导出的时候,需要判断一下字段headers[key]是否是timeOfEntry和correctionTime,如果是就调用formatData格式化时间的方法,把日期传入进去并return,
聘用形式格式问题:判断字段headers[key]是否是formOfEmployment,然后进行数据比对,引入数据在api/constant/employees.js中,用find去查找里面的id 是否是 等于 item[headers[key]] ,如果找到了obj就不为null,不为空的话,就返回obj的vaule值,否则显示未知。将结果返回
复杂表头的导出:vue-element-admin提供的导出方法中有multlHeader和mergers ,应该这样定义,如下:
复杂表头:const multiHeader = [[‘姓名’, ‘主要信息’, ‘’, ‘’, ‘’, ‘’, ‘部门’]]
合并: const merges = [‘A1:A2’, ‘B1:F1’, ‘G1:G2’]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-adR4tvnz-1622874430044)(C:\Users\笑眼\AppData\Roaming\Typora\typora-user-images\image-20210605140819637.png)]
exportData() {
const headers = {
'姓名': 'username',
'手机号': 'mobile',
'入职日期': 'timeOfEntry',
'聘用形式': 'formOfEmployment',
'转正日期': 'correctionTime',
'工号': 'workNumber',
'部门': 'departmentName'
}
// 导出excel
import('@/vendor/Export2Excel').then(async excel => {
// excel 是引入文件的导出对象
// 导出header从哪里来
// data从哪里来
// 现在没有一个接口获取所有的数据
// 获取员工的接口 页码 每页条数 100 1 10000
const { rows } = await getEmployeeList({ page: 1, size: this.page.total })
const data = this.formatJson(headers, rows) // 返回的data就是 要导出的结构
const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]
const merges = ['A1:A2', 'B1:F1', 'G1:G2']
excel.export_json_to_excel({
header: Object.keys(headers),
data,
filename: '员工工资表',
multiHeader, // 复杂表头
merges// 合并选项
})
// excel.export_json_to_excel({
// header: ['姓名', '工资'],
// data: [['张三', 3000], ['李四', 5000]],
// filename: '员工工资表'
// })
// [{ username: '张三',mobile: 13112345678 }] => [[]]
// 要转化 数据结构 还要和表头的顺序对应上
// 要求转出的标题是中文
})
},
// 将表头数据和数据进行对应
// [{}] => [[]]
formatJson(headers, rows) {
return rows.map(item => {
// item是一个对象 {mobile:132111,username:'张三'}
// ["手机号", "姓名", "入职日期" 。。]
return Object.keys(headers).map(key => {
// 需要判断 字段
if (headers[key] === 'timeOfEntry' || headers[key] === 'correctionTime') {
// 格式化日期
return formatDate(item[headers[key]])
} else if (headers[key] === 'formOfEmployment') {
const obj = EmployeeEnum.hireType.find(obj => obj.id === item[headers[key]])
return obj ? obj.value : '未知'
}
return item[headers[key]]
})
// ["132", '张三’, ‘’,‘’,‘’d]
})
// return rows.map(item => Object.keys(headers).map(key => item[headers[key]]))
// 需要处理时间格式问题
}