ReactJS中如何用xlsx-js-style读取本地导入的xls文件？

AI 小北

2026-8-5

本地Excel模板结合xlsx-js-style的使用方案

一、正确读取导入的模板文件

你通过import导入的文件，实际拿到的是文件的URL路径字符串，而非二进制内容，直接传给xlsx-js-style会导致解析失败。正确流程是先通过fetch获取文件二进制数据，再交给库处理：

保留原导入语句：

import ExportReportCardTemplate from "asset/files/excel/report_card_template.xls";
import * as xlsx from "xlsx-js-style";

编写加载与解析逻辑：

async function loadAndModifyTemplate() {
  try {
    // 请求获取文件二进制数据
    const res = await fetch(ExportReportCardTemplate);
    const arrayBuffer = await res.arrayBuffer();
    // 解析为xlsx工作簿对象
    const workbook = xlsx.read(arrayBuffer, { type: 'array' });

    // 操作示例：读取第一个工作表并修改内容/样式
    const sheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[sheetName];
    
    // 修改A1单元格内容与样式
    worksheet['A1'].v = '自定义成绩单标题';
    worksheet['A1'].s = {
      font: { bold: true, sz: 16 },
      alignment: { horizontal: 'center' }
    };

    // 导出修改后的文件
    xlsx.writeFile(workbook, '自定义成绩单.xls');
  } catch (err) {
    console.error('模板处理失败：', err);
  }
}

// 调用执行
loadAndModifyTemplate();

二、报错原因与修复

你遇到的错误是：Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'SheetNames')
这是因为你直接将导入的路径字符串传给了xlsx.read()，库无法解析无效的输入，导致返回的workbook是undefined，自然读取不到SheetNames属性。按照上面的流程，先通过fetch获取ArrayBuffer格式的文件数据，再传入xlsx.read()即可解决。