导出按钮无响应需检查download属性是否正确作用于标签且配合href使用；csv中文乱码须加utf-8 bom头；json或xlsx导出需依赖js库如sheetjs；文件名由download属性显式指定，safari需data url降级，大数据量应走服务端。
导出按钮点击后没反应？检查 download 属性是否作用在 <a></a> 上
HTML 本身不提供“导出数据”能力，所谓“导出”本质是触发浏览器下载行为。最简单可靠的方式是用带 download 属性的 <a></a> 标签，配合 Blob 或 data URL 动态生成内容。
常见错误是把 download 加在 <button></button> 或其他非 <a></a> 元素上——这属性只对 <a></a> 生效，加了也无效。
-
download必须搭配href使用，且href值不能跨域（如指向外站或file://） - 若数据来自 JS（比如用户填写的表单），需先用
Blob构造内容，再用URL.createObjectURL()生成可下载链接 - Chrome/Firefox 支持
download，但 Safari（尤其 iOS）基本忽略该属性，需降级为location.href = 'data:text/csv,...'触发下载
导出 CSV 时中文乱码？必须加 UTF-8 BOM 头
直接用 new Blob(['姓名,年龄\n张三,25'], {type: 'text/csv'}) 在 Windows Excel 里打开大概率是乱码——因为 Excel 默认按 ANSI 解析 CSV，不识别 UTF-8 编码。
解决方法是在 CSV 字符串前插入 UTF-8 BOM（\uFEFF），让 Excel 主动识别为 UTF-8：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const csvContent = '\uFEFF' + '姓名,年龄\n张三,25';
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
- 仅对 Windows Excel 有效；macOS Numbers、Google Sheets 不需要 BOM
- 不要用
encodeURI或encodeURIComponent包裹整个 CSV，会破坏格式 - 字段含逗号、换行、双引号时，需按 RFC 4180 规则转义：用双引号包裹字段，字段内双引号写成两个（
"→""）
想导出 JSON 或 Excel（.xlsx）？HTML 无法直接生成，得靠 JS 库
纯 HTML + 原生 JS 只能导出文本类格式（CSV、TXT、JSON 字符串）。如果要导出真正的 .xlsx 文件，必须借助库，比如 SheetJS（xlsx 包）。
注意：download 属性对本地生成的 .xlsx 同样有效，但文件内容必须由 JS 构造：
import * as XLSX from 'xlsx';
const ws = XLSX.utils.json_to_sheet([{姓名: '张三', 年龄: 25}]);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, '数据');
const wbout = XLSX.write(wb, {bookType: 'xlsx', type: 'array'});
const blob = new Blob([wbout], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = '导出数据.xlsx';
a.click();
URL.revokeObjectURL(url);
- 避免用
type: 'base64'，iOS Safari 对 base64 data URL 下载支持差 -
xlsx包体积较大（~300KB），如只需 CSV，别为省事引入它 - 服务端导出更稳妥（尤其大数据量），前端生成大 Excel 容易卡死或内存溢出
用户点了“导出”但文件名是随机字符串？download 属性值必须显式指定
如果没给 <a></a> 的 download 属性赋值，或赋值为空字符串（download=""），Chrome 会用 URL 路径的最后一段当文件名（比如 blob:https://xxx/abcd1234 就存成 abcd1234）。
- 务必写成
<a download="用户数据.csv"></a>，值中不要含路径（./data.csv或/export/data.csv都会被忽略） - 文件名中的特殊字符（如空格、中文）无需编码，现代浏览器都支持原样保存
- 若用 Blob +
URL.createObjectURL，download属性值决定最终保存名，与 Blob 内容无关
实际导出逻辑往往夹在表单提交、状态校验、Loading 提示之间，最容易被忽略的是 Safari 兼容性兜底 和 大文件内存控制——前者靠 data URL 降级，后者得判断数据量，超 10 万行就该建议走服务端。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
