大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 voici

A Node.js library for pretty printing your data on the terminal

voici.js（说：/vwasi/）是一个用 TypeScript 编写的开源 Node.js 库，用于在终端上以表格形式精美地显示数据集。

与 console.table() 相比，voici.js 具有许多功能，例如：

文本、列和行样式
突出显示和过滤
动态栏目
色谱柱尺寸调整、积累
表导出、类型系统
支持排序

目前 voici 在 Github 上通过 MIT 协议开源，是一个值得关注的前端项目。

如何使用 voici

首先需要使用所需的包管理器安装 voici.js：

npm i --save voici.js
// yarn
yarn add voici.js

接着可以直接在代码里面导入并使用：

import {Table} from 'voici.js';

const data = [
  {firstname: 'Homer', lastname: 'Simpson', age: 39},
  {firstname: 'Marge', lastname: 'Simpson', age: 36},
  {firstname: 'Bart', lastname: 'Simpson', age: 10},
  {firstname: 'Lisa', lastname: 'Simpson', age: 8},
  {firstname: 'Maggie', lastname: 'Simpson', age: 1}
];

const table = new Table(data);
table.print();

此时将打印出如下内容：

  firstname    lastname    age
================================
  Homer        Simpson     39
  Marge        Simpson     36
  Bart         Simpson     10
  Lisa         Simpson     8
  Maggie       Simpson     1

默认情况下，每列的宽度取决于其包含的值的长度。除了对象之外，开发者还可以在数据集中提供数组。比如下面的例子：

import {Table} from 'voici.js'

const data = [
  ['Homer', 'Simpson', 39],
  ['Marge', 'Simpson', 36],
  ['Bart', 'Simpson', 10],
  ['Lisa', 'Simpson', 8],
  ['Maggie', 'Simpson', 1]
];

const table = new Table(data);
table.printPlain();

voici 还支持众多配置，比如：

更改表格的文本和背景颜色

const config = {
  body: {
    bgColor: '#6184D8',
    textColor: '#d8b561'
  }
};
const table = new Table(data, config);

自定义表格的水平和垂直边框。使用 border 选项 color, groupSize , horizontal、vertical 等配置

const config = {
  border: {
    groupSize: 2,
    horizontal: '-',
    vertical: '|',
  }
};

const table = new Table(data, config);
table.printPlain();

按多列和方向对表进行排序。使用 sort 选项提供一系列 columns 和 directions 方向。方向可以是 asc 或 desc。

const config = {
  sort: {
    columns: ['lastname', 'age'],
    directions: ['asc', 'desc']
  }
};

const table = new Table(data, config);

更多关于 voici 的用法可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/larswaechter/voici.js

https://voici.larswaechter.dev/examples/arrays

思凡资源网

为何强烈推荐 voici.js 在终端展示酷炫表格?

什么是 voici

如何使用 voici

参考资料