React中exceljs读取现有文件失败及前端文件读写可行性问题

核心结论 #

你查到的「React运行在浏览器端无法直接写入文件」的说法完全准确。
React 前端项目默认运行在浏览器安全沙箱中，受浏览器安全策略限制：

• 不能直接通过文件路径读取用户本地磁盘的任意文件
• 不能直接向用户本地磁盘的任意路径写入文件
  所有文件交互都必须经过用户主动授权，比如手动选择文件上传、手动确认文件下载。

代码失效的根本原因 #

你使用的workbook.xlsx.readFile(filename)是 exceljs 专门为 Node.js 环境提供的接口，底层依赖 Node.js 原生的fs文件系统模块，这个接口在浏览器环境下无法运行，所以文件根本没有被成功加载，后续调用addWorksheet自然会返回异常值。

浏览器端正确使用 exceljs 的方式 #

读取已存在的Excel文件 #

需要通过<input type="file">控件让用户主动选择目标文件，拿到文件对象后转成ArrayBuffer，再调用exceljs的load方法加载：

// 文件选择回调
const handleFileSelect = async (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  const workbook = new Excel.Workbook();
  // 浏览器端使用load方法加载ArrayBuffer，禁止用readFile
  const fileBuffer = await selectedFile.arrayBuffer();
  await workbook.xlsx.load(fileBuffer);

  // 此时操作工作簿正常
  const newSheet = workbook.addWorksheet('My Sheet');
  console.log(newSheet); // 可正常拿到工作表实例，不会为undefined
}

// 页面中渲染的文件选择控件
<input type="file" accept=".xlsx" onChange={handleFileSelect} />

导出/写入Excel文件 #

浏览器端无法直接写文件到磁盘，需要将生成的工作簿转成Blob对象，触发浏览器的下载流程，由用户确认保存位置：

// 生成文件并触发下载
const exportFile = async (workbook) => {
  const fileBuffer = await workbook.xlsx.writeBuffer();
  const fileBlob = new Blob([fileBuffer], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  });
  // 构造临时下载链接
  const downloadUrl = URL.createObjectURL(fileBlob);
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = '导出表格.xlsx';
  a.click();
  // 释放临时链接内存
  URL.revokeObjectURL(downloadUrl);
}

如果你的项目是Next.js、Remix这类支持服务端渲染的React框架，可以在服务端代码中使用readFile/writeFile这类依赖Node.js fs模块的接口，因为服务端代码运行在Node环境，不受浏览器安全策略限制。

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