# @andypf/json-viewer 中文文档

规范地址：https://npmcn.com/package/%40andypf/json-viewer/

版本：2\.8\.1
npm 元数据更新时间：2026-10-27T09:39:03.112Z
中文译文更新时间：2026-11-06T03:41:54.244Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40andypf/json-viewer
原文对照：https://npmcn.com/package/%40andypf/json-viewer/?lang=original
项目主页：https://github.com/andypf/json-viewer#readme
源码仓库：https://github.com/andypf/json-viewer

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：394 kB，12 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2023-10-26T04:39:24.638Z
- 最新版本发布：2026-10-27T09:39:02.109Z
- 近 30 天下载量：49934（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：40（近 12 个月 14 个）

## 中文简介

一个Javascript 库,可以把 Json 形象化

## 安装

```sh
npm install @andypf/json-viewer
```

也可以使用：`pnpm add @andypf/json-viewer`、`yarn add @andypf/json-viewer`、`bun add @andypf/json-viewer`

## README

# json- 查看器

![Size](https://img.shields.io/badge/size-37.9KB-green.svg) ![Gzipped](https://img.shields.io/badge/gzipped-12.4KB-brightgreen.svg) [![License](https://img.shields.io/npm/l/%40andypf%2Fjson-viewer?color=yellow)](https://github.com/andypf/json-viewer/blob/main/LICENSE.md) ![Coverage Status](https://img.shields.io/badge/coverage-88.5%25-orange.svg) [![Version](https://img.shields.io/npm/v/%40andypf%2Fjson-viewer)](https://github.com/andypf/json-viewer/blob/main/LICENSE.md) ![Tools](https://img.shields.io/badge/tools-Shadow_DOM%2C_Web_Component%2C_React-red)

**json- 查看器** 是一款基于JavaScript的现代JSON数据可视化工具,由包括Web组件和Shadow DOM在内的尖端网络技术所设计. 这个多功能工具授权您在您的网页浏览器中以优雅和有吸引力的方式呈现JSON数据. 它非常适合用于独立的网络应用,并与React等通俗框架无缝地融合.

这个项目的包装大小约为 **37.9KB (韩语)** 已修改( n)**12.4KB 击出**) (中文(简体) ). 请注意,大约有三分之一的这种规模是专门用于46个预先确定的主题,从而可以进行丰富的视觉定制.

