json-to-table 将 JSON 数据转化为表格形式的工具

发布于 2020-09-03 17:27:41 字数 5645 浏览 4211 评论 0

一个将 JSON 数据转化为表格形式的工具,支持深层次的嵌套。

项目主页:https://github.com/run27017/json-to-table

快速上手

引用

推荐使用npmyarn安装:

npm install nested-json-to-table

或者使用打包文件(查看 dist/json-to-table.min.js),放在浏览器的<script>标签:

<script src="dist/json-to-table.min.js"></script>
<script>
const { jsonToHTMLTable } = JSONToTable
</script>

渲染效果

如下可以生成 HTML 的表格源码:

const { jsonToHTMLTable } = require('nested-json-to-table')
const data = [
  {
    name: 'Jim',
    age: 18,
    courses: [
      { title: 'English', score: 87 },
      { title: 'Chinese', score: 67 }
    ]
  },
  {
    name: 'Lucy',
    age: 17,
    courses: [
      { title: 'Math', score: 97 },
      { title: 'Music', score: 77 },
      { title: 'Gym', score: 57 }
    ]
  }
]
const tableHTML = jsonToHTMLTable(data)

渲染的表格如下:

nameagecourses
titlescore
Jim18English87
Chinese67
Lucy17Math97
Music77
Gym57

概念

Props

仅声明感兴趣的部分

原始的data可能会混杂大量无关的字段,而我们想要生成表格时可能只需要其中的部分字段。怎么办呢?声明props就好了:

const props = [ { key: 'a' }, { key: 'b' } ]
const data = [
  { a: 1, b: 2, c: 3, d: 4, e: 5 },
  { a: 6, b: 7, c: 8, d: 9, e: 10 }
]
const tableHTML = jsonToHTMLTable(data, props)

以上代码渲染表格时,仅仅只会提取字段ab的内容。

声明标题

声明props的另一个目的,是需要定义头部标题的显示文本。如下,如果不定义title部分,则显示的头列为a | b |c;定义title后,则头列显示为A | B | C.

const props = [
  { key: 'a', title: 'A' },
  { key: 'b', title: 'B' },
  { key: 'c', title: 'C' }
]
const data = [{ a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 }]
const tableHTML = jsonToHTMLTable(data, props)

重排顺序

props的顺序极为表格列的排列顺序。如果不定义props,则排列顺序很难预测。

const props = [ { key: 'b' }, { key: 'c' }, { key: 'a' } ]
const data = [{ a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 }]
const tableHTML = jsonToHTMLTable(data, props)

内部 props 声明

因为支持嵌套的表格渲染,所以可以定义内部的props:

const props = [
  { key: 'a' },
  { 
    key: 'b', 
    props: [ { key: 'c' }, { key: 'd' } ]
  },
  { key: 'e' }
]
const data = [
  { a: 1, b: { c: 2, d: 3 }, e: 4 },
  { a: 5, b: { c: 6, d: 7 }, e: 8 }
]
const tableHTML = jsonToHTMLTable(data, props)

简单写法

如果你觉得有些写法过于繁琐,还有一种简单的写法。如下:

const props = ['a', 'b', 'c']

等价于:

const props = [ { key: 'a' }, { key: 'b' }, { key: 'c' } ]

API

jsonToHTMLTable

jsonToHTMLTable(data, [props], [options])

options 详解:

  • format: 生成的格式,dom 表示生成 HTML Table 元素, source 表示生成字符串。 默认根据环境判定,node 环境下默认值为 source,浏览器环境下默认值为 dom.
  • writeTo: 如果是一个字符串,则写入到本地文件;否则,写入到一个流。
  • indent: 缩进宽度,默认值为 2.

返回:

  • 如果options参数省略,则会返回 HTML 表格。根据系统所在环境,如果是 Node 环境,返回 HTML 源码;如果是浏览器环境,返回 Dom 节点。
  • 如果指定options.writeTo,将会 HTML 源码写入到一个流,函数返回 undefined.

jsonToExcel

jsonToExcel(data, [props], [toPath])

生成 Excel 格式的表格,并写入到toPath指定的路径;如果toPath省略,则返回表格的二进制内容。

该函数根据运行环境做出合适的响应。这意味着,指定toPath时,node 环境下写入到本地文件,浏览器环境下表现为下载文件;未指定toPath时,node 环境和浏览器环境返回相应的格式,它们都易于写入到本地文件或者构建一个 Blob 对象用于 HTML5 File API.

扩展

在完成 v1 之前,事实上存在一个 v0 版,v0 版采用了生命周期函数的方式。鉴于该方式理解起来较为复杂,所以 v1 版摒弃了该方式。

v1 的方式称之为 Context. 库提供一个 Context,扩展者使用 Context 实现自己的自由扩展。Context 提供生成 cells 的方法。虽然说样板代码更多了,但理解起来更为简单。

const { Context } = require('nested-json-to-table')

function jsonToCustomize (data, props) {
  const context = new Context()

  if (props) {
    context.initProps(props)
  } else {
    context.initPropsFromData(array.slice(0, 10))
  }

  const headCells = context.generateHeadCells(props)
  // 用你自己的方式处理 headCells

  for (const item of data) {
    const dataCells = context.generateDataCells(item)
    // 用你自己的方式处理这一条数据 dataCells
  }
}

Cells: 一个数组,其中每个元素代表表格中的单元格。字段列举如下:

  • r: 单元格所在的行序号
  • c: 单元格所在的行序号
  • rs: 单元格纵跨的行数
  • cs: 单元格横跨的列数
  • v: 该单元格的内容
  • stringValue: v 的字符串表示。一般来说,写入到单元格的内容使用该属性。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

‘画卷フ

文章 0 评论 0

寂寞清仓

文章 0 评论 0

脸赞

文章 0 评论 0

WeiBestSmart

文章 0 评论 0

娇女薄笑

文章 0 评论 0

国粹

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文