JavaScript读取Excel表格中数据并输出到页面

崚影

2021 年 08 月 03 日

7257 次浏览

8 条评论

2274字数

折腾

仅作个人记录，请大佬移步！:&(蛆音娘_去世)

第一步所需文件：jquery-3.3.1.min.js，angular.min.js，xlsx.full.min.js

第二步把Excel中信息读取到workbook变量中，即提取信息

var workbook = XLSX.read(fileData, { type: 'binary' });

第三步读取第一张表

var sheet0 = workbook.Sheets[workbook.SheetNames[0]]; //sheet0代表excel表格中的第一页

第四步将提取的数据转换为json

var str = XLSX.utils.sheet_to_json(sheet0);//利用接口实现转换

此时`str[0]`已经表示表格第二行，第一行代表为每列数据的标题。通过`str[0].column2` 可调用第二行第三列的数据

第五步通过 `for(var i in str)`和第一行名称去获取具体某列数据

测试图

代码

customjs.js

(function () {
    var app = angular.module('myApp', []);
    app.controller('MyController', ['$scope', myController]);
    var excelJsonObj = [];
    function myController($scope) {
        $scope.uploadExcel = function () {
            var myFile = document.getElementById('file');
            var input = myFile;
            var reader = new FileReader();
            reader.onload = function () {
                var fileData = reader.result;
                var workbook = XLSX.read(fileData, { type: 'binary' });
                // 表格的表格范围，可用于判断表头是否数量是否正确
                var fromTo = '';
                // 遍历每张表读取
                var sheet0 = workbook.Sheets[workbook.SheetNames[0]];//sheet0代表excel表格中的第一页
                var str = XLSX.utils.sheet_to_json(sheet0);//利用接口实现转换
                for (var i in str) {
                    var cus = str[i].CustomerID;
                    var cas = str[i].CaseID;
                    $('#myTable tbody:last-child').append("<tr><td>" + cus + "</td><td>" + cas + "</td></tr>");
                }                
            };
            reader.readAsBinaryString(input.files[0]);
        };
    }
})();

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Reading Excel</title>
    <meta name="viewport" content="width=device-width,initial-scale=10" />
    <script src="js/angular.min.js"></script>
    <script src="js/customjs.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/xlsx.full.min.js"></script>
    <style type="text/css">
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body ng-controller="MyController">
    <div>
        <form enctype="multipart/form-data">
            <input type="file" id="file" />
            <button type="submit" value="submit" ng-click="uploadExcel()">上传</button>
        </form>
    </div>
    <div>
        <table id="myTable">
            <thead>
                <tr>
                    <th>CustomerID</th>
                    <th>CaseID</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</body>
</html>