html-deck-to-pptxlisted

# HTML Deck to PPTX | HTML幻灯片转PPTX ## Overview | 概述 将基于HTML的幻灯片演示文稿（通过左右键翻页）逐页截图，然后生成PPTX文件，每页一张截图铺满。 - 使用 Playwright 打开HTML文件并自动翻页截图 - 使用 python-pptx 将截图组装为16:9宽屏PPT - 支持自定义视口尺寸、总页数、翻页键 ## Prerequisites | 前提条件 ```bash pip install playwright python-pptx playwright install chromium ``` ## Important: Timing | 时间间隔注意事项 HTML Deck 的幻灯片切换涉及 CSS 动画（slideFade 220ms）、字体加载、auto-scale 计算和背景渐变渲染，截图过快会截到过渡画面或未就绪状态。 **推荐等待策略：** 1. 导航后等待 `.slide.active` 存在 2. 等待 `getComputedStyle(slide).opacity === '1'`（确保 fade-in 动画完成） 3. 额外等待 500ms（字体渲染 + auto-scale + 背景渐变） 4. 总计每页间隔约 **800-1000ms** **Playwright 检查代码示例：** ```python page.wait_for_selector(".slide.active", timeout=10000) page.wait_for_function(""" () => { const s = document.querySelector('.slide.active'); if (!s) return false; const cs = getComputedStyle(s); return cs.opacity === '1' && cs.display !== 'none'; } """, timeout=5000) page.wait_for_timeout(500) # 字体与渐变渲染余量 ``` **html2canvas 的已知局限：** - CSS `mask-image` 不渲染（deck::before 网格纹理丢失） - CSS 自定义属性（`var(--bg-gradient-*)`）中的渐变解析不稳定 - 复杂 `linear-gradient` 多色标可能丢失 - 截图画布尺寸可能偏离 16:9，导致 PPTX 拉伸 **推荐：** 优先使用本技能的 Playwright 截图方案（真实浏览器渲染，渐变/mask/伪元素完整保留）；html2canvas 仅作快速预览。 ## Workflow Steps | 工作流步骤 ### Step 1: 确认参数 | Confirm Parameters 在运行前确认以下信息（可通过读取HTML源码中的JS逻辑自动检测）： | 参数 | 默认值 | 说明 | |------|--------|------| | `html_file` | （必填） | HTML幻灯片文件路径 | | `output_dir` | `<html所在目录>/screenshot` | 截图输出目录 | | `output_pptx` | `<html所在目录>/<html文件名>.pp