zoukankan      html  css  js  c++  java
  • 实现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>
  • 相关阅读:
    POJ 1251 Jungle Roads
    1111 Online Map (30 分)
    1122 Hamiltonian Cycle (25 分)
    POJ 2560 Freckles
    1087 All Roads Lead to Rome (30 分)
    1072 Gas Station (30 分)
    1018 Public Bike Management (30 分)
    1030 Travel Plan (30 分)
    22. bootstrap组件#巨幕和旋转图标
    3. Spring配置文件
  • 原文地址:https://www.cnblogs.com/2018clg/p/12272457.html
Copyright © 2011-2022 走看看