可用<a>标签配合download属性与data:URL实现CSV伪下载，需加UTF-8 BOM头\uFEFF防中文乱码，字段含特殊字符须双引号包裹并转义，大文件宜用Blob分块处理，iOS Safari需降级为window.open或服务端生成。
HTML里怎么用标签触发CSV下载
浏览器本身不支持直接生成并下载CSV文件，但可以用 <a> 标签配合 download 属性 + data: URL 实现“伪下载”。这不是真走后端，而是把数据拼成CSV字符串、转成Blob或data URL再触发下载。
常见错误现象：download 属性失效（点链接只跳转不下载）、中文乱码、Excel打开全是乱码或合并单元格。
- 必须确保
href是同源URL 或data:协议；跨域URL加download会被忽略 - 中文要 UTF-8 编码 + BOM 头，否则 Excel 默认用GBK读，第一行全乱码；加
\uFEFF开头就能解决 - 字段含逗号、换行、双引号的，必须用双引号包裹，且内部双引号要转义为两个双引号（
""） - 不要用
location.href = 'https://www.php.cn/link/080261e4427a081fc6e637b654f590ee'触发，iOS Safari 不支持
示例（导出两道错题）：
const csvContent = "\uFEFF题干,答案,错误选项\n\"2+2=？\",\"4\",\"2,3,5\"\n\"JSON.parse()参数必须是\",\"字符串\",\"对象,数字,布尔\"";
const encodedUri = `data:text/csv;charset=utf-8,${encodeURIComponent(csvContent)}`;
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "错题本.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
为什么不能直接写死CSV内容在href里
因为 href="https://www.php.cn/link/080261e4427a081fc6e637b654f590ee" 写死时，URL长度受限（Chrome约2MB，旧版IE仅2KB），错题一多就截断。动态生成能控制内容，也方便加时间戳、用户ID等上下文。
立即学习“前端免费学习笔记（深入）”；
更关键的是：静态href无法响应式处理用户当前筛选状态（比如只导出“数学”“近3天”的错题），必须运行时拼接。
- 拼CSV时别用
array.join(",")简单粗暴——没处理特殊字符，Excel会错列 - 字段含换行符（
\n）必须放进双引号，否则整行结构崩掉 - 如果错题数据来自API，记得等
fetch完再生成下载，别在loading状态就绑click
导出大错题本（>1000条）卡顿怎么办
纯前端拼接万行CSV字符串会阻塞主线程，用户感觉页面卡死。不是浏览器不行，是JavaScript单线程同步拼接太重。
- 用
for循环分块处理（比如每200条做一次setTimeout），让出渲染权 - 更稳的做法：用
new Blob([csvString], {type: "text/csv"})+URL.createObjectURL()，比data URL内存更友好 - 超过5000条建议提示“已生成，正在下载…”并禁用按钮，避免用户连点多次创建重复Blob URL（得手动
URL.revokeObjectURL()清理）
性能影响明显：1000条错题，data URL方式内存峰值高、GC压力大；Blob方式更接近原生文件流行为。
移动端iOS Safari导不出CSV的坑
iOS Safari 对 <a download> 支持极差，尤其data URL几乎必失败。不是代码写错了，是系统限制。
真实场景下，用户点“导出错题”结果没反应，查控制台也没报错——大概率就是这个原因。
- 必须降级：改用
window.open(encodedUri)，虽然会新开页但至少能保存 - 或者服务端兜底：前端收集错题ID列表，POST给后端生成CSV并返回真实URL（带签名，防遍历）
- 别信“iOS 16已修复”，实测 iOS 17.5 仍不稳定，尤其微信内置浏览器
容易被忽略的是：用户根本不会告诉你他在微信里点的，所以埋点里要记 UA，导出失败时自动 fallback 到提示“请复制内容粘贴到表格中”并给出纯文本格式。
