JS生成JSON导出为本地文件方法

• Blob 类型必须显式指定 type: 'application/json'，否则部分浏览器可能保存为 .txt
• 对象 URL 必须在下载完成后手动释放（URL.revokeObjectURL），否则内存泄漏
• 触发 .click() 必须发生在用户事件回调内（如 button.onclick），否则 Safari 会拒绝

Blob 构造时的编码和换行处理

JSON 字符串本身是 UTF-8，但若含中文或特殊符号，直接传入 new Blob([jsonString]) 可能因 JS 字符串内部编码与 Blob 默认编码不一致导致乱码。稳妥做法是显式转为 Uint8Array 或确保 Blob 构造参数为 string + 正确 type。

• 推荐写法：new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }) —— JSON.stringify 输出已是合法 UTF-8 字符串
• 避免：new Blob([new TextEncoder().encode(jsonString)])，多此一举且易漏掉 type
• 如果后端要求无空格/无换行（如 minified），把 JSON.stringify(data) 的第二个、第三个参数去掉即可

完整可运行示例（含错误防护）

function downloadJSON(data, filename = 'data.json') {
  try {
    const jsonStr = JSON.stringify(data, null, 2);
    const blob = new Blob([jsonStr], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url); // 必须立即释放
  } catch (err) {
    console.error('JSON 导出失败:', err);
  }
}

// 使用示例：
downloadJSON({ name: '张三', scores: [89, 92, 78] }, 'report.json');

注意：a.download 属性在 Firefox 中对跨域 URL 无效，但此处是 blob: 协议，完全兼容。Safari 对 download 属性支持良好，但要求点击必须由用户真实触发——别在 setTimeout 或异步回调里调用 downloadJSON。

最常被忽略的是 URL.revokeObjectURL 的调用时机和位置：它必须在 a.click() 之后、且不能放在异步回调里（比如 a.onload 不可靠），因为下载是异步发起但对象 URL 应立即释放。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~