AngularJS 如何处理 excel 文件而不因列名而出错

Question

我有一个函数可以处理 excel 文件，并将文件的内容放入数组中，稍后显示在 html table.

excel 文件必须始终具有正确的 header 名称，否则它将不起作用。

有没有办法修改函数，使 header 名称与要处理的文件无关？

总是有 4 列，数据总是在适当的列中，header 名称无关紧要

这是我的 angularJS 代码：

$scope.DisplayFile = function () {
    var regex = /^([a-zA-Z0-9\s_\.\-:])+(.xls|.xlsx)$/;
    if (regex.test($scope.SelectedFile.name.toLowerCase())) {
        if (typeof (FileReader) !== "undefined") {
            var reader = new FileReader();
            //For Browsers other than IE.
            if (reader.readAsBinaryString) {
                reader.onload = function (e) {
                    $scope.ProcessExcel(e.target.result);
                };
                reader.readAsBinaryString($scope.SelectedFile);
            } else {
                //For IE Browser.
                reader.onload = function (e) {
                    var data = "";
                    var bytes = new Uint8Array(e.target.result);
                    for (var i = 0; i < bytes.byteLength; i++) {
                        data += String.fromCharCode(bytes[i]);
                    }
                    $scope.ProcessExcel(data);
                };
                reader.readAsArrayBuffer($scope.SelectedFile);
            }
        } else {
            $window.alert("This browser does not support HTML5.");
        }
    } else {
        $window.alert("Please upload a valid Excel file.");
    }
};

$scope.ProcessExcel = function (data) {
    //Read the Excel File data.
    var workbook = XLSX.read(data, {
        type: 'binary'
    });
    //Fetch the name of First Sheet.
    var firstSheet = workbook.SheetNames[0];
    //Read all rows from First Sheet into an JSON array.
    excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet]);
    //Display the data from Excel file in Table.
    $scope.$apply(function () {
        $scope.AgendaItems = excelRows;
     });
};

和html

<table class="table mt-4 mb-5" id="tblCrossReference" ng-show="IsVisible">
    <tr>
        <th>Meeting ID</th>
        <th>Agenda Item</th>
        <th>Legistar ID</th>
        <th>Title</th>
    </tr>
    <tbody ng-repeat="ai in AgendaItems">   
        <tr>
            <td>{{ai.MeetingID}}</td>
            <td>{{ai.AgendaItem}}</td>
            <td>{{ai.LegistarID}}</td>
            <td>{{ai.Title}}</td>
        </tr>
    </tbody>
</table>

Answer 1

有一种方法可以提供您自己的 header 个名称，这样您就不会依赖 excel.

中的 header 个名称

XLSX.utils.sheet_to_json(ws, {header:["A","E","I","O","U","6","9"]});

上面的函数有一个 header 参数。使用这个你可以提供自己的 headers。一个小问题是，它会将 excel 中的 header 也视为数据行。这可以通过从代码中的 excelRows 数组中删除第一项来排序。

因此，您现在可以将 angularJS 代码编写为：

       excelRows = XLSX.utils.sheet_to_json(workbook.Sheets[firstSheet], { header: ["Myheader1", "Myheader2", "Myheader3", "Myheader4"] });
            //Display the data from Excel file in Table.
            $scope.$apply(function () {
                excelRows.shift();
                $scope.AgendaItems = excelRows;
            });

并在 HTML 中：

             <table class="table mt-4 mb-5" id="tblCrossReference" ng-show="IsVisible">
                <tr>
                    <th>Meeting ID</th>
                    <th>Agenda Item</th>
                    <th>Legistar ID</th>
                    <th>Title</th>
                </tr>
                <tbody ng-repeat="ai in AgendaItems">
                    <tr>
                        <td>{{ai.Myheader1}}</td>
                        <td>{{ai.Myheader2}}</td>
                        <td>{{ai.Myheader3}}</td>
                        <td>{{ai.Myheader4}}</td>
                    </tr>
                </tbody>
            </table>

SheetJS 文档在这里：https://docs.sheetjs.com/

AngularJS 如何处理 excel 文件而不因列名而出错

AngularJS how to process excel file without getting errors because of column names

javascript

angularjs