如何用JSON Formatter JS一键美化JSON数据：超简单纯JS实现方案

如何用JSON Formatter JS一键美化JSON数据：超简单纯JS实现方案 🚀

【免费下载链接】json-formatter-js Render JSON objects in beautiful HTML (pure JavaScript) 项目地址: https://gitcode.com/gh_mirrors/js/json-formatter-js

JSON Formatter JS 是一款轻量级纯JavaScript工具，能将JSON对象渲染为美观且支持折叠导航的HTML界面。无论是开发调试还是数据展示，它都能让复杂JSON数据一目了然，彻底告别杂乱无章的原始格式！

📦 30秒快速安装指南

方法1：NPM安装（推荐）

npm install --save json-formatter-js

方法2：直接引入脚本

从项目的dist文件夹中获取json-formatter.js，在HTML中直接引入即可使用。

✨ 三步上手使用教程

1. 导入模块

import JSONFormatter from "json-formatter-js";

2. 创建JSON数据

const myJSON = { 
  name: "JSON Formatter", 
  features: ["折叠导航", "纯JS实现", "自定义主题"], 
  isAwesome: true 
};

3. 渲染美化界面

const formatter = new JSONFormatter(myJSON);
document.body.appendChild(formatter.render());

只需这三行代码，就能在网页中看到优雅的JSON展示效果！🎉

⚙️ 高级配置：打造你的专属JSON视图

控制展开层级

// 默认展开2层
const formatter = new JSONFormatter(myJSON, 2);

• 0：全部折叠
• Infinity：完全展开所有层级

自定义配置项

const formatter = new JSONFormatter(myJSON, 1, {
  hoverPreviewEnabled: true,  // 启用悬停预览
  theme: "dark",              // 切换深色主题
  animateOpen: true,          // 展开动画
  maxArrayItems: 50           // 数组分组大小
});

更多配置项可查看源码 src/index.ts 中的详细定义。

🚀 实用API功能

动态调整展开深度

// 渲染后再调整展开到第3层
formatter.openAtDepth(3);

实时更新数据

// 无需重新创建实例，直接更新数据
formatter.update(newJSONData);

💡 开发小贴士

本地开发环境搭建

# 克隆仓库
git clone https://gitcode.com/gh_mirrors/js/json-formatter-js

# 安装依赖
npm install

# 启动开发服务器
npm run dev

运行测试用例

npm test

测试代码位于 test/spec.ts，确保你的自定义配置不会破坏核心功能。

🎨 主题定制

想要个性化展示风格？查看主题样式源码 src/style.less，你可以：

• 修改颜色方案
• 调整字体大小
• 自定义折叠图标
• 添加动画效果

📄 许可证信息

本项目采用 MIT 许可证开源，详情参见 LICENSE 文件。

---

通过 JSON Formatter JS，让JSON数据展示从此变得优雅而高效！无论是开发调试还是用户界面，它都能为你的项目增添一份专业感。现在就尝试将它集成到你的下一个Web应用中吧！💪

【免费下载链接】json-formatter-js Render JSON objects in beautiful HTML (pure JavaScript) 项目地址: https://gitcode.com/gh_mirrors/js/json-formatter-js