实现js读取Excel数据

Posted 陈随风

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现js读取Excel数据相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Excel批量处理</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>
</head>
<body>
<input type="file" id="excel-file">
<textarea id="area"></textarea>
<script>
    //给input标签绑定change事件，一上传选中的.xls文件就会触发该函数
    $(‘#excel-file‘).change(function(e) {
        var files = e.target.files;
        var fileReader = new FileReader();
        fileReader.onload = function(ev) {
            try {
                var data = ev.target.result
                var workbook = XLSX.read(data, {
                    type: ‘binary‘
                }) // 以二进制流方式读取得到整份excel表格对象
                var 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);
            $("#area").val(JSON.stringify(persons));
        };
        // 以二进制方式打开文件
        fileReader.readAsBinaryString(files[0]);
    });
</script>
</body>
</html>

 

以上是关于实现js读取Excel数据的主要内容，如果未能解决你的问题，请参考以下文章

实现js读取Excel数据

怎么用js将excel中的数据读取后显示到网页中的表格

angularJS使用ocLazyLoad实现js延迟加载

js读取本地excel文件出现问题，这是咋回事

struts2+bootstrap-fileinput+poi 实现读取excel文件到数据库

用js实现动态添加表格数据