前端按钮触发Excel读写遇require未定义问题求助

你遇到的本质矛盾是：require是Node.js专属的模块加载语法，浏览器环境不支持；同时浏览器受安全限制，无法直接读写本地文件，而你代码里的readFile/writeFile都是Node.js依赖文件系统（fs）的后端API，不能在前端运行。之前混合后端文件操作和前端DOM绑定的写法，天然无法在单一环境兼容。

方案1：前后端分离（Node.js后端 + 前端页面） #

这是最贴合你原有需求的方案：把Excel读写逻辑放在Node.js后端，前端只负责点击按钮向后端发请求触发操作。

1. 后端代码（server.js） #

const express = require('express');
const xlsx = require('xlsx');
const app = express();
const port = 3000;

// 本地测试允许跨域
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'POST');
  next();
});

// 处理Excel更新的接口
app.post('/update-excel', (req, res) => {
  // 读取原始Excel数据
  const sourceFile = xlsx.readFile('./project3Temp.xlsx');
  let data = [];
  sourceFile.SheetNames.forEach(sheetName => {
    const sheetData = xlsx.utils.sheet_to_json(sourceFile.Sheets[sheetName]);
    data.push(...sheetData);
  });

  // 写入目标Excel文件
  const targetFile = "ReceivingExcelFile.xlsx";
  const workbook = xlsx.readFile(targetFile);
  workbook.Sheets['Sheet1'] = xlsx.utils.json_to_sheet(data);
  xlsx.writeFile(workbook, targetFile);

  res.send('Excel已更新完成');
});

app.listen(port, () => {
  console.log(`后端服务运行在 http://localhost:${port}`);
});

2. 前端代码（index.html） #

<!DOCTYPE html>
<html>
<body>
  <button class="btnOverWrite">更新Excel文件</button>
  <script>
    const btn = document.querySelector('.btnOverWrite');
    btn.addEventListener('click', async () => {
      try {
        const response = await fetch('http://localhost:3000/update-excel', {
          method: 'POST'
        });
        const result = await response.text();
        alert(result);
      } catch (err) {
        console.error('请求失败:', err);
      }
    });
  </script>
</body>
</html>

运行步骤 #

1. 安装依赖：npm install express xlsx
2. 启动后端：node server.js
3. 直接在浏览器打开index.html，点击按钮即可触发后端的Excel操作

方案2：纯前端处理Excel（无后端） #

如果不想搭建后端，只能通过用户手动上传原始Excel、处理后下载结果的方式实现（浏览器无法直接修改本地文件，这是安全限制）。

前端代码（index.html） #

<!DOCTYPE html>
<html>
<body>
  <input type="file" id="sourceExcel" accept=".xlsx">
  <button class="btnOverWrite">生成更新后的Excel</button>
  <!-- 引入xlsx前端版CDN -->
  <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
  <script>
    let rawData = [];
    const fileInput = document.getElementById('sourceExcel');
    const btn = document.querySelector('.btnOverWrite');

    // 读取用户上传的原始Excel
    fileInput.addEventListener('change', (e) => {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.onload = (event) => {
        const arrayBuffer = new Uint8Array(event.target.result);
        const workbook = XLSX.read(arrayBuffer, { type: 'array' });
        rawData = [];
        workbook.SheetNames.forEach(sheetName => {
          const sheetData = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
          rawData.push(...sheetData);
        });
        alert('原始数据读取完成');
      };
      reader.readAsArrayBuffer(file);
    });

    // 点击生成并下载新Excel
    btn.addEventListener('click', () => {
      if (rawData.length === 0) {
        alert('请先上传原始Excel文件');
        return;
      }
      const workbook = XLSX.utils.book_new();
      const worksheet = XLSX.utils.json_to_sheet(rawData);
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      XLSX.writeFile(workbook, 'ReceivingExcelFile.xlsx');
    });
  </script>
</body>
</html>

说明 #

• 不需要后端，直接在浏览器运行
• 无法自动覆盖本地文件，只能让用户手动保存下载的结果文件

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