Table2Image

🇬🇧 English | 🇨🇳 中文

将表格转换为漂亮的PNG图片，适用于聊天平台。

GitHub: https://github.com/UMRzcz-831/table-to-image-skill

技术栈: Playwright + Chromium，实现完美的表情符号和字体渲染。

前置条件

• - Node.js: >= 18.0.0
• 网络: 首次运行需要网络连接（Chromium下载约100MB）

安装

bash

安装依赖

npm install

下载Chromium（一次性，约100MB）

npx playwright install chromium

性能

指标	时间
首次运行（Chromium下载）	~30-60秒（一次性）
浏览器启动（首次渲染）

~2-3秒 | | 后续渲染 | < 500毫秒（浏览器复用） |

💡 提示: 首次渲染后浏览器实例会自动复用，使后续表格生成几乎瞬间完成。

快速开始

方法一：命令行（适用于简单表格）

bash

将JSON数据转换为表格图片

echo [{name:Alice,score:95}] | node scripts/table-cli.mjs --dark --output table.png

或使用JSON文件

node scripts/table-cli.mjs --data-file data.json --theme discord-dark --output table.png

方法二：编程API（推荐）

typescript
import { renderTable, renderDiscordTable } from ./scripts/index.js;

// 快速生成Discord表格
const image = await renderDiscordTable(
[{ name: AAPL, change: +2.5% }],
[
{ key: name, header: 股票 },
{ key: change, header: 涨跌幅, align: right }
],
📊 市场观察
);

// 发送到Discord
await message.send({ attachment: image.buffer });

方法三：自动转换Markdown表格

typescript
import { autoConvertMarkdownTable } from ./scripts/index.js;

// 自动检测并转换
const result = await autoConvertMarkdownTable(message, discord);
if (result.converted) {
await message.send({ attachment: result.image });
}

何时使用此技能

• - Discord/Telegram/WhatsApp: 这些平台对Markdown表格渲染不佳
• 金融数据: 股票价格、投资组合报告（带条件格式）
• 排行榜: 带奖牌和颜色编码排名的榜单
• 对比表格: 并排功能对比
• 任何表格数据: 当视觉呈现很重要时

主题

主题	最佳用途	预览
discord-light	Discord浅色模式（默认）
discord-dark

Discord深色模式 | | | finance | 财务报告 | | | minimal | 简洁/简约 | | | sweet-pink | 时尚深色+粉色点缀 | | | deep-sea | 经典蓝色+奶油白 | | | wisteria | 复古紫色+青柠绿 | | | pond-blue | 深海军蓝+柔和青色 | | | camellia | 暖红+淡粉 | |

自定义主题

您也可以直接将自定义主题对象传递给theme。为方便起见，您只需提供两种颜色——primary和secondary——完整主题将自动生成：

typescript
const image = await renderTable({
data: [{ name: Alice, score: 95 }],
columns: [
{ key: name, header: 姓名 },
{ key: score, header: 分数, align: right }
],
theme: {
primary: #e6397c, // 强调色（表头、文字、边框）
secondary: #1a1a1d // 基础色（背景、行）
}
});

或者传递包含全部7种颜色的完整自定义主题对象：

typescript
const image = await renderTable({
data: [{ name: Alice, score: 95 }],
columns: [...],
theme: {
background: #1a1a1d,
headerBg: #e6397c,
headerText: #1a1a1d,
rowBg: #1a1a1d,
rowAltBg: #2a2a2d,
text: #e6397c,
border: #e6397c
}
});

高级用法

条件格式

typescript
import { renderTable } from ./scripts/index.js;

const image = await renderTable({
data: stocks,
columns: [
{ key: symbol, header: 代码 },
{
key: change,
header: 涨跌幅,
align: right,
formatter: (v) => ${v > 0 ? + : }${v}%,
style: (v) => ({ color: v > 0 ? #43b581 : #f04747 })
}
],
theme: discord-dark
});

自定义列宽

typescript
columns: [
{ key: name, header: 名称, width: 150 },
{ key: description, header: 描述, width: 300, wrap: true, maxLines: 3 }
]

脚本

• - scripts/table-cli.mjs - 命令行界面
• scripts/index.js - 编程API

完整API文档请参见references/api.md。

示例

常见用例和代码示例请参见references/examples.md。