vue 中 Excel 的导入导出

一、Excel 导入

1. 初始导入

vue-element-admin 的源代码仓库已经提供了组件源码，通过修改template和style来进行样式更改。组件地址 Excel 导入组件(UploadExcel)
该组件需要配合安装 xlsx 插件，即：

$ npm i xlsx

Excel 导入组件(UploadExcel)源代码34行的 this.onSuccess 的参数获得的结果，即为{ header, results }对象。header是实际Excel表格的表头信息组成的数组，results是Excel表格内容组成的数组对象（对象中key值为对应表头，value为对应单元格值）。例如：
header:[‘手机号’,‘姓名’,‘入职日期’,‘转正日期’,‘工号’]
results:[{‘手机号’:‘18941134444’,‘姓名’:‘灰太狼’,‘入职日期’:‘2019/3/11’,‘转正日期’:‘2019/9/11’,‘工号’:‘20089’},{‘手机号’:‘18941134445’,‘姓名’:‘红太狼’,‘入职日期’:‘2018/3/11’,‘转正日期’:‘2020/9/11’,‘工号’:‘20090’}]
对应下表

2. 导入后数据处理

表头数据转换成英文再存储。即处理{ header, results }

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

// 这个 onSuccess 是父组件的
async onSuccess ({ header, results }) {// ! 准备将excel中取到的数据转化成英文的对象const userRelations = {入职日期: 'timeOfEntry',手机号: 'mobile',姓名: 'username',转正日期: 'correctionTime',工号: 'workNumber'}// 数据处理// 转换keyconst newArr = results.map(item => {const arr = {}Object.keys(item).forEach(key => {if (userRelations[key] === 'timeOfEntry' ||userRelations[key] === 'correctionTime') {arr[userRelations[key]] = new Date(this.formatDate(item[key], '/'))return}arr[userRelations[key]] = item[key]})return arr})// addManyEmployees是封装的接口请求函数：拿后端数据await addManyEmployees(newArr)this.$message.success('添加成功')// 跳转页面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))}

二、Excel 导出

1. 初始导出

Export2Excel 导出 Excel
Export2Excel 不仅依赖 js-xlsx 还依赖 file-saver 和 script-loader 。

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

vue-element-admin 的源代码仓库已经提供了Excel组件源码,组件地址 Excel 导出组件(Export2Excel)
如下图：将源码中这个文件夹直接下载拷贝到项目src下。

2. 导出后数据处理

表头数据英文转换成中文再导出。

exportExcel () {// 懒加载import('@/vendor/Export2Excel').then(async excel => {// ! 按顺序对象转数组 最重要的(连接中英文)// 表头信息const headers = {姓名: 'username',手机号: 'mobile',入职日期: 'timeOfEntry',聘用形式: 'formOfEmployment',转正日期: 'correctionTime',工号: 'workNumber',部门: 'departmentName'}// 拿到所有员工信息// getEmployees是封装的接口请求函数：拿后端数据const { rows } = await getEmployees({page: 1,size: this.total})// 将obj转换成数组（按顺序） headers负责顺序const employeesArr = this.formatObjToArr(rows, headers)const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']] // 多行表头const merges = ['A1:A2', 'B1:F1', 'G1:G2'] // 合并表格// Export2Excel组件中导出excel函数excel.export_json_to_excel({header: Object.keys(headers), // 表头 必填 数组multiHeader, // 复杂表头merges, // 合并单元格data: employeesArr, // 具体数据 必填 数组数组 [[],[]]filename: 'excel-list', // 非必填autoWidth: true, // 非必填 单元格是否要自适应宽度bookType: 'xlsx' // 非必填 文件类型})})},
formatObjToArr (rows, headers) {return rows.map(item =>// item是每个员工对象 根据headers的key顺序拿到对应员工属性值Object.keys(headers).map(key => {// 时间处理if (headers[key] === 'timeOfEntry' ||headers[key] === 'correctionTime') {// 这里的 formatDate 是 filter 中的return formatDate(item[headers[key]])}// 聘用形式处理if (headers[key] === 'formOfEmployment') {const obj = employees.hireType.find(it => it.id === item[headers[key]])console.log(obj)// 避免有找不到的情况return obj ? obj.value : '未知'}return item[headers[key]]}))}

上述代码中的 formatDate 函数（时间格式化函数）

export function formatDate(date, fmt = 'yyyy-MM-dd') {if (!(date instanceof Array)) {date = new Date(date)}if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))}const o = {'M+': date.getMonth() + 1,'d+': date.getDate(),'h+': date.getHours(),'m+': date.getMinutes(),'s+': date.getSeconds()}for (const k in o) {if (new RegExp(`(${k})`).test(fmt)) {const str = o[k] + ''fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))}}return fmt
}

vue 中 Excel 的导入导出相关推荐

antd of vue的excel表格导入导出
需求:后台管理系统的某个表格需要导入导出本文基于vue和antdesign 表格导入: 首先需要先下载导入模版,如果导入的表格和项目中的表格不对应的话,将此传给后端之后,后端识别不出来. 下载导入模 ...
vue实现Excel文件导入导出
<template><div class="index" v-loading.fullscreen.lock="fullscreenLoading&qu ...
[Java中实现Excel表导入导出]基于easy-poi和EasyExcel两种方式实现
第一种:基于easy-poi实现Excel导入导出 1.导出Excel表格第一步:在pom文件中导入依赖 <dependen ...
EOS中如何实现导入导出excel文件
阅读原文导入导出excel文件场景描述将数据库表中的数据按照定义的EXCEL模板进行导出,下载到本地: 将EXCEL中的数据导入数据库相应的表中. 场景目标通过本场景,解决EXCEL的导入导出 ...
Excel表格导入导出功能实现
## 01.员工管理-Excel导入功能介绍 ### 目标在前面员工的添加是一个一个进行的,如果一次性添加多个员工信息,这时候就会很繁琐因此需要我们开发一个批量导入的功能,将用户的信息存储到 ex ...
基于vue3+ts+scss的后台管理系统(二)----excel的导入导出
excel的导入导出官网地址 https://docs.sheetjs.com/docs/getting-started/installation/standalone 安装XLSX插件:npm i ...
excel winform 导入导出_强大的 Excel 导入导出工具 hutool
" 最近项目上需要用到 Excel 的导入导出功能,想着之前使用的都有点麻烦,所以结合多方资料,终于找到了这个还算不错的 Excel 处理工具,一起来看" 今日安利好物名为 Hut ...
蓄力-利用POI进行excel的导入导出（包含图片）
这里写自定义目录标题利用POI进行excel的导入导出引入的jar包 excel导入主方法: 将excel里面的图片转成数据 xls格式 xlsx格式将图片数据转成字节流的方式传输到FTP服务 ...
Java EXCEL 表格导入导出(带下拉选-带VLOOKUP函数封装)
Java EXCEL 表格导入导出(带下拉选-带VLOOKUP函数封装) 对于excel Java POI 使用目前简单导出导入功能网上很多,但是对于有下拉选,样式等缺点却是最大硬伤,故此封装一个通 ...

vue 中 Excel 的导入导出

一、Excel 导入

1. 初始导入

2. 导入后数据处理

二、Excel 导出

1. 初始导出

2. 导出后数据处理

vue 中 Excel 的导入导出相关推荐

最新文章

热门文章