JavaScript读取空Excel文件时如何退出FileReader的onload函数并提示

问题背景 #

需求为：读取Excel文件时，若文件无有效记录或为空，显示提示信息并退出FileReader的onload函数。但当前使用excelData.length == 0的判断逻辑无效，无法触发退出操作。

原代码 #

$(document).on('change', '#InputFile', function(evt) {
  var regexExcel = /(\.xlsx|\.xls)$/i;
  var file = evt.target.files[0];

  var reader = new FileReader();

  reader.onload = function(e) {
    var data = new Uint8Array(e.target.result);
    var workbook = XLSX.read(data, {
      type: 'array'
    }); // Parse the data as Excel file

    var firstSheetName = workbook.SheetNames[0]; // name of the sheet
    var worksheet = workbook.Sheets[firstSheetName]; // Get the first sheet
    var excelData = XLSX.utils.sheet_to_json(worksheet, {
      header: 1
    }); // Convert the sheet to JSON data

    console.log(excelData);
    if (excelData.length == 0) {
      $(".global-loader").hide();
      $("#UploadData .error-txt").show().text("No records found in the selected Excel file");
      $('#InputFile').val('');
      return;
    }

    excelData = excelData.filter(row => row.some(cell => !!cell));
  };
  reader.readAsArrayBuffer(file);
});

问题原因 #

当Excel文件为空时，XLSX.utils.sheet_to_json(worksheet, {header:1})不会返回长度为0的数组，而是返回包含空数组的数组（例如[[]]），此时excelData.length的值为1，导致原判断条件不成立，无法触发退出逻辑。

解决方案 #

先过滤掉所有全空的行，再判断过滤后的结果是否为空。修改后的代码如下：

$(document).on('change', '#InputFile', function(evt) {
  var regexExcel = /(\.xlsx|\.xls)$/i;
  var file = evt.target.files[0];

  var reader = new FileReader();

  reader.onload = function(e) {
    var data = new Uint8Array(e.target.result);
    var workbook = XLSX.read(data, {
      type: 'array'
    });

    var firstSheetName = workbook.SheetNames[0];
    var worksheet = workbook.Sheets[firstSheetName];
    var excelData = XLSX.utils.sheet_to_json(worksheet, {
      header: 1
    });

    // 过滤所有单元格均为空的行
    const validRows = excelData.filter(row => 
      row.some(cell => cell !== null && cell !== undefined && cell.trim() !== '')
    );

    // 判断是否无有效记录
    if (validRows.length === 0) {
      $(".global-loader").hide();
      $("#UploadData .error-txt").show().text("No records found in the selected Excel file");
      $('#InputFile').val('');
      return; // 直接退出onload函数
    }

    // 后续使用过滤后的有效数据
    excelData = validRows;
    // 这里添加后续业务逻辑
  };
  reader.readAsArrayBuffer(file);
});

说明 #

1. 使用filter结合some过滤掉所有单元格为空（包括空字符串、null、undefined）的行，得到真正包含有效数据的行集合validRows
2. 判断validRows.length === 0，若为真则执行提示操作并通过return直接退出onload函数
3. 后续业务逻辑可直接使用过滤后的validRows，无需再重复过滤

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