如何在HTML表单提交后运行Node.js脚本将收集的数据写入Excel

问题根源 #

• require是Node.js环境特有的模块化导入语法，浏览器原生不支持该语法
• 你代码中用到的exceljs的readFile、writeFileAPI依赖Node.js的文件系统模块fs，就算你用browserify打包了依赖，浏览器出于安全沙箱限制，也没有权限直接读写本地磁盘上的固定路径文件，这才是你打包后依旧无法运行的核心原因。

方案1：纯前端实现（无需后端，生成Excel供用户下载） #

该方案受浏览器安全限制，无法直接写入本地固定路径的AppendRow.xlsx，需要用户手动上传原有文件追加内容后，下载新的Excel文件，适合不需要自动写入本地固定文件的场景。

修改后的代码 #

1. 先下载浏览器端兼容的exceljs构建文件到本地项目目录，在HTML中引入：

<!-- 引入本地的浏览器版exceljs，引入后全局会暴露ExcelJS对象 -->
<script src="./exceljs.min.js"></script>
<script src="script.js"></script>
<form onsubmit="display(event)"> 
  <input type="text" placeholder="Name" id="nm">
  <input type="text" placeholder="Age" id="ag">
  <!-- 新增原有Excel文件上传入口，用于追加内容 -->
  <input type="file" id="excelFile" accept=".xlsx">
  <input type="submit" value="Submit">
</form>

2. 修改script.js的Part2逻辑：

const info = [];

async function display(e){
    //Part1 原有逻辑不变
    e.preventDefault();
    var nm = document.getElementById("nm").value;
    var ag = document.getElementById("ag").value;
    var data = [nm, ag];
    info.push(data);
    var text = document.createElement("h2"); 
    text.innerHTML = info;
    document.body.appendChild(text);
    console.log(info); 

    // -------------------------------------------------
    
    //Part2 替换为浏览器端Excel处理逻辑
    const fileInput = document.getElementById('excelFile');
    let workbook;
    if (fileInput.files.length > 0) {
      // 读取用户上传的原有AppendRow.xlsx
      const file = fileInput.files[0];
      const arrayBuffer = await file.arrayBuffer();
      workbook = new ExcelJS.Workbook();
      await workbook.xlsx.load(arrayBuffer);
    } else {
      // 没有上传文件则新建工作簿
      workbook = new ExcelJS.Workbook();
      workbook.addWorksheet('Main');
    }
    const worksheet = workbook.getWorksheet("Main")
    worksheet.addRow(data);
    // 触发浏览器下载
    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'AppendRow.xlsx';
    a.click();
    URL.revokeObjectURL(url);
    alert('Row has been Appended! File will download automatically.')
}

方案2：搭配轻量Node.js后端（支持自动写入本地固定路径文件） #

如果必须自动写入本地固定位置的AppendRow.xlsx，需要用Node.js搭个极简后端处理文件读写，前端只负责提交表单数据。

实现步骤 #

1. 新建后端项目，安装依赖：

npm init -y
npm install express cors exceljs

2. 新建后端服务文件server.js：

const express = require('express');
const cors = require('cors');
const Excel = require('exceljs');
const app = express();
app.use(cors());
app.use(express.json());
const PORT = 3000;

app.post('/addRow', async (req, res) => {
  const { nm, ag } = req.body;
  const data = [nm, ag];
  const workbook = new Excel.Workbook();
  await workbook.xlsx.readFile("./AppendRow.xlsx");
  const worksheet = workbook.getWorksheet("Main");
  worksheet.addRow(data);
  await workbook.xlsx.writeFile("./AppendRow.xlsx");
  res.send({status: 'success'});
})

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

3. 修改前端script.js的Part2逻辑，改为请求后端接口：

// Part2 替换为接口请求逻辑
fetch('http://localhost:3000/addRow', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({nm, ag})
}).then(res => res.json()).then(() => {
  alert('Row has been Appended!')
})

4. 运行方式：先在Anaconda Prompt运行node server.js启动后端服务，再打开HTML文件提交表单即可。

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