Table2Image

Table2Image

🇬🇧 English | 🇨🇳 中文

Convert tables to beautiful PNG images for chat 平台s.

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

Tech Stack: Playwright + Chromium for perfect emoji and font rendering.

Prerequisites Node.js: >= 18.0.0 Network: Internet connection required for first 运行 (Chromium 下载 ~100MB) 安装ation # 安装 dependencies npm 安装

# 下载 Chromium (one-time, ~100MB) npx playwright 安装 chromium

Performance Metric Time First 运行 (Chromium 下载) ~30-60s (one-time) Browser launch (first render) ~2-3s Subsequent renders < 500ms (browser reused)

💡 Tip: The browser instance is automatically reused after the first render, making subsequent table generations nearly instant.

Quick 启动 Method 1: 命令行工具 (for simple tables) # Convert JSON data to table image echo '[{"name":"Alice","score":95}]' | node scripts/table-命令行工具.mjs --dark --输出 table.png

# Or use a JSON file node scripts/table-命令行工具.mjs --data-file data.json --theme discord-dark --输出 table.png

Method 2: Programmatic API (recommended) 导入 { renderTable, renderDiscordTable } from './scripts/索引.js';

// Quick Discord table const image = awAIt renderDiscordTable( [{ name: 'AAPL', change: '+2.5%' }], [ { key: 'name', header: 'Stock' }, { key: 'change', header: 'Change', align: 'right' } ], '📊 Market Watch' );

// 发送 to Discord awAIt message.发送({ attachment: image.buffer });

Method 3: Auto-convert markdown tables 导入 { autoConvertMarkdownTable } from './scripts/索引.js';

// Automatically 检测 and convert const 结果 = awAIt autoConvertMarkdownTable(message, 'discord'); if (结果.converted) { awAIt message.发送({ attachment: 结果.image }); }

When to Use This 技能 Discord/Telegram/Whats应用: These 平台s don't render markdown tables well Financial data: Stock prices, portfolio 报告s with conditional 格式化ting Leaderboards: Rankings with medals and color-coded positions Comparison tables: Side-by-side feature comparisons Any tabular data: When visual presentation matters Themes Theme Best For Preview discord-light Discord light mode (default)

discord-dark Discord dark mode

finance Financial 报告s

minimal 清理/simple

sweet-pink Stylish dark + pink accent

deep-sea Classic blue + cream white

wisteria Retro purple + lime green

pond-blue Deep navy + soft cyan

camellia Warm red + pale pink Custom Themes

You can also pass a custom theme object directly to theme. For convenience, you only need to provide two colors — primary and secondary — and the full theme will be 生成d automatically:

const image = awAIt renderTable({ data: [{ name: 'Alice', score: 95 }], columns: [ { key: 'name', header: 'Name' }, { key: 'score', header: 'Score', align: 'right' } ], theme: { primary: '#e6397c', // accent color (header, text, border) secondary: '#1a1a1d' // base color (background, rows) } });

Or pass a complete custom theme object with all 7 colors:

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' } });

Advanced Usage Conditional 格式化ting 导入 { renderTable } from './scripts/索引.js';

const image = awAIt renderTable({ data: stocks, columns: [ { key: 'symbol', header: 'Symbol' }, { key: 'change', header: 'Change', align: 'right', 格式化器: (v) => ${v > 0 ? '+' : ''}${v}%, style: (v) => ({ color: v > 0 ? '#43b581' : '#f04747' }) } ], theme: 'discord-dark' });

Custom Column Widths columns: [ { key: 'name', header: 'Name', width: 150 }, { key: 'description', header: 'Desc', width: 300, wrap: true, maxLines: 3 } ]

Scripts scripts/table-命令行工具.mjs - Command-line interface scripts/索引.js - Programmatic API

See references/API.md for complete API documentation.

Examples

See references/examples.md for common use cases and code samples.