使用js读取excel

<!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>
猜你喜欢
