js导入excel数据加载到界面

最新推荐文章于 2024-07-30 11:29:23 发布

靓靓儿

最新推荐文章于 2024-07-30 11:29:23 发布

阅读量8.5k

点赞数 1

分类专栏： js 文章标签： excel table

js 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="xlsx.core.min.js"></script>
	<script>
	window.onload=function(){
		$('#excel-file').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表格对象
                        persons = []; // 存储获取到的数据
                } catch (e) {
                    console.log('文件类型不正确');
                    return;
                }

                // 表格的表格范围，可用于判断表头是否数量是否正确
                var fromTo = '';
                // 遍历每张表读取
                for (var sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        fromTo = workbook.Sheets[sheet]['!ref'];
                        console.log(fromTo);
                        persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                        // break; // 如果只取第一张表，就取消注释这行
                    }
                }

                console.log(persons);
                //将persons赋值给要展示的表格数组里即可展示在界面
            };

            // 以二进制方式打开文件
            fileReader.readAsBinaryString(files[0]);
        });
	}
	</script>
</head>
<body>
	<input type="file" id="excel-file">
</body>
</html>