# json2table

**Repository Path**: 9658065/json2table

## Basic Information

- **Project Name**: json2table
- **Description**: 把json对象转换为table展示，导出csv,excle文件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-14
- **Last Updated**: 2025-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# json2table

<h2 align="center">JSON 转表格工具</h2>

<p align="center">
一个基于 Nuxt 3 构建的 JSON 可视化工具，可将 JSON 数据转换为树形结构和表格展示，支持 JsonPath 表达式查询，可导出 JSON、CSV、XLSX 格式。
</p>

## 项目功能

- 📁 JSON 文件上传与解析
- ✏️ 文本框 JSON 输入与编辑
- 🌳 JSON 数据树形结构可视化
- 📊 JSON 数据表格形式展示
- 🔄 实时数据刷新与转换
- 📱 响应式设计，适配多种设备

## 操作说明

### 基本使用流程

1. **上传 JSON 文件**

   - 点击页面顶部的"上传文件"按钮
   - 拖拽或选择 JSON 文件（支持自动替换已上传文件）
   - 点击"读取文件"按钮解析 JSON 数据

2. **手动输入 JSON**

   - 在页面顶部文本框直接输入或粘贴 JSON 内容
   - 点击"转换"按钮进行解析

3. **数据可视化**

   - **树形视图**：左侧面板展示 JSON 层级结构
   - **表格视图**：右侧面板展示扁平化表格数据
   - 点击"刷新节点"按钮更新树形结构
   - 点击"刷新表格"按钮更新表格数据

4. **数据导出**

   - 点击页面顶部的"导出"按钮
   - 选择导出格式（JSON、CSV、XLSX）
   - 点击"导出"按钮完成导出

5. **JsonPath 表达式**

   - 点击页面底部的"JsonPath"输入框
   - 输入 JsonPath 表达式
   - 点击"Go"按钮进行查询

6. **关于项目**
   - 点击页面顶部的"关于"按钮
   - 查看项目相关信息、版本号等

## 使用准备

### 本地克隆与安装

```bash
# 克隆仓库
git clone <your-repository-url> json2table
cd json2table

# 安装依赖
pnpm install

# 开发模式运行
pnpm dev

# 构建生产版本
pnpm build
```

## 技术栈

- Nuxt 3
- Vue 3
- TypeScript
- Pinia (状态管理)
- Element Plus (UI 组件)
- Unocss (样式引擎)