如何使用JavaScript将HTML表单数据写入文本文件

以下分两种常见场景提供可直接运行的实现方案：

场景1：浏览器端（纯前端触发下载文本文件） #

受浏览器安全沙箱限制，前端JS无法直接写入用户本地磁盘的任意路径，仅支持生成文本文件后触发用户手动下载保存：

<!-- HTML表单结构 -->
<form id="userForm">
  <label>姓名：<input type="text" name="username" required></label><br>
  <label>邮箱：<input type="email" name="email" required></label><br>
  <label>留言：<textarea name="message" rows="3"></textarea></label><br>
  <button type="submit">提交并导出数据</button>
</form>

// 表单提交逻辑
document.getElementById('userForm').addEventListener('submit', function(e) {
  // 阻止表单默认跳转行为
  e.preventDefault();

  // 序列化表单数据并生成文本内容
  const formData = new FormData(this);
  const dataObj = Object.fromEntries(formData.entries());
  const textContent = `表单提交信息
====================
姓名：${dataObj.username}
邮箱：${dataObj.email}
留言：${dataObj.message}
提交时间：${new Date().toLocaleString()}`;

  // 生成文本文件并触发下载
  const blob = new Blob([textContent], { type: 'text/plain;charset=utf-8' });
  const downloadUrl = URL.createObjectURL(blob);
  const downloadTag = document.createElement('a');
  downloadTag.href = downloadUrl;
  downloadTag.download = `表单数据_${Date.now()}.txt`;
  document.body.appendChild(downloadTag);
  downloadTag.click();
  // 清理临时资源
  document.body.removeChild(downloadTag);
  URL.revokeObjectURL(downloadUrl);

  this.reset();
});

• 该方案无需后端服务，所有逻辑都在用户浏览器运行
• 最终文件保存路径由用户手动选择，前端无法强制指定

场景2：Node.js服务端（写入服务器本地文件） #

如果需要把提交的表单数据统一存储到服务端的文本文件，可搭配Node.js后端实现：

前端提交逻辑 #

document.getElementById('userForm').addEventListener('submit', async function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  const dataObj = Object.fromEntries(formData.entries());
  const textContent = `
提交时间：${new Date().toLocaleString()}
姓名：${dataObj.username}
邮箱：${dataObj.email}
留言：${dataObj.message}
------------------------
`;

  try {
    await fetch('/save-form', {
      method: 'POST',
      headers: { 'Content-Type': 'text/plain' },
      body: textContent
    });
    alert('提交成功');
    this.reset();
  } catch (err) {
    alert('提交失败：' + err.message);
  }
});

服务端逻辑（以Express框架为例） #

const express = require('express');
const fs = require('fs/promises');
const app = express();

app.use(express.text());
app.use(express.static('public')); // 托管前端静态页面

// 接收表单数据并写入文件
app.post('/save-form', async (req, res) => {
  try {
    // 追加写入到服务端的form_records.txt文件，文件不存在会自动创建
    await fs.appendFile('./form_records.txt', req.body);
    res.sendStatus(200);
  } catch (err) {
    res.sendStatus(500);
  }
});

app.listen(3000, () => console.log('服务运行在端口3000'));

• 数据统一存储在服务端指定路径，不会保存到提交用户的本地设备
• 生产环境使用时建议对提交内容做安全校验，避免恶意内容注入

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