如何在纯前端环境中创建并保存 JSON 文件（无需服务器）-html教程-PHP中文网

如何在纯前端环境中创建并保存 JSON 文件（无需服务器）

本文介绍如何使用 javascript 在浏览器中直接生成 json 数据并触发本地文件下载，无需后端服务，兼容主流浏览器。

本文介绍如何使用 javascript 在浏览器中直接生成 json 数据并触发本地文件下载，无需后端服务，兼容主流浏览器。

在现代 Web 开发中，常有需求让用户在不依赖服务器的情况下，将前端生成的数据（如配置、日志、表单结果等）导出为文件。例如，将一个 JavaScript 对象序列化为格式化 JSON 并保存为 result.json。由于浏览器安全策略限制，URL.createObjectURL() 无法直接接受普通对象或字符串——它必须接收一个符合规范的 Blob 实例，且构造方式需严格匹配类型签名，否则会在 Chrome 或 Firefox 中抛出类似 Overload resolution failed 或 Argument 1 is not valid 的错误。

推荐采用成熟、轻量、跨浏览器兼容的方案：FileSaver.js。它封装了不同浏览器（包括旧版 IE）的下载逻辑，自动处理 Blob 创建、URL.createObjectURL 调用、标签触发下载及内存清理，显著降低兼容性风险。

✅ 正确实现步骤

安装 FileSaver.js（任选其一）：

NPM：npm install file-saver

CDN（HTML 中引入）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

编写导出函数（ES6 模块示例）：

HISUI 前端框架开发指南（IRIS版）
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。

下载
```
import saveAs from 'file-saver';

export function saveJSON(data, filename = 'data.json') {
  const jsonStr = JSON.stringify(data, null, 2); // 格式化输出，提升可读性
  const blob = new Blob([jsonStr], {
    type: 'application/json;charset=utf-8'
  });
  saveAs(blob, filename);
}
```

调用示例：

const config = { theme: 'dark', fontSize: 14, autoSave: true };
saveJSON(config, 'user-settings.json'); // 点击即触发下载对话框

⚠️ 注意事项

❌ 不要直接传入字符串或对象给 URL.createObjectURL() —— 必须是 Blob 或 MediaSource 等合法类型；
✅ Blob 构造时 type 字段中的 charset=utf-8 建议显式声明，确保中文等 Unicode 字符正确编码；
? saveAs() 第三个参数（如 { autoBOM: false }）仅在部分版本中支持；当前最新版 FileSaver.js（v2.0.5+）已默认处理 UTF-8 BOM，通常无需手动设置；
? FileSaver.js 会自动调用 URL.revokeObjectURL()，避免内存泄漏，无需手动清理；
? 在 Chrome/Firefox/Edge（Chromium）中表现一致；Safari 15.4+ 已支持 saveAs，旧版 Safari 可降级为 window.open(URL.createObjectURL(blob))（仅预览，不强制下载）。

通过 FileSaver.js，你可以在纯静态页面（file:// 协议）或任意前端项目中，稳定、简洁地实现“一键导出 JSON”功能——真正零服务端依赖，开箱即用。