![Demo Dark](https://npmcn.com/package/%40andypf/json-viewer/doc/jsonViewer.png)

![Demo Light](https://npmcn.com/package/%40andypf/json-viewer/doc/jsonViewer_light.png)

## 演示

为了现场展示 **json- 查看器**请来看我们 [演示](https://pfau-software.de/json-viewer/demo/)。 。 。 .

## 受到反应的启发- Json-view

**json- 查看器** 受到功能和方便用户的启发 [反应- json- 视图](https://github.com/mac-s-g/react-json-view)然而,我们的任务是使这个功能丰富的可视化工具超越反应的范围。 我们从反应-Json-观点中 采纳了最好的想法 **json- 查看器** 以迎合更广泛的受众.

## 特征

-   JSON数据时髦可视化.
-   支持浏览器和React应用程序中的用法.
-   利用Web组件和Shadow DOM等现代网络技术.
-   便于融入现有项目.
-   自定义的演示文稿和配置 .

## 安装

### 无

你可以轻松地安装 **json- 查看器** 使用 npm 的软件包,其命令如下:

```bash
npm install @andypf/json-viewer
```

接下来, 把它纳入您的项目中 :

```javascript
import "@andypf/json-viewer"
```

现在,你准备在您的网络应用程序中将其作为自定义的 HTML 标记:

```html
<andypf-json-viewer data='{"test": "Hello World"}'></andypf-json-viewer>
```

### 浏览器集成

用于 **json- 查看器** 在您的 Web 应用程序中, 加载 json-viewer.js 并嵌入您选择的 HTML 元素中的 JSON 对象并初始化 **json- 查看器** 内容如下:

```html
<!doctype html>
<html>
  <head>
    <script src="https://pfau-software.de/json-viewer/dist/iife/index.js"></script>
  </head>
  <body>
    <andypf-json-viewer>{"name": "Helmut"}</andypf-json-viewer>
  </body>
</html>
```

## 使用量

### 作为 HTML 元素

要在您的 HTML 中包含“ json- Viewer” 元素, 您可以通过选项作为属性 :

```html
<andypf-json-viewer
  indent="2"
  expanded="true"
  theme="default-light"
  show-data-types="true"
  show-toolbar="false"
  expand-icon-type="arrow"
  show-copy="true"
  show-size="true"
  expand-empty="false"
  data='{"example": "data"}'
></andypf-json-viewer>
```

您也可以提供 `data` 选项作为“json-viewer”元素的内容:

```html
<andypf-json-viewer
  indent="2"
  expanded="true"
  theme="default-light"
  show-data-types="true"
  show-toolbar="false"
  expand-icon-type="square"
  show-copy="true"
  show-size="true"
>
  { "string": "this is a test ...", "integer": 42, "array":[ 1, 2, 3, "test", "NaN"], "float":3.14159,
  "string_number":"1234", "date": "Tue, Oct 17, 2023, 08:58 AM" }
</andypf-json-viewer>
```

您也可以为 JSON 文件提供URL 作为“ 数据 ” :

```html
<andypf-json-viewer
  data="https://microsoftedge.github.io/Demos/json-dummy-data/64KB.json"
  theme="monokai"
  expanded="2"
  show-toolbar="true"
></andypf-json-viewer>
```

### 使用 JavaScript API

如果您喜欢 JavaScript, 您可以在程序上设置选项 :

```javascript
const jsonViewer = document.createElement("andypf-json-viewer")
jsonViewer.id = "json"
jsonViewer.expanded = 2
jsonViewer.indent = 2
jsonViewer.showDataTypes = true
jsonViewer.theme = "monokai"
jsonViewer.showToolbar = true
jsonViewer.showSize = true
jsonViewer.showCopy = true
jsonViewer.expandIconType = "square"
jsonViewer.expandEmpty = false
jsonViewer.data = { example: "data" }
```

### 与反应合并

**json- 查看器** 也可以在您的 React 应用程序中作为 React 组件.

```js
import React from "react"
import JsonViewer from "@andypf/json-viewer/dist/esm/react/JsonViewer"

// use the component in your app!
const MyComponent = () => <JsonViewer data={jsonObject} />
```

或者,如果你更喜欢一种更定制的方法:

```js
import React from "react"
import "@andypf/json-viewer"

const JsonViewer = ({ data, ...props }) => {
  const ref = React.useRef(null)

  React.useEffect(() => {
    if (ref.current) {
      ref.current.data = data
    }
  }, [data])
  return <andypf-json-viewer ref={ref} {...props} />
}

export default JsonViewer
```

## 选项

| 选项 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `indent` | 数目 | 2个 | 渲染 JSON 数据时用于缩进的空格数 . |
| `expanded` | 数字或布尔 | 1个 | JSON数据被扩展到的初始深度. 也可以设置为 `true` 充分扩展数据,或 `false` 来摧毁它. |
| `theme` | 字符串或 JSON 对象 | "默认灯" | 用于塑造JSON取景器的主题. 您可以提供自定义 CSS 变量的 JSON 对象 。 还有很多 [预定义的主题](https://npmcn.com/package/%40andypf/json-viewer/#readme-themes) |
| `showDataTypes` (单位:千美元)`show-data-types`(中文(简体) ) | 布尔 | 真实 | 是否在数值旁显示数据类型(例如“字符串”、“数字”等). |
| `showToolbar` (单位:千美元)`show-toolbar`(中文(简体) ) | 布尔 | 虚假 | 是否以扩展和缩进选项及搜索栏显示工具栏 . |
| `expandIconType` (单位:千美元)`expand-icon-type`(中文(简体) ) | 字符串 | "地道","地道" | 用于扩展和倒塌JSON节点的图标类型. 你可以选择"平方","圆"或"狭". |
| `showCopy` (单位:千美元)`show-copy`(中文(简体) ) | 布尔 | 真实 | 是否显示复制按钮将 JSON 数据复制到剪贴板 . |
| `copyWithKey` (单位:千美元)`copy-with-key`(中文(简体) ) | 布尔 | 虚假 | 是否同时复制密钥和值( E)`"key": value`)或只是单击复制按钮时的值。 何时 `false` (default),仅复制该值以进行后向兼容. |
| `showSize` (单位:千美元)`show-size`(中文(简体) ) | 布尔 | 真实 | 是否显示 JSON 数据的大小( 字符数) . |
| `expandEmpty` (单位:千美元)`expand-empty`(中文(简体) ) | 布尔 | 真实 | 是否自动扩展空对象和数组 。 何时 `false`中,无论何时 `expanded` 级别,但仍可手动扩展. |
| `preserveExpanded` (单位:千美元)`preserve-expanded`(中文(简体) ) | 布尔 | 虚假 | 数据更新时是否保留节点的扩展/缩合状态 . |
| `data` | 字符串 JSON 或 URL 字符串 | (未说明) | JSON数据要可视化. 您可以以字符串 JSON 或 URL 字符串提供 。 或者,您可以通过API作为对象或标记内的内容传递数据. |

## 工具栏函数

如果启用工具栏,用户可以访问以下功能:

-   重置:恢复原视图.
-   扩展: 将所有级别都扩大一个(+1) .
-   折叠:将所有级别折叠为一(-1).
-   缩进:将缩进水平增加一(+1).
-   缩进:将缩入水平减少一(-1).
-   搜索:搜索JSON内部的特定元素.

## 主题

“主题”选项允许您从各种主题中选择:

-   冷漠
-   月光灯
-   餐厅
-   地图集
-   铃声
-   黑金属
-   酿酒厂
-   亮点
-   布鲁克
-   黑树树
-   刷子树
-   粉笔
-   马戏团
-   经典黑暗
-   经典光线
-   密码学校
-   纸杯蛋糕
-   库珀蒂诺
-   达鲁花
-   暗齿
-   默认黑暗
-   默认亮度
-   德拉库拉
-   八十岁
-   木头
-   平顶
-   水果苏打
-   gi
-   谷歌- 暗边
-   发光
-   灰度- 暗色
-   灰度光线
-   绿色屏幕
-   粗鲁-黑暗-硬
-   粗发-发光-硬
-   口琴暗号
-   口琴灯
-   高电光
-   堆积
-   太阳平面
-   跳伞
-   地平线暗
-   亚-暗
-   亚光
-   冰冻
-   同位素
-   缩写
-   马拉克什
-   马特里亚
-   材料灯
-   材料
-   黄花
-   墨西哥光线
-   摩卡岛
-   单开
-   诺德
-   海洋
-   单光
-   暗处
-   纸色暗色
-   纸张颜色灯
-   半导体
-   皮克语name
-   弹出
-   栏杆
-   设置i
-   日光暗线
-   日光灯
-   空间宏
-   夏季果实暗色
-   夏果灯
-   {\\fn黑体\\fs20\\shad2\\2ah82\\3ah20\\4ah33\\fscx95\\3ch592001\\be1}明晚 {\\fn黑体\\fs20\\shad2\\2ah82\\3ah20\\4ah33\\fscx95\\3ch592001\\be1}明天晚上
-   明天见
-   管子
-   黄昏
-   林地
-   zen

### 自定义

### 自定义主题自定义

设计具有以下属性的 JSON 对象,以您所喜欢的视觉主题为基础, 其基础颜色在 [基础16型](https://github.com/chriskempson/base16/blob/main/styling.md)请注意,该项目并未采用所有颜色:

-   `base00`默认背景
-   `base01` (单位:千美元)**未使用**: 更轻的背景(为状态栏、行号及折叠标记保留)
-   `base02`: NaN类型、无效和未定义的边框和背景
-   `base03` (单位:千美元)**未使用**: 注释、隐形、线条加亮
-   `base04`: 项目大小
-   `base05`: 默认前景、 Brackets 和 Colons
-   `base06` (单位:千美元)**未使用**: 光前地 (不常用)
-   `base07`:钥匙、科隆和Brackets
-   `base08`: NaN 颜色
-   `base09`: 椭圆和字符串值
-   `base0A`: 正则表达式和数值
-   `base0B`: 浮点值
-   `base0C`编号密钥
-   `base0D`: 图标、搜索输入、日期
-   `base0E`:布尔和扩展图标
-   `base0F`: 整数

这种多功能方法授权您创建一个符合您特定的UI元素要求的特制主题,使您可以自由地微调您的JSON取景器的视觉体验.

示例

```html
<andypf-json-viewer
  indent="2"
  expanded="true"
  show-data-types="true"
  show-toolbar="false"
  expand-icon-type="arrow"
  show-copy="true"
  show-size="true"
  theme='{"base00": "gray", "base01": "blue", "base02": "yellow", "base03": "orange", "base04": "red", "base05": "#9DA0A2", "base06": "#D2D5D7", "base07": "#F1F2F3", "base08": "#EF5253", "base09": "#E66B2B", "base0A": "#E4B51C", "base0B": "#7CC844", "base0C": "#52CBB0", "base0D": "#33A3DC", "base0E": "#A363D5", "base0F": "gray"}'
>
  {"string": "this is a test ...", "integer": 42, "array":[ 1, 2, 3, "test", "NaN"], "float":3.14159,
  "string_number":"1234", "date": "Tue, Oct 17, 2023, 08:58 AM"}
</andypf-json-viewer>
```

## 许可证

这个项目根据麻省理工学院许可证颁发——见 [自由主义](https://npmcn.com/package/%40andypf/json-viewer/LICENSE.md) 详细文件.

## 常见问题

### @andypf/json-viewer 是什么？

一个Javascript 库,可以把 Json 形象化

### 如何安装 @andypf/json-viewer？

在项目目录运行 npm install @andypf/json-viewer，或使用 pnpm add / yarn add / bun add。

### @andypf/json-viewer 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/andypf\_\_json-viewer 是否存在。

### @andypf/json-viewer 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @andypf/json-viewer 可以商用吗？

@andypf/json-viewer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @andypf/json-viewer 的下载量有多少？

根据 npm 官方下载统计，@andypf/json-viewer 在 2026/10/06 – 2026/11/04 这 30 天内被下载 49,934 次，日均约 1,664 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @andypf/json-viewer 还在维护吗？

最新版本 2\.8\.1 发布于 2026/10/27（11 天前）；至今共发布 40 个版本，其中过去 12 个月发布了 14 个；首次发布于 2023/10/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。