React中使用XLSX.read()读取Excel报错：Invalid HTML: could not find <table>

问题根源 #

你遇到的Invalid HTML: could not find <table>错误，本质是XLSX库接收到的不是Excel二进制数据，而是HTML内容。即使输入错误扩展名仍返回200，是因为React开发服务器会将未匹配到的路径返回index.html（状态码200），导致你拿到的是页面而非目标Excel文件。

修复步骤 #

1. 修正文件路径 #

React项目中public文件夹下的资源需使用绝对路径访问，相对路径../../public/images/Book1.xlsx会导致路径解析错误。修改fetch路径为：

const readFile = await fetch('/images/Book1.xlsx');

确保文件确实存在于public/images/Book1.xlsx，注意文件名大小写（区分大小写的系统如Linux/macOS会因大小写不匹配返回HTML）。

2. 验证响应内容 #

在解析前先确认拿到的是正确的Excel文件，添加内容类型校验：

const readFile = await fetch('/images/Book1.xlsx');
// 校验内容类型，确保是Excel文件
if (!readFile.headers.get('content-type').includes('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')) {
  throw new Error('获取的不是Excel文件');
}
const workbookBuffer = await readFile.arrayBuffer();
const data = XLSX.read(workbookBuffer);

3. 测试文件是否可访问 #

直接在浏览器地址栏输入http://localhost:3000/images/Book1.xlsx（替换为你的开发端口），如果能下载或预览文件，说明路径正确；如果跳转到React页面，说明文件不存在或路径错误。

额外排查点 #

• 检查React路由配置：如果使用BrowserRouter，相对路径会基于当前路由解析，必须用绝对路径开头的/。
• 清理缓存：开发环境下可能存在缓存，重启开发服务器或清除浏览器缓存后重试。

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