HTML to PPTX 导出引擎

背景

DashiAI PPT Skill 中包含一个 html-deck-to-pptx 导出子包，能将 HTML 演示文稿导出为可编辑的 PPTX 文件。该子包目前为专有组件（非开源），但其核心逻辑可复刻。

我们需要一个独立、可控的导出引擎，集成到现有工作流中。凡是 Hermes/Agogent 生成的 HTML PPT，都能一键导出为文字可编辑、布局可还原的 PPTX 文件。

需求

输入

一个 HTML 文件（含完整 CSS 内联或外联），结构为横向翻页的演示文稿
每页用 <section> 或特定容器标识
样式通过 CSS 定义（font-size, color, font-weight, text-align, background-color 等）

输出

一个标准的 .pptx 文件，可用 Microsoft PowerPoint / WPS / Keynote 打开
文字必须可编辑（双击修改字体、大小、颜色）
形状/框线/背景色保持矢量（可拖动、缩放）
排版布局按原始位置还原（x, y, width, height 尽可能一致）

可放弃的特性（第一期不做）

JS 图表（ECharts/Chart.js）→ 导出为截图占位或忽略
CSS 渐变/阴影/圆角 → 简化或忽略
入场/翻页动画 → 忽略
Web 字体 → 映射为 Office 相近字体
响应式布局 → 固定一宽高比

技术方案

架构

HTML 文件
   ↓
启动本地 HTTP 服务（Node.js http-server 或 express）
   ↓
Chrome headless（通过 playwright）打开页面
   ↓
遍历 DOM，提取每页每个元素：
  - 位置（offsetLeft, offsetTop, offsetWidth, offsetHeight）
  - 文字内容（innerText）
  - 样式（font-size, color, font-weight, text-align, background-color 等）
   ↓
pptxgenjs 按页创建 slide，按坐标绘制 TextBox / Shape
   ↓
输出 .pptx 文件

核心依赖

依赖	用途	备注
`playwright`	控制 Chrome headless 渲染页面、提取 DOM 信息	你的环境已有 Chrome
`pptxgenjs`	生成 PPTX 文件（OOXML）	纯 JS，不依赖 Office
`http-server` 或 express	本地静态文件服务

可选升级

支持 PNG/JPEG 图片的提取与还原
表格结构识别（<table> → PPT 表格）
列表识别（<ul>/<ol> → PPT 列表）
CSS 圆角/边框映射
批量导出（多 HTML 文件）

验收标准

输入一个 10 页的 HTML PPT，导出 PPTX 后在 PowerPoint 中打开
每一页的标题、正文文字可双击编辑
文字字体、大小、颜色、粗体与原 HTML 一致
布局位置基本还原（不要求像素级，但段落不应错位到其他区域）
执行时间不超过 30 秒（10 页）

工作流集成

# 命令行调用
html2pptx input.html output.pptx

# 或
html2pptx input.html -o output.pptx

# 或指定端口
html2pptx input.html -o output.pptx -p 8080

输出文件路径直接返回给用户，用户双击或在 PowerPoint 中打开即可。

第一版范围（MVP）

基础架构：HTTP 服务 + Chrome headless 渲染 + DOM 提取
文字提取：位置、内容、font-size、color、font-weight、text-align
PPTX 生成：pptxgenjs 建 slide，画 TextBox
分页识别：按 <section> 或 [data-slide] 切割
背景色还原：slide 背景色
对齐方式：left/center/right

第一版不做的：

图片提取
表格识别
列表识别
渐变/阴影/圆角

3.4 KiB Raw Blame History Unescape Escape