Angular8+Node14批量上传大Excel文件时页面无响应求助

问题分析 #

你当前代码里的setTimeout(()=>{}, 250)完全没起到释放主线程的作用——只是空等250ms，实际的sheet_to_json转换仍在主线程同步执行，且forEach会一次性把所有工作表的转换任务压入主线程，导致长时间阻塞，触发浏览器的无响应提示。

解决方案 #

1. 异步分批处理工作表，给主线程留响应间隙 #

把同步遍历改成异步分批处理，每次完成一个工作表的转换后，让主线程有时间处理其他任务：

onFileChange(evt: any) {
  const selectedFile = evt.target.files[0];
  const reader: FileReader = new FileReader();
  reader.readAsBinaryString(selectedFile);
  reader.onload = (e: any) => {
    const bstr: string = e.target.result;
    const wbk: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });
    
    // 递归分批处理工作表
    const processNextSheet = (index: number) => {
      if (index >= wbk.SheetNames.length) return;
      const sheetName = wbk.SheetNames[index];
      // 将转换逻辑放入setTimeout，让主线程插入其他任务
      setTimeout(() => {
        const data1 = XLSX.utils.sheet_to_json(wbk.Sheets[sheetName]);
        console.log(data1);
        // 处理完当前表，继续下一个
        processNextSheet(index + 1);
      }, 0); // 0延迟即可触发主线程空闲调度，无需长延迟
    };

    // 启动第一个工作表的处理
    processNextSheet(0);
  };
};

2. 优化Excel读取参数，降低内存占用 #

在XLSX.read时关闭不需要的解析项，减少内存消耗：

const wbk: XLSX.WorkBook = XLSX.read(bstr, {
  type: 'binary',
  cellHTML: false, // 不解析HTML格式单元格
  cellStyles: false, // 不读取单元格样式
  cellNF: false, // 不读取数字格式
  cellText: true // 仅保留文本内容（若无需原始数据类型）
});

3. 使用Web Worker转移计算压力 #

把Excel解析和转换逻辑放到Web Worker中，完全脱离主线程，彻底避免阻塞：

• 新建excel.worker.ts文件：

/// <reference lib="webworker" />

import * as XLSX from 'xlsx';

addEventListener('message', ({ data }) => {
  const bstr = data;
  const wbk = XLSX.read(bstr, { type: 'binary', cellHTML: false, cellStyles: false });
  const result = {};
  wbk.SheetNames.forEach(sheetName => {
    result[sheetName] = XLSX.utils.sheet_to_json(wbk.Sheets[sheetName]);
  });
  postMessage(result);
});

• 组件中调用Worker：

onFileChange(evt: any) {
  const selectedFile = evt.target.files[0];
  const reader: FileReader = new FileReader();
  reader.readAsBinaryString(selectedFile);
  reader.onload = (e: any) => {
    // 创建Web Worker实例
    const worker = new Worker(new URL('./excel.worker.ts', import.meta.url));
    worker.postMessage(e.target.result);
    worker.onmessage = ({ data }) => {
      console.log(data); // 接收处理后的所有工作表数据
      worker.terminate(); // 处理完成后销毁Worker
    };
    worker.onerror = (error) => {
      console.error('Worker执行错误:', error);
      worker.terminate();
    };
  };
};

注：Angular项目可通过ng generate worker excel快速生成符合规范的Worker文件。

关于禁用“页面无响应”提示 #

Chrome没有提供前端可调用的API来关闭该提示——这是浏览器保障用户体验的核心机制，强行禁用（若可行）会让用户误以为页面彻底卡死，因此不建议尝试，从根源解决主线程阻塞问题才是合理方案。

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