前端解析Excel文件内容
目录
前端解析Excel文件内容
前端解析Excel文件内容
一、首先创建一个简单的HTML项目
1、我使用的是HBuilder X创建了一个简单的HTML项目，也可手动创建都没关系。
2、引入最基本的jquery脚本库。
3、为了方便看出是否解析完成，这里用了layui的提示效果，也可引入别的提示效果。
4、引入解析Excel文件的脚本（文章第五点后提供Demo项目）。
二、创建简单的Excel，并填写一些数据
Excel文件中的栏位允许存在公式，当解析时，会自动转换成计算后的值。
三、编写HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" href="js/layui.css" />
</head>
<body>
<div>
<input type="button" value="Excel导入" οnclick="$('#testImport').click()"/>
<input id="testImport" style="display: none;" type="file" οnchange="testImport(this)" accept="*"/>
</div>
</body>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/xlsx.full.min.js"></script>
<script type="text/javascript" src="js/layui.all.js"></script>
<script type="text/javascript">
function testImport(obj) {
//判断是否为文件
if (!obj.files) {
return;
}
var index = layer.load(1, { shade: [0.1,'#fff']});
var f = obj.files[0];
var reader = new FileReader();
reader.onabort = function(e) {
alert("中断了")
}
reader.onerror = function(e) {
alert("出错了")
}
reader.onloadstart = function() {
//开始
console.log("onloadstart")
}
reader.onloadend = function() {
//结束
console.log("onloadend")
}
reader.onload = function(e) {
//$("#testImport").val(null); //清空文件栏
var data = e.target.result;
var wb = XLSX.read(data, {
type: 'binary' //设置类型,读取二进制
});
//读第一个Sheet文件内容
var items = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
items = JSON.parse(items);
console.log(items)
//读第二个Sheet文件内容
var itemTwo = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[1]]));
itemTwo = JSON.parse(itemTwo);
console.log(itemTwo)
layer.closeAll();
}
reader.readAsBinaryString(f);
}
</script>
</html>四、页面及上传后的效果
五、Demo下载地址
地址：https://pan.baidu.com/s/1CDuF6lrmYXpkdppLfCIgQg
提取码：y9ua