如何在React.js中动态创建带有数据的.json格式文件

Node.js 的 fs 模块是服务端专属API，仅能在Node运行环境调用，React运行在浏览器环境，没有本地文件系统的直接操作权限，所以需要通过浏览器原生下载API实现动态生成JSON文件并导出到用户本地。

实现步骤 #

• 第一步：封装通用导出JSON函数

const exportJSON = (data, fileName = 'data.json') => {
  // 将JS对象序列化为格式化的JSON字符串
  const jsonStr = JSON.stringify(data, null, 2)
  // 创建Blob对象，指定MIME类型为JSON
  const blob = new Blob([jsonStr], { type: 'application/json' })
  // 生成指向Blob对象的临时URL
  const url = URL.createObjectURL(blob)
  // 创建临时a标签触发下载
  const a = document.createElement('a')
  a.href = url
  a.download = fileName
  document.body.appendChild(a)
  a.click()
  // 清理临时元素和URL，避免内存泄漏
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}

• 第二步：在React组件中调用

import { useState } from 'react'

function App() {
  // 示例要导出的JSON数据
  const [userData, setUserData] = useState({
    name: "张三",
    age: 25,
    hobbies: ["读书", "跑步", "编程"]
  })

  const handleExport = () => {
    exportJSON(userData, '用户信息.json')
  }

  return (
    <button onClick={handleExport}>导出JSON文件</button>
  )
}

export default App

注意事项 #

• 该方案触发浏览器默认下载行为，文件会保存到用户设置的默认下载目录，受浏览器安全限制，无法自定义本地保存路径
• 如果仅需要在React应用内部存储JSON数据供后续读取使用，无需生成实体文件，可直接使用localStorage、sessionStorage或IndexedDB存储
• 如果需要将JSON数据同步到服务端，直接将JSON.stringify处理后的字符串传给后端接口即可，无需走本地导出流程

内容的提问来源于stack exchange，提问作者Lohith K.