使⽤js实现excel⽂件的上传及渲染到前端页⾯为table 使⽤js实现excel⽂件的上传及渲染到前端页⾯为table:
导⼊表格：
执⾏结果：
代码展⽰：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script type="text/javascript" src="./lib/jquery.js"></script>
<script type="text/javascript" src="cdn.bootcss/xlsx/0.12.in.js"></script>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
</style>
</head>
<body>
<!-- 1.⽂件选择框 -->
<input type="file" id="file01">
<!-- 2.上传⽂件按钮 -->
<button id="btnUpload">上传⽂件</button>
<div class="progress" >
<!--bootstrap进度条-->js获取json的key和value
<!-- <div class="progress-bar progress-bar-striped active" id="percent">0%</div> -->
<table id="demo01"></table>
</div>
<img src="./img/loading.gif" alt="" id="loading">
<!-- 3.img标签，来选择上传⽂件后的图⽚ -->
<img src="" alt="" id="img" width="800">
<script>
$('#btnUpload').on('click', function () {
var files = $('#file01')[0].files[0];//⽂件对象
// console.log(files);
var file_name = files['name'];//⽂件名称
var index = file_name.lastIndexOf(".");
if (index != -1) {
file_format = file_name.substr(index + 1).toUpperCase();//⽂件格式后缀
if (file_format != 'XLS' && file_format != 'XLSX') {
alert("只能上传.xls和.xlsx类型的⽂件!");
} else {
//读取⽂件内容
var reader = new FileReader();
var data = sult;
var wb = ad(data, {
type: 'binary' // 以⼆进制流⽅式读取获得整份excel表格对象
});
var sheet_names = wb.SheetNames;//获取excel中所有表名称
// console.log(sheet_name);
var sheet1_name = sheet_names[0];//获取excel中第⼀张表名称
var sheet01_obj = XLSX.utils.sheet_to_json(wb.Sheets[sheet1_name]);//获取excel中第⼀张表数据，数组类型，每⼀⾏数据都是⼀个对象
// console.log(sheet01_obj);
// console.log(sheet01_obj.length);
var table1 = "";
var table2 = "";
var keyArr = [];
table1 += "<tr>";
for (var key01 in sheet01_obj[0]) {
keyArr.push(key01);
table1 += '<th nowrap>' + key01 + '</th>';//表头
// console.log(table1);
};
table2 += "</tr>";
// console.log(table1);
for (var i = 0; i < sheet01_obj.length; i++) {
table2 += "<tr>";
for (var j in sheet01_obj[i]) {
// console.log('value:'+j);
table2 += '<td nowrap>' + sheet01_obj[i][j] + '</td>';//表数据
};
table2 += "</tr>";
}
console.log(table1 + table2);
}
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport"content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible"content="ie=edge"/>
<title>Document</title>
<script type="text/javascript"src="./lib/jquery.js"></script>
<script type="text/javascript"src="cdn.bootcss/xlsx/0.12.in.js"></script> <style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
</style>
</head>
<body>
<!-- 1.⽂件选择框 -->
<input type="file"id="file01">
<!-- 2.上传⽂件按钮 -->
<button id="btnUpload">上传⽂件</button>
<!--bootstrap进度条-->
<div class="progress">
<div class="progress-bar progress-bar-striped active"id="percent">            0%
</div>
<table id="demo01">
</table>
</div>
<img src="./img/loading.gif"alt=""id="loading">
<!-- 3.img标签，来选择上传⽂件后的图⽚ -->
<img src=""alt=""id="img"width="800">
<script>
$('#btnUpload').on('click', function () {
var files = $('#file01')[0].files[0];//⽂件对象
// console.log(files);
var file_name = files['name'];//⽂件名称
var index = file_name.lastIndexOf(".");
if (index != -1) {
file_format = file_name.substr(index + 1).toUpperCase();//⽂件格式后缀
if (file_format != 'XLS' && file_format != 'XLSX') {
alert("只能上传.xls和.xlsx类型的⽂件!");
} else {
//读取⽂件内容
var reader = new FileReader();
var data = sult;
var wb = ad(data, {
type:'binary'// 以⼆进制流⽅式读取获得整份excel表格对象
});
var sheet_names = wb.SheetNames;//获取excel中所有表名称
// console.log(sheet_name);
var sheet1_name = sheet_names[0];//获取excel中第⼀张表名称
var sheet01_obj = XLSX.utils.sheet_to_json(wb.Sheets[sheet1_name]);//获取excel中第⼀张表数据，数组类型，每⼀⾏数据都是⼀个对象// console.log(sheet01_obj);
// console.log(sheet01_obj.length);
var table1 = "";
var table2 = "";
var table3 = "";
var keyArr = [];
table1 += "<tr>";
for (var key01in sheet01_obj[0]) {
keyArr.push(key01);
table1 += '<th nowrap>' + key01 + '</th>';//表头
// var table="<tr><th>Artist</th><th>Title</th></tr>";
// console.log(table1);
};
table2 += "</tr>";
// console.log(table1);
for (var i = 0; i < sheet01_obj.length; i++) {
table2 += "<tr>";
for (var j in sheet01_obj[i]) {
// console.log('value:'+j);
table2 += '<td nowrap>' + sheet01_obj[i][j] + '</td>';//表数据
};
table2 += "</tr>";
}
console.log(table1 + table2);
}
}
});
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。