如何基于填写完成的HTML表单生成Excel文件

你可以纯前端实现无需后端服务，以下是无额外依赖的最简实现方案，生成的CSV格式文件可直接用Excel、WPS等工具打开。

实现步骤 #

1. 参考表单结构（已有表单可直接跳过） #

如果你的表单还没写可以参考以下结构，和现有控件匹配：

<form id="userForm">
  <div>
    姓名：<input type="text" name="username" id="username" required>
  </div>
  <div>
    ID：<input type="number" name="userId" id="userId" required>
  </div>
  <div>
    性别：
    <input type="radio" name="gender" value="男"> 男
    <input type="radio" name="gender" value="女"> 女
  </div>
  <div>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="阅读"> 阅读
    <input type="checkbox" name="hobby" value="运动"> 运动
    <input type="checkbox" name="hobby" value="编程"> 编程
  </div>
  <button type="button" id="downloadBtn">Download</button>
</form>

2. 编写导出逻辑 #

直接给Download按钮绑定点击事件，按不同控件类型收集数据、生成文件即可：

document.getElementById('downloadBtn').addEventListener('click', function() {
  // 收集表单各控件数据
  const formData = {};
  // 处理普通输入框
  formData.姓名 = document.getElementById('username').value.trim();
  formData.ID = document.getElementById('userId').value.trim();
  // 处理单选按钮
  const checkedGender = document.querySelector('input[name="gender"]:checked');
  formData.性别 = checkedGender ? checkedGender.value : '未选择';
  // 处理复选框
  const checkedHobbies = document.querySelectorAll('input[name="hobby"]:checked');
  const hobbyList = Array.from(checkedHobbies).map(item => item.value);
  formData.兴趣爱好 = hobbyList.length ? hobbyList.join('、') : '未选择';

  // 生成CSV格式内容
  const headers = Object.keys(formData).join(',');
  // 转义内容特殊符号，避免格式错乱
  const values = Object.values(formData).map(val => `"${val.replace(/"/g, '""')}"`).join(',');
  // 加BOM头解决中文乱码问题
  const csvContent = `\uFEFF${headers}\n${values}`;

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

注意事项 #

• 如果需要生成标准.xlsx格式文件，可以引入SheetJS等开源库，数据收集逻辑和上述一致，仅需替换文件生成部分的代码即可
• 如果需要导出多条表单数据，把values部分改成数组循环拼接多行内容即可
• 代码已适配内容中的逗号、引号等特殊字符，不会出现格式错乱问题

内容的提问来源于stack exchange，提问作者love-to-code