纯前端下载配置文件需用 blob + url.createobjecturl() + a.download 组合，禁止用 data url 或 node.js 方法；配置须转字符串、命名带扩展名；a.click() 必须在用户手势同步上下文中执行。
点击按钮触发浏览器下载配置文件
HTML 本身没有直接“保存文件”能力，button 只能触发 JavaScript 行为。真正起作用的是 Blob + URL.createObjectURL() + a.download 这套组合——它不发请求、不走后端，纯前端生成并触发下载。
常见错误是直接用 location.href = 'data:text/json,...'，这在 Safari 和部分新版 Chrome 上会被拦截或打开新页而非下载；也有人误用 fs.writeFileSync（那是 Node.js，浏览器里根本不存在）。
- 配置数据必须是字符串（如
JSON.stringify(config)），不能直接传对象 - 文件名需带扩展名（如
config.json），否则 Chrome 可能默认存为download无后缀 -
a.click()必须在用户手势（如click事件）同步上下文中执行，异步延迟（如setTimeout）会失败
完整可运行的保存按钮代码
把这段代码放进页面任意位置即可，无需依赖库：
const saveBtn = document.getElementById('save-config-btn');
const config = { theme: 'dark', fontSize: 16, autoSave: true }; // 替换为你的真实配置对象
saveBtn.addEventListener('click', () => {
const blob = new Blob([JSON.stringify(config, null, 2)], {
type: 'application/json'
});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'config.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 用完立即释放，避免内存泄漏
});
注意：JSON.stringify(config, null, 2) 的第二个参数是 replacer（留 null 表示不过滤），第三个是缩进——省略缩进可减小体积，但调试时难读；若配置含 Date、undefined 或函数，需自定义序列化逻辑，否则会丢失或报错。
处理特殊值和循环引用
原始 JSON.stringify 遇到 Date、RegExp、undefined、function 或循环引用会出错或静默丢弃。实际项目中容易踩坑：
-
undefined字段被跳过 → 改用JSON.stringify(config, (k, v) => v === undefined ? null : v) -
Date变成空对象 → 改用v instanceof Date ? v.toISOString() : v - 对象有循环引用 → 必须提前检测并剔除，或用第三方库如
flatted，但会增加包体积 - 想保留
Map/Set→ 需手动转成数组格式，例如Array.from(map.entries())
兼容性与移动端注意事项
这套方案在 Chrome/Firefox/Edge（现代版）完全可用，但 iOS Safari 对 a.download 支持有限：它允许下载，但不会弹出“保存到文件”提示，而是直接存入「文件」App 的「下载」文件夹，且无法指定子目录。
如果用户需要导出为 .txt 或 .csv，只需改 type 和 download 后缀：type: 'text/plain'、a.download = 'notes.txt'；CSV 要确保内容是逗号分隔字符串，并用 \n 换行，首行建议加 BOM（\ufeff）避免中文乱码。
真正麻烦的是大配置（>50MB）：Blob 构造和 URL 创建可能卡顿，且部分浏览器对 Blob URL 生命周期管理不严格——这时候得考虑分块导出或提示用户“配置过大，建议精简后保存”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
