如何使用HTML和JS将Excel文件数据上传至数组？

问题排查 #

你的代码逻辑本身没问题，但无法运行大概率是以下原因：

• 所使用的xlsx库版本过旧（0.14.5是2019年的版本），存在部分浏览器兼容性问题
• 缺少错误捕获逻辑，无法定位文件加载或解析失败的具体原因
• 脚本加载顺序可能出错（jQuery需在自定义JS之前加载）

修正后的完整代码 #

<!-- 先加载jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 升级到稳定版xlsx库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

<input type="file" id="fileInput" accept=".xls, .xlsx" />
<pre id="result"></pre>

<script>
$("#fileInput").on("change", function(e) {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  
  reader.onload = function(e) {
    try {
      const data = new Uint8Array(e.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const firstSheetName = workbook.SheetNames[0];
      const firstSheet = workbook.Sheets[firstSheetName];
      // header:1 生成二维数组结构
      const resultArray = XLSX.utils.sheet_to_json(firstSheet, { header: 1 });
      
      // 预览结果
      document.getElementById('result').textContent = JSON.stringify(resultArray, null, 2);
      console.log('解析完成的数组：', resultArray);
    } catch (error) {
      document.getElementById('result').textContent = `解析出错：${error.message}`;
      console.error('解析失败:', error);
    }
  };

  reader.onerror = function() {
    document.getElementById('result').textContent = '文件读取失败，请检查文件是否损坏';
  };

  reader.readAsArrayBuffer(file);
});
</script>

关键说明 #

1. 库版本升级：将xlsx库升级到0.18.5稳定版，修复了旧版的部分兼容性问题
2. 错误处理：添加try-catch捕获解析错误，同时监听FileReader的onerror事件，方便排查问题
3. 脚本顺序：确保jQuery先于自定义JS加载，避免$未定义的错误
4. 数组结构：header:1参数会将Excel内容转换为二维数组，第一行数据会作为数组的第一个子数组，后续行依次排列

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