场景
适用于首行为表头的excel表(多行表头不适用),可将excel表中的数据,由前端传入后台进行操作,而无需后台读取excel表
案例
链接:https://pan.baidu.com/s/1_Yw–1-4yeliPJOtpg-pmQ
提取码:zc3u
代码详情
实现此功能需要xlsx.full.min.js,案例链接中附带,也可用以下链接
链接:https://pan.baidu.com/s/1c8NLEjYabTGf1I0nNa0Ctg
提取码:o6s0
附:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
<meta name="description" content="" />
<meta name="Keywords" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<title>前端解析excel转为数组</title>
<script type="text/javascript" src='./xlsx.full.min.js'></script>
</head>
<body>
<div style="margin-bottom: 30px;">文件:
<input type="file" id="file" onchange="getDateList()"></div>
<textarea id='dataList' style="height: 600px;width: 1000px;"></textarea>
</body>
<script>
//首先监听input框的变动,选中一个新的文件会触发change事件
function getDateList() {
//获取到选中的文件
var empty = document.getElementById('file');
var file = document.querySelector("#file").files[0];
var type = file.name.split('.');
if(type.length == 0 ){
return
}
if ( type[type.length - 1] !== 'xlsx' && type[type.length - 1] !== 'xls') {
alert('只能选择excel文件导入');
empty.outerHTML = empty.outerHTML//清空input
return
}
const reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = (e) => {
const data = e.target.result;
const zzexcel = window.XLS.read(data, {
type: 'binary'
});
const result = [];
for (let i = 0; i < zzexcel.SheetNames.length; i++) {
const newData = window.XLS.utils.sheet_to_json(zzexcel.Sheets[zzexcel.SheetNames[i]]);
result.push(...newData)
}
if(result == null || result.length == 0){
alert('导入的excel表无数据')
empty.outerHTML = empty.outerHTML;//清空input
return
}
document.getElementById('dataList').value = JSON.stringify(result)//将数组json对象转为json字符串
empty.outerHTML = empty.outerHTML//清空input
}
}
</script>
</html>