vue导入excel表
导入的效果
导出的效果
导入可以前端主导也可以后端主导 主要形式如下
前端主导：前端读excel文件，调接口
上传excel文件，把excel文件的内容读出来，还原成最基本的行列结构，按后端的接口要求回传过去。
后端主导：前端上传excel文件
这里是前端导入，主要使用的 vue-admin-element 的导入方案
1.打开 vue-admin-element 网站 通过路由定位到源码位置
2.与导入相关的代码文件有两个:
- 定义组件：
src/components/UploadExcel/index.vue - 使用组件：
src/views/excel/upload-excel.vue
3.在自己的文件中根据目录新建一个文件,复制代码即可。
/* eslint-disable */
import { saveAs } from 'file-saver'
import XLSX from 'xlsx'
function generateArray(table) {
var out = [];
var rows = table.querySelectorAll('tr');
var ranges = [];
for (var R = 0; R < rows.length; ++R) {
var outRow = [];
var row = rows[R];
var columns = row.querySelectorAll('td');
for (var C = 0; C < columns.length; ++C) {
var cell = columns[C];
var colspan = cell.getAttribute('colspan');
var rowspan = cell.getAttribute('rowspan');
var cellValue = cell.innerText;
if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
//Skip ranges
ranges.forEach(function (range) {
if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
}
});
//Handle Row Span
if (rowspan || colspan) {
rowspan = rowspan || 1;
colspan = colspan || 1;
ranges.push({
s: {
r: R,
c: outRow.length
},
e: {
r: R + rowspan - 1,
c: outRow.length + colspan - 1
}
});
};
//Handle Value
outRow.push(cellValue !== "" ? cellValue : null);
//Handle Colspan
if (colspan)
for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
}
out.push(outRow);
}
return [out, ranges];
};
function datenum(v, date1904) {
if (date1904) v += 1462;
var epoch = Date.parse(v);
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}
function sheet_from_array_of_arrays(data, opts) {
var ws = {};
var range = {
s: {
c: 10000000,
r: 10000000
},
e: {
c: 0,
r: 0
}
};
for (var R = 0; R != data.length; ++R) {
for (var C = 0; C != data[R].length; ++C) {
if (range.s.r > R) range.s.r = R;
if (range.s.c > C) range.s.c = C;
if (range.e.r < R) range.e.r = R;
if (range.e.c < C) range.e.c = C;
var cell = {
v: data[R][C]
};
if (cell.v == null) continue;
var cell_ref = XLSX.utils.encode_cell({
c: C,
r: R
});
if (typeof cell.v === 'number') cell.t = 'n';
else if (typeof cell.v === 'boolean') cell.t = 'b';
else if (cell.v instanceof Date) {
cell.t = 'n';
cell.z = XLSX.SSF._table[14];
cell.v = datenum(cell.v);
} else cell.t = 's';
ws[cell_ref] = cell;
}
}
if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
return ws;
}
function Workbook() {
if (!(this instanceof Workbook)) return new Workbook();
this.SheetNames = [];
this.Sheets = {};
}
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
export function export_table_to_excel(id) {
var theTable = document.getElementById(id);
var oo = generateArray(theTable);
var ranges = oo[1];
/* original data */
var data = oo[0];
var ws_name = "SheetJS";
var wb = new Workbook(),
ws = sheet_from_array_of_arrays(data);
/* add ranges to worksheet */
// ws['!cols'] = ['apple', 'banan'];
ws['!merges'] = ranges;
/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;
var wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: false,
type: 'binary'
});
saveAs(new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}), "test.xlsx")
}
export function export_json_to_excel({
multiHeader = [],
header,
data,
filename,
merges = [],
autoWidth = true,
bookType = 'xlsx'
} = {}) {
/* original data */
filename = filename || 'excel-list'
data = [...data]
data.unshift(header);
for (let i = multiHeader.length - 1; i > -1; i--) {
data.unshift(multiHeader[i])
}
var ws_name = "SheetJS";
var wb = new Workbook(),
ws = sheet_from_array_of_arrays(data);
if (merges.length > 0) {
if (!ws['!merges']) ws['!merges'] = [];
merges.forEach(item => {
ws['!merges'].push(XLSX.utils.decode_range(item))
})
}
if (autoWidth) {
/*设置worksheet每列的最大宽度*/
const colWidth = data.map(row => row.map(val => {
/*先判断是否为null/undefined*/
if (val == null) {
return {
'wch': 10
};
}
/*再判断是否为中文*/
else if (val.toString().charCodeAt(0) > 255) {
return {
'wch': val.toString().length * 2
};
} else {
return {
'wch': val.toString().length
};
}
}))
/*以第一行为初始值*/
let result = colWidth[0];
for (let i = 1; i < colWidth.length; i++) {
for (let j = 0; j < colWidth[i].length; j++) {
if (result[j]['wch'] < colWidth[i][j]['wch']) {
result[j]['wch'] = colWidth[i][j]['wch'];
}
}
}
ws['!cols'] = result;
}
/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;
var wbout = XLSX.write(wb, {
bookType: bookType,
bookSST: false,
type: 'binary'
});
saveAs(new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}), `${filename}.${bookType}`);
}
这个组件引入了XLSX包， 需要给它提供两个props：
- beforeUpload：上传之前的函数
- onSuccess: 成功调用之后的函数 4.需要下包：因为我们下的包要与vue提供的版本一致 所以我这里下载的是 0.14.1版本的
yarn add xlsx@0.14.1
如果想要自己研究一下的。可以打开这个网址,直接搜索excel导入
导入表格具体代码实现
可以将uploadExcel组件注册为全局
import PageTools from './PageTools'
import UploadExcel from './UploadExcel'
export default {
// 插件的初始化, 插件给你提供的全局的功能, 都可以在这里配置
install(Vue) {
// 进行组件的全局注册
Vue.component('PageTools', PageTools) // 注册工具栏组件
Vue.component('UploadExcel', UploadExcel) // 注册导入excel组件
}
}
配置路由 这个路由不需要 进行权限控制,直接定义为静态路由即可,
import Layout from '@/layout'
export default {
path: '/employees', // 路径
component: Layout, // 组件
children: [
{
name: 'import', // 给路由规则加一个name
path: 'import', // 这里当二级路由的path什么都不写的时候 表示当前路由为默认路由直接渲染对应组件
component: () => import('@/views/employees/components/import.vue'),
// 路由元信息 其实就是存储数据的对象 我们可以在这里放置一些信息
meta: { title: '员工管理', icon: 'people' },
hidden: true
}
]
}
使用组件
<template>
<upload-excel :on-success="handleSuccess" />
</template>
<script>
export default {
name: 'Import',
methods: {
handleSuccess({ header, results }) {
console.log(header, results)
}
}
}
</script>
上传表格 观察handleImageSuccess的值 输出的值为
handleSuccess({ header, results }) {
// header 标题
// ['姓名','手机号']
// results excel表格的内容
// [ {'姓名'：'小张'， '手机号': '13712345678'}, {.....} ]
console.log(header, results)
}
excel导入插件本质：把excel经过分析转换成js能够识别的常规数据，拿到数据我们可以进行任何操作
调用接口进行excel上传的重点其实是数据的处理，我们需要按照接口的要求，把excel表格中经过插件处理好的数据处理成后端接口要求的格式.
处理内容包含:
- 字段中文转英文。excel中读入的是
姓名,而后端需要的是username - 日期处理。从excel中读入的时间是一个number值，而后端需要的是标准日期。
因为excel时间是从1900年开始计数，与js的1970年开始计数不同。所以需要进行转换。
export function formatExcelDate(numb, format = '/') {
const time = new Date(
(numb - 25567) * 24 * 3600000 -
5 * 60 * 1000 -
43 * 1000 -
24 * 3600000 -
8 * 3600000
)
time.setYear(time.getFullYear())
const year = time.getFullYear() + ''
const month = time.getMonth() + 1 + ''
const date = time.getDate() + ''
if (format && format.length === 1) {
return year + format + month + format + date
}
return (
year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
)
}
具体导入代码如下所示:
<template>
<div>
<UploadExcel :on-success="handleImageSuccess" />
</div>
</template>
....
methods: {
async handleImageSuccess({ results, header }) {
//results指的是表头 打印出来可以看到是这样的results指的是你导入的表格的内容
console.log(results, header)
/* 处理数据 */
const mapInfo = {
入职日期: 'timeOfEntry',
手机号: 'mobile',
姓名: 'username',
转正日期: 'correctionTime',
工号: 'workNumber',
部门: 'departmentName',
聘用形式: 'formOfEmployment'
}
// 需要循环表头
// 循环 然后返回一个新数组
var newResults = results.map(item => {
// 定义一个空的对象
var obj = {}
// 获取中文键
var chEnkey = Object.keys(mapInfo)
// 循环中文键 获取到英文键
chEnkey.forEach(it => {
// 吧英文键 赋值给 enkey
// mapInfo[it] 中文键 对应的英文值
var enkey = mapInfo[it]
// 重新定义每一项的值
// 判断 时间是否一致 如果他是这两个时间的话 就进行格式转换 否则就不转换
// 解决excel 时间转换问题 formatExcelDate
if (enkey === 'timeOfEntry' || enkey === 'correctionTime') {
obj[enkey] = new Date(formatExcelDate(item[it]))
} else {
obj[enkey] = item[it]
}
})
return obj
})
// console.log(newResults)
await importEmployee(newResults)
}
}
---Object.keys() 遍历自身(对象)可枚举的属性(可枚举 非继承属性) 该方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中的属性的排列顺序和使用for...in遍历该对象时返回的顺序一致(两者的区别是 for .. in 还会枚举其原型链上的属性)。
导入的(results)
-----newResults (转换后的)数组是这样的
上传表格具体流程：(是本地硬盘上传到网页内存(不是传给服务器))
