# @alenaksu/json-viewer 中文文档规范地址：https://npmcn.com/package/%40alenaksu/json-viewer/ 版本：2\.1\.2 npm 元数据更新时间：2024-10-29T15:35:36.081Z 中文译文更新时间：2026-11-05T18:29:23.793Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。原始 npm 页面：https://www.npmjs.com/package/%40alenaksu/json-viewer 原文对照：https://npmcn.com/package/%40alenaksu/json-viewer/?lang=original 项目主页：https://github.com/alenaksu/json-viewer#readme 源码仓库：https://github.com/alenaksu/json-viewer ## 关键信息（来自 npm 元数据） - 包体积（解压后）：388 kB，18 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：1 个 - 首次发布：2019-08-04T15:34:45.724Z - 最新版本发布：2024-10-29T15:35:35.897Z - 近 30 天下载量：67506（2026-10-06 至 2026-11-04，npm 官方下载统计） - 已发布版本数：24（近 12 个月 0 个） ## 中文简介 [![GitHub release](https://img.shields.io/github/v/release/alenaksu/json-viewer.svg)](https://github.com/alenaksu/json-viewer/releases) [![npm](https://badgen.net/npm/v/@alenaksu/json-viewer)](https://www.npmjs.com/package/@alenaksu/json-viewer) \[doulo ## 安装 ```sh npm install @alenaksu/json-viewer ``` 也可以使用：`pnpm add @alenaksu/json-viewer`、`yarn add @alenaksu/json-viewer`、`bun add @alenaksu/json-viewer` ## README [![GitHub release](https://img.shields.io/github/v/release/alenaksu/json-viewer.svg)](https://github.com/alenaksu/json-viewer/releases) [![npm](https://badgen.net/npm/v/@alenaksu/json-viewer)](https://www.npmjs.com/package/@alenaksu/json-viewer) [![downloads](https://badgen.net/npm/dt/@alenaksu/json-viewer)](https://www.npmjs.com/package/@alenaksu/json-viewer) [![Known Vulnerabilities](https://snyk.io/test/npm/@alenaksu/json-viewer/badge.svg)](https://snyk.io/test/npm/@alenaksu/json-viewer) [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/alenaksu/json-viewer/master/LICENSE) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@alenaksu/json-viewer) 在树视图中可视化 JSON 数据的 Web 组件 * * * - [安装](https://npmcn.com/package/%40alenaksu/json-viewer/#readme-installation) - [从CDN](https://npmcn.com/package/%40alenaksu/json-viewer/#readme-from-cdn) - [国家预防机制](https://npmcn.com/package/%40alenaksu/json-viewer/#readme-from-npm) - [使用量](https://npmcn.com/package/%40alenaksu/json-viewer/#readme-usage) - [属性](https://npmcn.com/package/%40alenaksu/json-viewer/#readme-attributes) - [属性](https://npmcn.com/package/%40alenaksu/json-viewer/#readme-properties) - [方法](https://npmcn.com/package/%40alenaksu/json-viewer/#readme-methods) - [CSS 组件](https://npmcn.com/package/%40alenaksu/json-viewer/#readme-css-parts) - [CSS 自定义属性](https://npmcn.com/package/%40alenaksu/json-viewer/#readme-css-custom-properties) - [基本用途](https://npmcn.com/package/%40alenaksu/json-viewer/#readme-basic-usage) - [动态装入 JSON](https://npmcn.com/package/%40alenaksu/json-viewer/#readme-load-the-json-dynamically) - [基本互动](https://npmcn.com/package/%40alenaksu/json-viewer/#readme-basic-interactions) - [自定义渲染器](https://npmcn.com/package/%40alenaksu/json-viewer/#readme-custom-renderer) - [演示](https://npmcn.com/package/%40alenaksu/json-viewer/#readme-demo) ## 安装 ### 从CDN 软件包包含一个捆绑版本的组件,其中也包括Lit库. 如果您想要使用 CDN 导入软件包, 它可以有所帮助 . ```html ``` ### 国家预防机制通过国家预防机制安装组件: ```sh npm i @alenaksu/json-viewer ``` 将软件包导入您的工程, 这样组件将自动在自定义元素注册簿中定义, 并带有默认标签名称 `json-viewer`。。。 . ```js import '@alenaksu/json-viewer'; ``` 如果您想要扩展组件,或者只需要在使用不同标签名称的被范围注册中使用,那么可以从包中导入组件类: ```js import { JsonViewer } '@alenaksu/json-viewer/JsonViewer.js'; class MyJsonViewer extends JsonViewer { ... } customElements.define('my-json-viewer', MyJsonViewer); ``` * * * ## 使用量 ```html ``` ### 属性 - `data` - JSON 对象的字符串表示来装入 ### 属性 - `data` - 获取/设置 JSON 对象 ### 方法 - `filter (regexOrPath: RegExp|string) => void` QQ 只维护符合给定标准的节点 - `resetFilter () => void` 清除过滤器 - `expand (regexOrPath: RegExp|string) => void` QQ 扩展所有符合指定标准的节点 - `expandAll () => void` 别名 `expand('**')` - `collapse (regexOrPath: RegExp|string) => void` QQ 折叠所有符合指定标准的节点 - `collapseAll () => void` 别名 `collapse('**')` - `search (regexOrPath: RegExp|string) => Iterator` 返回和延时器,可以通过所有匹配的节点。它将页面滚动到节点并突出它. ### CSS 组件 - `object` - 对象包装元素. - `property` - 财产的包装元素. - `key` - 财产的关键要素. - `primitive` - 原始价值. - `primitive--string` - 原始是绳子时应用. - `primitive--number` - 原始是数字时应用. - `primitive--boolean` - 当原始的是一个布尔. - `primitive--null` - 当原始物是无效时应用. - `preview` - 属性的值预览 . - `highlight` - 突出的价值. ### CSS 自定义属性组件的外观可以通过更改 CSS 自定义属性来修改 ```css json-viewer { /* Background, font and indentation */ --background-color: #2a2f3a; --color: #f8f8f2; --font-family: Nimbus Mono PS, Courier New, monospace; --font-size: 1rem; --line-height: 1.2rem; --indent-size: 0.5em; --indentguide-size: 1px; --indentguide-style: solid; --indentguide-color: #333; --indentguide-color-active: #666; --indentguide: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color); --indentguide-active: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color-active); --outline-color: #e0e4e5; --outline-width: 1px; --outline-style: dotted; /* Types colors */ --string-color: #a3eea0; --number-color: #d19a66; --boolean-color: #4ba7ef; --null-color: #df9cf3; --property-color: #6fb3d2; /* Collapsed node preview */ --preview-color: #deae8f; /* Search highlight color */ --highlight-color: #c92a2a; } ``` ### 基本用途把JSON放进元素 ```html { "quiz": { "sport": { "q1": { "question": "Which one is correct team name in NBA?", "options": [ "New York Bulls", "Los Angeles Kings", "Golden State Warriros", "Huston Rocket" ], "answer": "Huston Rocket" } }, "maths": { "q1": { "question": "5 + 7 = ?", "options": [ "10", "11", "12", "13" ], "answer": "12" }, "q2": { "question": "12 - 8 = ?", "options": [ "1", "2", "3", "4" ], "answer": "4" } } } } ``` ### 动态装入 JSON ```html ``` ### 基本互动 ```js const viewer = document.querySelector('#json'); // Expand/collapse/filter viewer.expand('**.name'); viewer.collapse(/name/); viewer.filter('test.*.name'); // Search const searchIterator = viewer.search('value'); // Scrolls to the node and highlight the value searchIterator.next(); ``` ### 自定义渲染器 _这是一个实验性特征,它可能会在未来改变_ 数值的渲染可以通过定义静态方法定制 `customRenderer` 在自定义元素类中. 该函数接收了节点的值和路径, 它应该返回 HTML 节点或 Lit 的 `TemplateResult` 对象. ```js import { JsonViewer } from '@alenaksu/json-viewer/JsonViewer.js'; customElements.define( 'json-viewer', class extends JsonViewer { static styles = [ JsonViewer.styles, css` a { color: white; text-decoration: underline; } ` ]; static customRenderer(value, path) { if (typeof value === 'string') { if (URL.canParse(value)) { return html`${value}`; } else if (Date.parse(value)) { return new Date(value).toLocaleString(); } } else if (typeof value === 'number') { return value.toFixed(2); } return super.customRenderer(value); } } ); ``` ## 演示演示还可以在本地运行 ```sh npm run start ``` ## 常见问题 ### @alenaksu/json-viewer 是什么？ \[doulo ### 如何安装 @alenaksu/json-viewer？在项目目录运行 npm install @alenaksu/json-viewer，或使用 pnpm add / yarn add / bun add。 ### @alenaksu/json-viewer 支持 TypeScript 吗？支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @alenaksu/json-viewer 支持 ESM 还是 CommonJS？以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require 不含顶层 await 的 ES Module，更早的版本需要改用动态 import。 ### @alenaksu/json-viewer 可以商用吗？ @alenaksu/json-viewer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @alenaksu/json-viewer 的下载量有多少？根据 npm 官方下载统计，@alenaksu/json-viewer 在 2026/10/06 – 2026/11/04 这 30 天内被下载 67,506 次，日均约 2,250 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @alenaksu/json-viewer 还在维护吗？最新版本 2\.1\.2 发布于 2024/10/29（2 年前）；至今共发布 24 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/08/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。