Excel导入导出

导入

用vue-element-admin上的模板，地址：https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/UploadExcel/index.vue，直接复制然后根据需求更改样式，

下载xlsx插件，因为模板组件依赖这个插件，

组件接收一个success函数，返回值的第一个是要导入的表格的表头，第二个是表格每一行的内容(一个个对象组成的数组)，所以在引用组件的时候要定义一个函数传递进去，并解构接收两个值，然后按照需求处理数据的格式

导出

vue-element-admin提供了导出的功能模块，直接把文件复制项目目录下就行，然后下载文件依赖的插件

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

可以在需要导出Excel表格的页面用懒加载的方式引入，返回的是一个Promise对象，成功的回调的值是文件的实例对象，包括了文件默认导入的所有方法，一般使用export_json_to_excel方法，然后把数据处理成要求的数据格式传入就可以

import('@/vendor/Export2Excel').then(excel => { // excel就是文件的实例对象
  excel.export_json_to_excel({
    header: , //表头 必填
    data, //具体数据 必填
    filename: 'excel-list', // 导出的文件名 非必填
    autoWidth: true, // 是否要自适应宽度 非必填
    bookType: 'xlsx' // 导出的格式 非必填
  })
})

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

 

复杂表头的导出

vue-element-admin 提供的导出方法中有 multiHeader和merges 的参数

参数	说明	类型	可选值	默认值
multiHeader	复杂表头的部分	Array	/	[[]]
merges	需要合并的部分	Array	/	[]

multiHeader里面是一个二维数组，里面的一个元素是一行表头，假设你想得到一个如图的结构

 

mutiHeader应该这样定义

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

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

它主要对应的是标准的表头

const header = ['姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门']

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

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

merges的顺序是没关系的，只要配置这两个属性，就可以导出复杂表头的excel了