FileReader未进入onload函数，Excel导入KendoGrid追加数据失败

我需要实现Excel文件导入KendoGrid并完成数据追加：比如表格原有4行数据，Excel工作表有2行，导入后总计应为7行。但当前代码根本无法进入fileReader的onload函数，另外试过一篇教程的代码但看不懂。我的代码如下：

$("#fileInput").on("change", function (e) {
    var fileInput = e.target;
    var files = fileInput.files;

    if (files.length > 0) {
        var fileName = files[0].name;
        var fileReader = new FileReader();

// 从此处开始代码失效

fileReader.onload = function (event) {
            var data = event.target.result;

            // 使用XLSX库解析Excel内容
            var workbook = XLSX.read(data, { type: "binary" });
            var sheet = workbook.Sheets[workbook.SheetNames[0]];
            var rows = XLSX.utils.sheet_to_json(sheet, { header: 1 });
            var grid = $("#grid").data("kendoGrid");
            var griddataSource = grid.dataSource._data;

            // 假设Excel结构与Grid schema匹配
            for (var i = 1; i < rows.length; i++) {
                var row = rows[i];
                var dataItem = {
                    ProductID: row[0],
                    ProductName: row[1],
                    Price: row[2],
                };

                // 向Grid数据源添加新数据项
                grid.dataSource.add(dataItem);
            }
            $("#grid").data("kendoGrid").dataSource.data([]);
            $("#grid").data("kendoGrid").dataSource.data([griddataSource]);

            // 刷新Grid以显示变更
            grid.refresh();
            
        };
        // 以二进制字符串读取Excel文件内容
        fileReader.readAsBinaryString(files[0]);
    }
});

问题排查与修复方案 #

1. 解决onload不触发的核心问题

readAsBinaryString已被浏览器废弃，部分环境下会导致读取失败，同时缺少错误监听无法定位问题。修改方案：

• 添加错误/中断监听，捕获读取异常
• 改用readAsArrayBuffer读取文件，再转换为XLSX支持的二进制字符串

2. 修复数据追加逻辑错误

原代码中先清空数据源，再把原数据数组作为单个元素传入data()，这会导致数据结构混乱。正确的追加逻辑是保留原数据，直接添加新数据，或合并原数据与新数据后重新设置。

修正后的完整代码

$("#fileInput").on("change", function (e) {
    var fileInput = e.target;
    var files = fileInput.files;

    if (files.length > 0) {
        var fileReader = new FileReader();

        // 添加错误监听，定位读取问题
        fileReader.onerror = function(err) {
            console.error("文件读取错误:", err);
            alert("文件读取失败，请检查文件是否损坏或格式正确");
        };

        fileReader.onabort = function() {
            console.log("文件读取被中断");
        };

        fileReader.onload = function (event) {
            // 将ArrayBuffer转换为二进制字符串
            var data = new Uint8Array(event.target.result);
            var binaryStr = "";
            for (var i = 0; i < data.length; i++) {
                binaryStr += String.fromCharCode(data[i]);
            }

            // 使用XLSX库解析Excel内容
            var workbook = XLSX.read(binaryStr, { type: "binary" });
            var sheet = workbook.Sheets[workbook.SheetNames[0]];
            var rows = XLSX.utils.sheet_to_json(sheet, { header: 1 });
            var grid = $("#grid").data("kendoGrid");
            var dataSource = grid.dataSource;

            // 跳过表头（i从1开始），追加新数据
            for (var i = 1; i < rows.length; i++) {
                var row = rows[i];
                // 确保Excel行数据不为空
                if (row.length > 0) {
                    var dataItem = {
                        ProductID: row[0],
                        ProductName: row[1],
                        Price: row[2],
                    };
                    dataSource.add(dataItem);
                }
            }

            // 刷新Grid（add方法后会自动触发刷新，此步可省略，保险起见保留）
            grid.refresh();
        };

        // 以ArrayBuffer方式读取文件
        fileReader.readAsArrayBuffer(files[0]);
    }
});

关键说明

• 错误监听：可以快速定位文件损坏、格式不支持等问题
• 读取方式替换：readAsArrayBuffer是当前标准的文件读取方式，兼容性更好
• 数据追加优化：dataSource.add()会自动将新数据添加到现有数据集中，无需手动清空再赋值，避免数据结构错误

内容的提问来源于stack exchange，提问作者Muskan