如何将Excel表格转为JavaScript对象并全局使用该变量？

问题核心 #

你遇到的是两个关联问题：

1. 变量作用域限制：result_obj定义在FileReader.onload内部函数中，外部作用域无法直接访问；
2. 异步执行顺序：FileReader是异步操作，外部的console.log会在onload触发前执行，即使调整作用域也无法拿到有效数据。

解决方案 #

方案1：全局变量挂载（快速实现控制台/跨函数访问）

将result_obj声明在全局作用域，让所有函数和浏览器控制台都能访问。注意必须等待文件加载完成后，变量才会有有效值。

修改后的JS代码：

// 声明在全局作用域，控制台和其他函数可直接访问
let result_obj;

$("#input").on("change", function (e) {
  var file = e.target.files[0];
  if (!file) return;
  
  var FR = new FileReader();
  FR.onload = function(e) {
    var data = new Uint8Array(e.target.result);
    var workbook = XLSX.read(data, {type: 'array'});
    var firstSheet = workbook.Sheets[workbook.SheetNames[0]];
    
    // 赋值给全局变量
    result_obj = XLSX.utils.sheet_to_json(firstSheet);
    console.log(result_obj); 
    console.log(result_obj[0].Project); 

    // 页面预览数据
    var output = document.getElementById('result');
    output.innerHTML = JSON.stringify(result_obj, null, 2);
  };
  
  // 此处直接打印会输出undefined，因为onload还未执行
  // console.log(result_obj);
  FR.readAsArrayBuffer(file);
});

使用说明：

• 文件上传完成后，直接在浏览器控制台输入result_obj即可访问转换后的对象；
• 其他函数中使用时，可先判断变量是否存在：

  function handleData() {
    if (!result_obj) {
      alert("请先上传Excel文件");
      return;
    }
    // 在这里处理result_obj
    console.log("处理数据：", result_obj);
  }
  

方案2：Promise封装（更优雅的异步处理）

用Promise封装Excel解析逻辑，避免全局变量污染，同时更精准地控制异步流程：

// 封装解析函数
function parseExcel(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, {type: 'array'});
        const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
        resolve(XLSX.utils.sheet_to_json(firstSheet));
      } catch (err) {
        reject(err);
      }
    };
    reader.onerror = reject;
    reader.readAsArrayBuffer(file);
  });
}

// 绑定文件上传事件
$("#input").on("change", async function (e) {
  const file = e.target.files[0];
  if (!file) return;
  
  try {
    // 挂载到window，让控制台可访问
    window.result_obj = await parseExcel(file);
    console.log(result_obj);
    
    // 页面预览
    const output = document.getElementById('result');
    output.innerHTML = JSON.stringify(result_obj, null, 2);
  } catch (err) {
    console.error("Excel解析失败：", err);
  }
});

关键注意点 #

• 永远不要在FR.readAsArrayBuffer(file)后直接同步访问result_obj，因为异步操作还未完成；
• 如果不需要全局访问，也可以通过回调函数传递result_obj，避免全局变量污染。

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