ReactJS无服务端语言支持下，客户端能否实现文件写入？

可以在客户端实现Excel文件写入，你当前的代码存在几个关键问题导致功能失效，下面是问题分析和修正后的实现：

原代码问题点 #

1. 你用setAdd(URL.createObjectURL(file))存储的是文件的Blob URL，而非实际的文件内容或文件名，XLSX.readFile无法直接读取该URL，且new File(["array"], add)的创建方式完全错误。
2. 没有保存上传后的完整Workbook对象，导致写入时无法直接修改原有文件内容。

修正后的实现代码 #

import "./styles.css";
import * as XLSX from "xlsx";
import { useState } from "react";

export default function App() {
  // 保存上传后的workbook对象和原文件名
  const [workbook, setWorkbook] = useState(null);
  const [fileName, setFileName] = useState("");

  const writeData = () => {
    if (!workbook) return;
    
    // 复制原workbook避免直接修改原始状态
    const updatedWorkbook = XLSX.utils.book_new();
    const sheetName = workbook.SheetNames[0];
    const originalSheet = workbook.Sheets[sheetName];
    
    // 修改单元格内容，指定类型避免格式异常
    originalSheet["H1"] = { v: "new value add", t: "s" };
    
    // 将修改后的工作表添加到新workbook
    XLSX.utils.book_append_sheet(updatedWorkbook, originalSheet, sheetName);
    
    // 导出修改后的文件
    XLSX.writeFile(updatedWorkbook, `modified_${fileName}`);
  };

  const uploadFile = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    
    setFileName(file.name);
    const reader = new FileReader();
    
    reader.onload = (e) => {
      const data = e.target.result;
      // 读取文件为workbook对象并保存到state
      const loadedWorkbook = XLSX.read(data, { type: "array" });
      setWorkbook(loadedWorkbook);
      
      // 原有的数据解析逻辑保留
      const patientSheet = loadedWorkbook.SheetNames[0];
      const worksheet1 = loadedWorkbook.Sheets[patientSheet];
      const patient = XLSX.utils.sheet_to_json(worksheet1);
      console.log(patient);
    };
    
    reader.readAsArrayBuffer(file);
  };

  return (
    <div className="App">
      <input type="file" accept=".csv, .xlsx" onChange={uploadFile} />
      {/* 只有在workbook存在时才启用按钮 */}
      <button onClick={writeData} disabled={!workbook}>Write Data</button>
    </div>
  );
}

关键说明 #

• 用workbook状态保存上传后的完整Excel工作簿对象，方便后续直接修改
• 修改单元格时明确指定类型（t: "s"表示字符串类型），避免导出后出现格式异常
• 导出时添加modified_前缀区分原文件，也可直接使用原文件名（浏览器会提示重复文件）
• 按钮添加disabled属性，避免未上传文件时触发无效操作

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