<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-table.css">
<link rel="stylesheet" href="css/theme.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/fileinput.min.css" />
<style type="text/css">
td,
th {
text-align: center;
}
a {
text-decoration: none;
cursor: pointer;
}
th {
background-color: #459DF5;
color: white;
}
ul {
list-style-type: none;
}
h3 {
color: #000000;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery.min.1.12.4.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="js/fileinput.min.js"></script>
<script type="text/javascript" src="js/xlsx.core.min.js"></script>
<button class="btn btn-mini btn-success fileinput-button" type="button">导入人员</button>
<input type="file" id="excel" onchange="loadFile(this.files[0])" style="position:absolute;top:0;left:0; opacity:0">
<span id="filename" style="vertical-align: middle">未上传文件</span>
<div>
<table id="dataGrid" class="table text-nowrap"></table>
</div>
<script type="text/javascript">
function loadFile(file){
$("#filename").html(file.name);
}
$(function() {
$('#dataGrid').bootstrapTable({
toolbar : '#toolbar',
height : 330,
striped : true,
pagination : true,
pageSize : 10,
sortName : 'userName',
sidePagination : 'client',
columns : [
{
field : 'userName',
title : '用户名称'
},
{
field : 'userMobile',
title : '手机号'
},
{
title : "操作",
formatter : function(value, row, index){
var str = "";
str += "<a onclick='del(\"userPhone\", \"" + row.userPhone + "\");' "
+ "href='javascript:void(0);' class='btn btn-mini btn-danger' >"
+ "删除" + "</a>";
return str;
}
}
]
});
});
/*//删除一行数据
function del(field, value){
$('#dataGrid').bootstrapTable('remove', {field: field, values: [value]});
}*/
//加载数据
function loadData(rows) {
$('#dataGrid').bootstrapTable('load', rows);
}
</script>
<script type="text/javascript">
//捕捉文件组件更改事件, 如果文件发生改变, 就获取文件内容
$("#excel").change(function(e) {
var files = e.target.files;
var fileReader = new FileReader();
fileReader.onload = function(ev) {
try {
var data = ev.target.result,
workbook = XLSX.read(data, {
type: 'binary'
}), // 以二进制流方式读取得到整份excel表格对象
rows = []; // 存储获取到的数据
} catch (e) {
console.log('文件类型不正确' + e);
bootbox.alert('文件类型不正确');
return;
}
// 表格的表格范围,可用于判断表头是否数量是否正确
var fromTo = '';
// 遍历每张表读取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'];
rows = rows.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
break; // 如果只取第一张表,就取消注释这行
}
}
for(var i=0; i<rows.length; i++) {
rows[i].userName = rows[i].名称;
rows[i].userMobile = rows[i].规格;
//rows[i].userPhone = rows[i].用户名称 + rows[i].手机号;
}
//加载数据到表格
loadData(rows);
};
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
});
</script>
</body>
</html>
使用js读取excel
猜你喜欢
转载自blog.csdn.net/weixin_44315761/article/details/100005383
今日推荐
周排行