表单导出本质是序列化数据并触发下载，需用formdata获取值、按规范处理csv转义、添加utf-8 bom防乱码，并通过临时a标签+blob下载。
表单导出本质是「序列化 + 触发下载」
HTML 表单本身不提供 export 或 download 功能，所谓“导出”，其实是把表单字段值收集起来，转成某种格式（如 JSON、CSV），再用 Blob + URL.createObjectURL 触发浏览器下载。不是调用某个内置 API 就能一键搞定。
常见错误现象：form.submit() 被误当成导出；点击后页面跳转或刷新，数据没保存；中文乱码（尤其 CSV）；空值/未填字段被忽略但实际需要保留。
- 优先用
FormData获取所有控件值（包括<input type="file">的文件名，但注意它不读取文件内容） - 若需导出为 CSV，手动拼接时必须处理逗号、换行、双引号 —— 直接
.join(",")会崩 - JSON 导出最稳妥，兼容性好，但后端是否接受需确认；
JSON.stringify(formValues, null, 2)可读性更好 - 避免用
form.elements遍历：它包含<button></button>、<fieldset></fieldset>等非数据节点，容易报错
用 FormData 提取值最可靠
FormData 是浏览器原生支持的表单序列化工具，自动适配 name 属性、复选框多选、文件输入等场景，比手写 querySelectorAll("input, select, textarea") 更少出错。
使用场景：表单结构较复杂（含动态增删字段、嵌套 <fieldset></fieldset>）、需兼容 IE10+（FormData IE10 开始支持）。
立即学习“前端免费学习笔记（深入）”；
参数差异：new FormData(formElement) 会读取当前值，但不会包含 disabled 字段；若要包含，得先临时启用再恢复。
示例：
Shop7z网上购物系统支持电脑版+手机版+支付宝及微信支付，支持QQ和微信一键登陆，系统集众家之所长，大气超美观页面+手机版+商品组合套餐+限时抢购秒杀+图片批量上传+淘宝数据包导入+弹出式分类菜单+不同规格不同价格+新订单邮件通知+销售报表打印与Excel输出+物流跟踪打印查询+会员积分及优惠券+邮件群发+图片在线管理+销售统计报表+五种价格体系+礼品礼券+微信公众号支付+扫码支付等等等。
const form = document.querySelector("#myForm");
const data = new FormData(form);
const obj = Object.fromEntries(data.entries()); // 注意：同名多值（如 checkbox）只保留最后一个
⚠️ 容易踩的坑：data.entries() 对多选 <select multiple></select> 或多个同名 <input type="checkbox">，只返回最后一个值。需改用 data.getAll("name") 显式获取数组。
导出 CSV 时双引号和换行必须转义
CSV 不是简单用逗号分隔字符串。RFC 4180 规定：字段含逗号、换行符或双引号时，必须用双引号包裹；字段内双引号要变成两个双引号（" → ""）。
常见错误现象：Excel 打开 CSV 后列错位、某行突然断开、中文显示为 。
- 导出前统一用 UTF-8 BOM 头（
\uFEFF）可解决 Excel 中文乱码 - 不要用
JSON.stringify(row).replace(/,/g, "")模拟 CSV —— 这完全违背格式规范 - 推荐轻量方案：对每个字段执行
value.includes(",") || value.includes("\n") || value.includes('"') ? `"${value.replace(/"/g, '""')}"` : value
触发下载别用 window.open 或 iframe
window.open("data:text/csv,...") 在 Safari 和部分 iOS 浏览器会被拦截；iframe 方案在 Chrome 新版本中已失效（iframe.src 设为 blob URL 后无法触发下载）。
唯一稳定方式是创建临时 <a></a> 元素，设 href 为 blob URL，加 download 属性，再模拟点击：
const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "form-data.csv";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
⚠️ 容易被忽略的点：URL.revokeObjectURL 必须调用，否则 blob 内存不释放；a.click() 必须在用户手势（如 click 事件）内执行，异步延迟（setTimeout）会导致失败。
