本文解决在 JavaScript 中通过动态创建 标签并调用 download.click() 实现 JSON 文件下载时，页面仍发生意外刷新的问题——根本原因往往并非代码逻辑错误，而是开发服务器（如 VS Code Live Server）的自动刷新机制干扰所致。
本文解决在 javascript 中通过动态创建 `` 标签并调用 `download.click()` 实现 json 文件下载时，页面仍发生意外刷新的问题——根本原因往往并非代码逻辑错误，而是开发服务器（如 vs code live server）的自动刷新机制干扰所致。
你提供的代码逻辑本身是完全正确且符合现代浏览器规范的：
button.addEventListener("click", function (event) {
event.preventDefault(); // ✅ 阻止按钮默认行为（如表单提交）
const json = { a: "abc", d: "def" };
const blob = new Blob([JSON.stringify(json, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const download = document.createElement('a');
download.href = url;
download.download = "test.json";
download.style.display = 'none'; // ? 推荐：避免插入 DOM 后影响布局
document.body.appendChild(download);
download.click();
document.body.removeChild(download); // ? 清理 DOM
URL.revokeObjectURL(url); // ✅ 及时释放内存
});
✅ 关键点说明：
-
event.preventDefault()已正确作用于按钮点击事件，无需（也无法）对download.click()再次阻止默认行为——因为<a download></a>的click()是程序化触发的下载行为，不触发导航或刷新； -
download属性仅在同源 URL 下生效（blob:协议属于同源），因此该方案在主流浏览器中均可靠； - 动态创建的
<a></a>元素无需添加到文档流即可触发下载，但为兼容极少数旧环境或避免潜在渲染异常，建议临时 append 到document.body并立即移除。
⚠️ 真正导致“页面刷新”的常见元凶：开发服务器热重载机制
例如 VS Code 的 Live Server 扩展会在检测到项目目录（尤其是 download/、dist/ 或根目录）下有新文件生成（如 test.json 被写入磁盘）时，自动触发整个页面刷新——这与你的 JS 逻辑无关，而是服务器监听文件系统变更所致。
? 快速验证方法：
- 在浏览器中打开开发者工具 → Network 面板；
- 点击下载按钮；
- 观察是否出现
test.json的fetch/XHR请求（正常）→ 还是出现document类型的HTML页面重新加载（异常）； - 若后者发生，且控制台显示
Live Reload enabled或类似日志，请关闭 Live Server，改用原生http-server、Vite 开发服务器，或禁用其文件监听（右键状态栏 Live Server 图标 → “Disable Live Reload”）。
✅ 替代方案（规避 Live Server 干扰）：
- 使用
URL.createObjectURL()生成的blob:URL 不会写入磁盘，天然绕过文件监听； - 确保不将生成的 JSON 文件实际保存到项目目录（除非你明确需要持久化）；
- 如需调试下载内容，可用
console.log(JSON.stringify(json))替代文件落地。
? 总结：你的代码无需修改。当遇到“点击下载却刷新页面”时，请优先排查开发服务器行为，而非怀疑 preventDefault() 失效——这是前端开发中一个典型且易被忽略的环境干扰问题。
