如何使用JavaScript动态收集表单数据存入数组并导出客户端CSV文件

• 全局声明数据存储数组：将存储所有表单数据的数组放在script标签的顶层作用域，避免按钮回调内的数组被反复初始化，保证数据可以持续累计。
• 为「添加」按钮绑定独立点击事件：负责读取当前表单的所有字段值、做基础校验、将单条数据追加到全局数组、清空输入框供下次输入。
• 改造下载按钮逻辑：从全局数组中读取所有累计数据，生成带表头、兼容中文、处理特殊字符的CSV文件后触发下载。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单数据导出CSV</title>
  </head>
  <body>
    <p>姓名</p>
    <input type="text" name="txtname" id="txtname" />
    <p>地址</p>
    <input type="text" name="txtend" id="txtend" />
    <p>电话</p>
    <input type="text" name="txtphone" id="txtphone" />
    <p>鞋码</p>
    <input type="text" name="txtshoe" id="txtshoe" />
    <p>城市</p>
    <input type="text" name="txtcity" id="txtcity" />
    <br /><br />
    <button type="button" id="txtins">添加</button>
    <button type="button" id="txtcsv">下载CSV</button>
    <script>
      // 全局存储所有累计的用户数据，每行是一个数组，对应表单字段顺序
      const userDataList = [];

      // 给添加按钮绑定事件
      document.getElementById("txtins").addEventListener("click", function () {
        // 读取所有输入框的值，去除首尾空格
        const name = document.getElementById("txtname").value.trim();
        const address = document.getElementById("txtend").value.trim();
        const phone = document.getElementById("txtphone").value.trim();
        const shoeSize = document.getElementById("txtshoe").value.trim();
        const city = document.getElementById("txtcity").value.trim();

        // 基础校验：姓名为空不允许添加，可根据需求调整必填字段
        if (!name) {
          alert("姓名不能为空");
          return;
        }

        // 将当前行数据追加到全局数组
        userDataList.push([name, address, phone, shoeSize, city]);

        // 清空所有输入框，方便下次输入
        document.querySelectorAll("input[type='text']").forEach(input => input.value = "");
      });

      // 给下载按钮绑定事件
      document.getElementById("txtcsv").addEventListener("click", function () {
        // 若没有数据则提示
        if (userDataList.length === 0) {
          alert("暂无可导出的数据");
          return;
        }

        // CSV转义函数：处理包含逗号、双引号、换行的内容，避免列错乱
        const escapeCSVCell = (val) => {
          return `"${String(val).replace(/"/g, '""')}"`;
        };

        // 定义CSV表头，和存储的字段顺序对应
        const headers = ["姓名", "地址", "电话", "鞋码", "城市"];
        const csvRows = [];

        // 拼接表头行
        csvRows.push(headers.map(escapeCSVCell).join(","));

        // 拼接所有用户数据行
        userDataList.forEach(row => {
          csvRows.push(row.map(escapeCSVCell).join(","));
        });

        // 开头加UTF-8 BOM标记，避免Excel打开中文乱码
        const csvContent = "\ufeff" + csvRows.join("\n");

        // 生成Blob对象触发下载，比data URI兼容性更好
        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 = "用户信息列表.csv";
        document.body.appendChild(link);
        link.click();
        // 释放生成的URL对象
        URL.revokeObjectURL(downloadUrl);
        document.body.removeChild(link);
      });
    </script>
  </body>
</html>

• 数据存储结构：每条数据按表单字段的顺序存入数组，和CSV的行列结构一一对应，后续处理不需要做额外的格式转换。
• 乱码问题：\ufeff BOM标记必须加，否则Windows系统下用Excel打开导出的CSV会出现中文乱码。
• 特殊字符处理：escapeCSVCell函数会自动处理用户输入的逗号、双引号、换行符，避免CSV的列被错误拆分。
• 空数据拦截：下载前会判断是否有累计数据，避免导出空文件。

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