在日常作期间可能会遇到一些需要利用excel文件批量导入数据的项目，例如在我们管理用户的时候，如果新增用户较多一个个添加用户就会比较麻烦，所以可以自己封装一个可以导入excel表格的组件。使用者只要导入表格，组件会自动根据需要一次性导入多条用户信息。可以一下减轻很多工作量，那么这么好用的组件要怎么封装呢？我整理了一些注意事项，快跟我来一起看看吧

提示：以下是本篇文章正文内容，下面案例可供参考

一、为什么要封装excelu组件，excel组件的作用是什么？

封装这个组件是为了让开发效率变得更快，这个组件是基于xlsx插件进行封装的一个组件，主要用于当我们想快速一次性导入多条数据，并且导入的文件正好是excel格式的时候，就可以使用这个组件。

二、使用步骤(导入)

1.下载安装xlsx包

代码如下（示例）：

npm i xlsx 或者 yarn add xlsx

2.封装一个组件

由于类似的功能在vue-element-admin里面已经提供了，所以我们复制已有的代码进行改造，代码地址：代码地址

将vue-element-ui提供导入的功能新建成组件：

import PageTools from './PageTools'
import UploadExcel from './UploadExcel'
export default {install(Vue) {Vue.component('PageTools', PageTools) // 注册工具栏组件Vue.component('UploadExcel', UploadExcel) // 注册导入excel组件}
}

修改一下样，可以按照自己的喜好更改，下面代码仅供参考：

<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>
<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>

3.创建一个路由

{path: '/import',component: Layout,hidden: true, // 隐藏在左侧菜单中children: [{path: '', // 二级路由path什么都不写 表示二级默认路由component: () => import('@/views/import')}]},

4.将封装的组件引入到页面里

<template><upload-excel :on-success="success">
</template>

5.转化导入的数据格式

由于我们后台发请求需要的数据字段是英文的，而我们excel导入的字段是中文，所以需要转化一下：

需要一个数据校验的对象

const userRelations = {'入职日期': 'timeOfEntry','手机号': 'mobile','姓名': 'username','转正日期': 'correctionTime','工号': 'workNumber'}

封装一个方法，进行数据字段的转化

async  success({ header, results }) {// 这里用导入员工做例子const userRelations = {'入职日期': 'timeOfEntry','手机号': 'mobile','姓名': 'username','转正日期': 'correctionTime','工号': 'workNumber'}const arr = [] // 创建一个新的空数组results.forEach(item => { // 循环遍历const userInfo = {}Object.keys(item).forEach(key => {userInfo[userRelations[key]] = item[key]})arr.push(userInfo) })await importEmployee(arr) // 调用导入接口this.$router.back()}

由于excel导入数据的时候，时间格式跟我们定义的不一样,转化出来的时间是一个数字，所以需要定义一个处理时间函数的方法

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)}

逻辑判断代码如下

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是当前的中文名 找到对应的英文名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)}

三.基本使用(excel导出)

由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。

安装导出excel所需要的依赖

npm install xlsx file-saver -S
npm install script-loader -S -D
或者
yarn add xlsx file-saver -S
yarn add script-loader -S -D

相对于导入导出功能不是那么常用所以最好使用懒加载

import('@/vendor/Export2Excel').then(excel => {excel.export_json_to_excel({header: tHeader, //表头 必填data, //具体数据 必填filename: 'excel-list', //非必填autoWidth: true, //非必填bookType: 'xlsx' //非必填})
})

定义一个导出的表头

 const headers = {'手机号': 'mobile','姓名': 'username','入职日期': 'timeOfEntry','聘用形式': 'formOfEmployment','转正日期': 'correctionTime','工号': 'workNumber','部门': 'departmentName'}

调用一下excel.export_json_to_excel方法

excel.export_json_to_excel({header: Object.keys(headers),data,filename: '员工信息表',autoWidth: true,bookType: 'xlsx'

同样的导出excel也需要格式化日期，我使用的是一个过滤器函数，至于如何定义一个过滤器函数可以查看vue的官方文档

四.拓展内容

1.excel导出参数的介绍

2.复杂表头的导出

• multiHeader中的一行表头中的字段的个数需要和真正的列数相等，假设想要跨列，多余的空间需要定义成空串

• const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]

• 如果，我们要实现其合并的效果， 需要设定merges选项

•  const merges = ['A1:A2', 'B1:F1', 'G1:G2']

总结

本篇文章封装了一个组件，方便以后使用，第一次做文章感觉不是很满意，时间有限日后会继续更新的，有什么问题欢迎讨论