Package Exports

nested-json-to-table

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nested-json-to-table) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

json-to-table

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

快速上手

[未发布]

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

const { jsonToHTMLTable } = require('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)

生成的表格渲染如下：

name	age	courses
name	age	title	score
Jim	18	English	87
Jim	18	Chinese	67
Lucy	17	Math	97
		Music	77
		Gym	57

概念

Props

json-to-table 将普通的 JavaScript 数组渲染成表格数据，表格的头可以通过一个 props 的概念声明。最简单的声明 props 的示例大致如下：

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

以上即指定表头为a、b、c. 建议始终指定表头，否则表头将从data中提取，而提取的结果往往不符合预期。

仅声明感兴趣的部分

声明 props 的第一个用途，是仅仅声明我们需要的字段。例如

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

仅仅只会拿字段a、b做表格。

重排顺序

声明 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)

现在表格列从左到右的顺序分别是：b、c、a.

内部 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)

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('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 的字符串表示。一般来说，写入到单元格的内容使用该属性。

License

LGPL-2.1