代码拉取完成，页面将自动刷新
同步操作将从 run27017/json-to-table 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
支持任意嵌套格式的JSON数据转化为表格显示，嵌套的JSON会以合并的单元格形式展示。
为了这个项目，特地做了个线上的JSON数据导出工具，可以导入JSON文件，预览导出效果以及导出为EXCEL。案例链接：
线上导出工具请认准域名：
0.1. 快速使用
0.2. 更多的JSON格式
0.2.1. 简单格式
0.2.2. 嵌套格式
0.2.3. 更复杂的嵌套数组的格式
0.3. 定义Meta
0.3.1. Meta简写格式
0.3.2. 自定义Builder
1. 函数列表
1.1. jsonToHTML
1.2. jsonToTable
1.3. 依赖
1.3.1. Node版本
1.3.2. 生成文档
1.4. License
安装
npm install nested-json-to-table --save
引入
const { jsonToHTML } = require('nested-json-to-table')
const data = [
{
a: 1,
b: {
c: 2,
d: 3
}
},
{
a: 4,
b: {
c: 5,
d: 6
}
}
]
const html = jsonToHTML(data)
console.log(html)
显示效果
| a | b | |
|---|---|---|
| c | d | |
| 1 | 2 | 3 |
| 4 | 5 | 6 |
<table>
<thead>
<tr>
<th rowSpan="2">a</th>
<th colSpan="2">b</th>
</tr>
<tr>
<th>c</th>
<th>d</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
const data = [
{
a: 1,
b: 2
},
{
a: 3,
b: 4
}
]
显示效果
| a | b |
|---|---|
| 1 | 2 |
| 3 | 4 |
<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
const data = [
{
a: 1,
b: {
c: 2,
d: 3
}
},
{
a: 4,
b: {
c: 5,
d: 6
}
}
]
显示效果
| a | b | |
|---|---|---|
| c | d | |
| 1 | 2 | 3 |
| 4 | 5 | 6 |
<table>
<thead>
<tr>
<th rowSpan="2">a</th>
<th colSpan="2">b</th>
</tr>
<tr>
<th>c</th>
<th>d</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
const data = [
{
a: 1,
b: [
{
d: 2,
e: 3
},
{
d: 4,
e: 5
}
],
c: [
{
f: 6,
g: 7
},
{
f: 8,
g: 9
},
{
f: 10,
g: 11
}
]
}
]
显示效果
| a | b | c | ||
|---|---|---|---|---|
| d | e | f | g | |
| 1 | 2 | 3 | 6 | 7 |
| 4 | 5 | 8 | 9 | |
| 10 | 11 | |||
<table>
<thead>
<tr>
<th rowSpan="2">a</th>
<th colSpan="2">b</th>
<th colSpan="2">c</th>
</tr>
<tr>
<th>d</th>
<th>e</th>
<th>f</th>
<th>g</th>
</tr>
</thead>
<tbody>
<tr>
<td rowSpan="3">1</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td colSpan="2"></td>
<td>10</td>
<td>11</td>
</tr>
</tbody>
</table>
我们可以规定Meta的格式来收获我们想要的格式。如简单的格式：
const { jsonToHTML } = require('nestd-json-to-table')
const meta = {
order: ['a', 'b'],
mapping: {
a: {
title: 'A'
},
b: {
title: 'B'
}
}
}
const data = [
{
a: 1,
b: 2
},
{
a: 3,
b: 4
}
]
const html = jsonToHTML(meta, data)
console.log(html)
显示效果
| A | B |
|---|---|
| 1 | 2 |
| 3 | 4 |
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
再如嵌套的格式：
const { jsonToHTML } = require('nested-json-to-table')
const meta = {
order: ['a', 'b'],
mapping: {
a: {
title: 'A'
},
b: {
title: 'B',
meta: {
order: ['c', 'd'],
mapping: {
c: {
title: 'C'
},
d: {
title: 'D'
}
}
}
}
}
}
const data = [
{
a: 1,
b: {
c: 2,
d: 3
}
},
{
a: 4,
b: {
c: 5,
d: 6
}
}
]
const html = jsonToHTML(meta, data)
console.log(html)
显示效果
| A | B | |
|---|---|---|
| C | D | |
| 1 | 2 | 3 |
| 4 | 5 | 6 |
<table>
<thead>
<tr>
<th rowSpan="2">A</th>
<th colSpan="2">B</th>
</tr>
<tr>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
如果只有一个title属性，则Meta可以简写为：
const meta = {
order: ['a', 'b'],
mapping: {
a: 'A',
b: 'B'
}
}
order可以省略，这时列顺序不可保证，一般来讲是写入的顺序：
const meta = {
mapping: {
a: {
title: 'A'
}
b: {
title: 'B'
}
}
}
省略mapping的写法也是支持的，下面两者等价：
const meta1 = {
order: ['a', 'b']
}
const meta2 = {
order: ['a', 'b'],
mapping: {
a: 'a',
b: 'b'
}
}
输出HTML源码只是工具提供的最基本的格式。实际上，可以通过编写Builder支持更多的输出格式，如Excel等等。下面是一个简单的示例，它输出<table>、<row>、<col>这样的XML格式。
const { jsonToTable } = require('nested-json-to-table')
class Builder {
constructor () {
this.indent = 0
}
table (next) {
this._wrap('table', next)
}
head (next) {
this._wrap('table', next)
}
body (next) {
this._wrap('table', next)
}
row (next) {
this._wrap('row', next)
}
cell (data, at) {
this._writeLine(`<col>${data}</col>`)
}
_wrap (tag, next) {
this._writeLine(`<${tag}>`)
this.indent++
next()
this.indent--
this._writeLine(`</${tag}>`)
}
_writeLine (line) {
const spaces = new Array(this.indent * 2).fill(' ').join('')
console.log(spaces + line)
}
}
const data = [
{
a: 1,
b: 2
},
{
a: 3,
b: 4
}
]
const builder = new Builder()
jsonToTable(data, builder)
输出
<table>
<table>
<row>
<col>a</col>
<col>b</col>
</row>
</table>
<table>
<row>
<col>1</col>
<col>2</col>
</row>
<row>
<col>3</col>
<col>4</col>
</row>
</table>
</table>
一个Builder是一个对象，其中要定义table、head、body、row、cell五个方法，分别对应表格的表格、表头、表体、行和单元格的处理段。
table(next)：进入table的处理段，调用next方法才会进入到下一层的处理段。
head(next)：进入head的处理段，调用next方法才会进入到下一层的处理段。
body(next)：进入body的处理段，调用next方法才会进入到下一层的处理段。
row(next)：进入row的处理段，调用next方法才会进入到下一层的处理段。
cell(data, at)：进入单元格的处理段，data是该单元格的数据，at包含三个参数：
rowSpan: 该单元格纵跨的行数colSpan：该单元格横跨的列数isHead：该单元格是否位于表头，否则就在表体内function jsonToTable(data)
将data转化为HTML表格源码。
function jsonToTable(meta, data)
将data转化为HTML表格源码，其中表头的部分通过meta定义。
function jsonToTable(meta, data, rootAttrs)
将data转化为HTML表格源码，其中表头的部分通过meta定义。该调用可以附加一个根元素（即table）的属性列表。如下调用，最终生成的源码会是：
jsonToTable(meta, data, { class: 'class1 class2' })
// generate
// <table class="class1 class2">
// ...
function jsonToTable(data, builder)
利用自定义Builder，将data转化为table格式。关于自定义Builder的部分，可参考相关章节。
function jsonToTable(meta, data, builder)
利用自定义Builder，将data转化为table格式。其中表头的部分通过meta定义。关于meta和自定义Builder的部分，可参考相关章节。
v8.11.1
pip install MarkdownPP
LGPL-2.1
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手