CSV导出需严格处理空值、特殊字符、字段顺序、UTF-8 BOM及大文件下载:空值转"",含",\n,\r,"的值双引号包裹并转义"为"",列顺序显式定义,字符串开头加\uFEFF BOM,用Blob+URL.createObjectURL()下载并及时revoke,IE10+回退msSaveBlob。
用
获取表单值再转 CSV 时,空值和特殊字符怎么处理
直接遍历
的键值对导出 CSV,容易把空字段写成
,或让含换行、逗号、双引号的值破坏 CSV 结构。必须对每个值做转义。
空值统一转为
(空字符串加双引号),避免列错位
含
的值,先替换成
(两个双引号),再整体用双引号包裹
含
、
、
、
的值,一律用双引号包裹
不要用
处理字段——它加的是 JSON 引号和转义,不是 CSV 规范
前端生成 CSV 文件下载,
比
+
更稳
URL 在 IE 和部分旧版 Chrome 中有长度限制(约 2MB),超长 CSV 会静默失败;而
基于 Blob,无此限制,兼容性也更好。
构造 CSV 字符串后,用
再用
得到地址
赋值后触发点击,记得在
后调用
避免内存泄漏
注意:IE10+ 需用
回退,否则不触发下载
中文导出乱码?BOM 头不是可选项,是必加项
Excel 默认用系统编码(Windows 是 GBK),但 CSV 文件本身没编码声明。不加 UTF-8 BOM,Excel 打开中文就是乱码;加了 BOM,Excel 才认得这是 UTF-8。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
BOM 就是三个字节:
,必须放在 CSV 字符串最开头
不能写成
再塞进 Blob——要确保 Blob 的
含
,且字符串确实是 UTF-8 编码(JS 字符串默认是 UTF-16,但现代浏览器 Blob 构造时会正确转码)
验证方法:用 VS Code 打开导出文件,右下角看编码是否显示为 “UTF-8 with BOM”
表单字段顺序和 CSV 列顺序不一致?别依赖
或
的迭代顺序不保证与 HTML 表单 DOM 顺序一致(尤其动态增删字段后),靠
或
遍历可能导出错列。
立即学习
“
前端免费学习笔记(深入)
”;
显式定义列顺序:用数组存字段名,如
逐个从
取值,而不是用
如果表单用了
这类嵌套命名,
仍按扁平 key 存,需自行解析或提前规范命名(如
)
CSV 导出看着简单,但字段转义、BOM、顺序、编码、大文件这五点,漏一个就可能在某个用户那里打不开或数据错位。尤其是 Excel 对 BOM 和换行的容忍度极低,别省那几行代码。
FormDataFormData,,"""""\n\r,"JSON.stringify()URL.createObjectURL()a.downloaddata:data:URL.createObjectURL()new Blob([csvString], { type: 'text/csv;charset=utf-8;' })URL.createObjectURL(blob)a.hrefa.click()URL.revokeObjectURL()navigator.msSaveBlob()\uFEFF"\uFEFF" + csvStringtypecharset=utf-8for...inFormData.keys()FormDatakeys()entries()const columns = ['name', 'email', 'phone']formData.get(key)for (let [key, value] of formData)name="user[age]"FormDatauser_age