office-to-visual-html

把 PDF / Word(.docx) / Excel(.xlsx) 一键转成「能同时看原文和图表」的自包含 HTML 网页。

• 左边大纲，右边分屏：原版文字 ｜ 图表化解读，默认双显
• 顶部三按钮：文字和图表 / 仅文字 / 仅图表；双显时中间分隔条可拖拽调宽
• 点大纲任一项，两栏同步跳到该章；首项「总览」是全局仪表盘（关键指标 + 结构脑图 + 核心结论）
• 图表按内容自适应：数据→柱/线/饼图，流程/概念→Mermaid 流程图/脑图，对比→矩阵/卡片，散文→要点卡片
• 整篇风格严格一致，生成前让你先选风格
• 原版可直接编辑，改数字/表格后数据图自动重渲染
• 一键导出，分两个入口：导出文字 → Word(.docx) / PDF / Markdown(.md) / 纯文本(.txt)；导出图表 → PDF / PowerPoint(.pptx)
• 产出是单个离线 HTML，内联了所有前端库，可直接发人

安装

本技能依赖 Python 库（PyMuPDF / python-docx / openpyxl），已随技能自带 venv：

macOS / Linux

cd office-to-visual-html
python3 -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt

Windows（PowerShell / Git Bash）

cd office-to-visual-html
python -m venv .venv
.venv\Scripts\activate
pip install -r requirements.txt

前端库（ApexCharts / Mermaid / pptxgenjs / jszip）已放在 vendor/，组装时会内联进 HTML，无需联网。

使用（由 WorkBuddy 驱动）

把这份 skill 安装到 WorkBuddy 后，在对话里直接跟它说就行。

📎 默认开场白

skill 触发后，agent 会先告诉你：

我是 office-to-visual-html，可以把 PDF / Word(.docx) / Excel(.xlsx) 转成「左大纲 + 右分屏（原文｜图表化解读）」的单文件 HTML，离线自包含，可直接发人。

📌 上传要求（重要）：

1. 一次只传一个文档（不支持批量）
2. 单个文件 ≤ 40 MB（超过会被抽取阶段直接拒绝）
3. 支持格式：PDF / Word(.docx) / Excel(.xlsx)
4. .doc / .xls 旧格式请先另存为 .docx / .xlsx

💬 你只要把文件丢给我，再说一句话：

• 「转成可视化网页」
• 「做成图表网页」
• 「可视化一下这份文档」
• 「别让我读那么多字，总结成图」

我会自动跑： 抽取 → 规划可视化方案 → 让你选风格（8 套预设）→ 生成 HTML 并打开给你看。导出支持：文字（Word/PDF/MD/TXT）、图表（PDF/PPT）。

💬 对话示例

① 标准触发 👤 [上传 report.pdf]「转成可视化网页」 🤖 抽取 N 章 → 列出每章图表方案 + 数据来源 → 列出 8 套风格让你选 → 你回选 → 生成 HTML 并打开

② 指定风格 👤 [上传 报告.docx]「用森林绿风格，可视化一下」 🤖 按 forest-green 规划方案 → 你确认 → 生成

③ 纯图片 / 扫描件 👤 [上传 扫描件.pdf]「转成可视化网页」 🤖 检测到无文字层 → 用 WorkBuddy 内置云端 OCR 识别（你无需配 key）→ OCR 回填后正常生成

④ 超限 👤 [上传 50MB.pdf]「转成可视化网页」 🤖 文件 50 MB 超 40 MB 上限，已拒绝 → 请压缩或拆分后再试

⑤ 旧格式 👤 [上传 file.doc]「转成可视化网页」 🤖 .doc 不支持 → 请在 Word 里「另存为 .docx」再上传

⑥ 导出 👤「把图表导出成 PPT」「把文字导出成 docx / txt」 🤖 点击顶部「导出图表 → PowerPoint(.pptx)」或「导出文字 → Word / 纯文本(.txt)」等

⌨️ 也可以手动跑（命令行）

macOS / Linux

cd office-to-visual-html
python3 -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt
python scripts/extract.py 你的文档.pdf doc.json
python scripts/plan.py doc.json -o plan.json --theme tech-blue
python scripts/build_html.py doc.json plan.json -o 输出.html --theme tech-blue

Windows（PowerShell / Git Bash）

cd office-to-visual-html
python -m venv .venv
.venv\Scripts\activate
pip install -r requirements.txt
python scripts\extract.py 你的文档.pdf doc.json
python scripts\plan.py doc.json -o plan.json --theme tech-blue
python scripts\build_html.py doc.json plan.json -o 输出.html --theme tech-blue

视觉风格（生成前选择，整篇统一）

| key | 调性 | |---|---| | tech-blue | 科技蓝·亮 | | minimal-gray | 简约灰·亮 | | warm-biz | 暖色商务·亮 | | forest-green | 森林绿·亮 | | indigo-purple | 靛紫·亮 | | morning-mist | 晨雾·亮（低饱和） | | night-dark | 暗夜·暗 | | graphite-dark | 石墨黑·暗 |

导出说明

顶部两个独立入口，互不混用：

• 导出文字（原版文本内容）：
  • Word(.docx)：JSZip 现拼最小 OOXML（离线，无需服务端）
  • PDF：调用浏览器打印（另存为 PDF），只保留原版文字栏
  • Markdown(.md)：大纲 + 正文 + 表格序列化
  • 纯文本(.txt)：与 MD 类似但无标记，表格以制表符分隔，纯文本编辑器即可打开
• 导出图表（图表化解读）：
  • PDF：浏览器打印，只保留图表栏
  • PowerPoint(.pptx)：pptxgenjs 按结构化数据逐章生成（总览 + 每章图 + 图注），图表以高清图嵌入

限制

• 单文件 & 体积：一次只处理一个文档；单个文件不得超过 40 MB，超限会在抽取阶段被直接拒绝。
• 旧格式 .doc / .xls 不支持，请先另存为 .docx / .xlsx。
• 纯图片 / 扫描件（OCR 已支持，云端、用户零配置）：PDF、Word 若为纯图片或扫描件（无文字层），抽取阶段会置 ocr_needed=True 并弹警告横幅；此时由 WorkBuddy 运行时内置的云端 OCR 识别文字，再用 scripts/apply_ocr.py 回填 doc.json，即可正常生成图表化解读（详见 SKILL.md「OCR 流程」）。
• 编辑同步仅覆盖数据图（柱/线/饼）。流程图、思维导图等结构图编辑后不会自动更新（页面已提示），需重新生成文档。
• 导出库内联使单文件体积较大（数百 KB~MB 级），但完全离线可用。

目录结构

office-to-visual-html/
├── SKILL.md
├── README.md
├── requirements.txt
├── scripts/
│   ├── extract.py       # PDF/Word/Excel → doc.json
│   ├── plan.py          # doc.json → plan.json（规则启发式自动规划，离线）
│   ├── apply_ocr.py     # 云端 OCR 结果回填 doc.json
│   └── build_html.py    # doc.json + plan.json → 单文件 HTML
├── templates/
│   └── template.html    # 查看器模板（分屏/主题/编辑同步/导出）
└── vendor/              # 内联前端库