React应用中XLSX文件导入修改导出（保留格式）方案问询

一、修复ExcelJS在React浏览器环境的报错问题 #

你遇到的Cannot read properties of undefined (reading 'F_OK')报错，是因为readFile是ExcelJS专为Node.js环境提供的API，浏览器无法直接读取本地文件路径。改用浏览器兼容的读取方式即可解决：

1. 读取项目同目录下的静态Excel文件 #

import ExcelJS from "exceljs";

const loadAndModifyStaticExcel = async () => {
  const workbook = new ExcelJS.Workbook();
  // 通过fetch获取文件并转为ArrayBuffer
  const response = await fetch("./PAT_report.xlsx");
  const arrayBuffer = await response.arrayBuffer();
  // 用兼容浏览器的read方法读取
  await workbook.xlsx.read(arrayBuffer);

  // 获取指定工作表（索引1对应第二个工作表，SheetNames从0开始计数）
  const worksheet = workbook.getWorksheet(1);
  // 修改F12单元格的值
  worksheet.getCell("F12").value = 100;

  // 导出修改后的文件
  const buffer = await workbook.xlsx.writeBuffer();
  const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "modified_export.xlsx";
  a.click();
  window.URL.revokeObjectURL(url);
};

2. 读取用户上传的本地Excel文件 #

如果需要支持用户上传文件修改，可参考以下代码：

// 假设页面有<input type="file" id="excelUpload" accept=".xlsx" />
const fileInput = document.getElementById("excelUpload");
fileInput.addEventListener("change", async (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const workbook = new ExcelJS.Workbook();
  // 直接读取File对象
  await workbook.xlsx.read(file);

  // 修改单元格逻辑与上方一致
  const worksheet = workbook.getWorksheet(1);
  worksheet.getCell("F12").value = 100;

  // 导出下载
  const buffer = await workbook.xlsx.writeBuffer();
  const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = `modified_${file.name}`;
  a.click();
  window.URL.revokeObjectURL(url);
});

ExcelJS原生支持保留原文件的样式，修改后导出不会丢失格式，完全符合你的需求。

二、备选免费方案：xlsx-style（SheetJS分支） #

xlsx-style是你之前尝试的xlsx库的分支，专门补充了样式读写能力，用法和原生xlsx高度兼容：

安装依赖 #

npm install xlsx-style --save

示例代码 #

import * as XLSX from "xlsx-style";

const loadAndModifyExcel = async () => {
  const response = await fetch("./PAT_report.xlsx");
  const workbookArrayBuffer = await response.arrayBuffer();
  const workbook = XLSX.read(workbookArrayBuffer, { type: "array" });

  const sheetName = workbook.SheetNames[1];
  const worksheet = workbook.Sheets[sheetName];

  // 修改单元格值
  worksheet["F12"].v = 100;
  // 可选：修改单元格样式（例如设置红色字体）
  // worksheet["F12"].s = { font: { color: { rgb: "FF0000" } } };

  // 导出时保留样式
  const modifiedBuffer = XLSX.write(workbook, { type: "array", bookType: "xlsx" });
  const blob = new Blob([modifiedBuffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
  
  // 下载逻辑
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "modified_export.xlsx";
  a.click();
  window.URL.revokeObjectURL(url);
};

注意：该库维护活跃度较低，但对于简单的样式保留和单元格修改场景足够稳定。

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