html2pptx-complete — HTML 转 PPTX 完整工作流

三步流程

HTML (带外部 CSS)
    ↓ [步骤 1: CSS 内嵌]
HTML (内嵌 CSS)
    ↓ [步骤 2: pptxgenjs 解析]
PPTX (可编辑)
    ↓ [步骤 3: 导出]
最终文件

快速开始

安装依赖

cd /Users/panda/.openclaw/workspace/skills/html2pptx-complete

# Python 依赖（CSS 内嵌）
pip3 install -r requirements-python.txt

# Node.js 依赖（PPTX 生成）
npm install

基本使用

# 一键转换
node scripts/convert.js input.html output.pptx

# 或分步执行
# 步骤 1: CSS 内嵌
python3 scripts/embed-css.py input.html embedded.html

# 步骤 2: PPTX 生成
node scripts/generate-pptx.js embedded.html output.pptx

步骤 1: CSS 内嵌

功能

• 🔍 查找所有 \x3Clink rel="stylesheet"> 标签
• 📄 读取 CSS 文件内容
• 🔗 替换为 \x3Cstyle>CSS 内容\x3C/style>
• 🗑️ 移除外部 CSS 引用
• ✅ 保证 HTML 可独立运行

支持的 CSS

示例

转换前:

\x3Chead>
  \x3Clink rel="stylesheet" href="style.css">
  \x3Clink rel="stylesheet" href="theme.css">
\x3C/head>

转换后:

\x3Chead>
  \x3Cstyle>
/* style.css 内容 */
/* theme.css 内容 */
  \x3C/style>
\x3C/head>

步骤 2: pptxgenjs 解析

解析规则

样式转换

分页规则

优先级:

1. section.slide 结构（最高优先级）
2. \x3Ch1> 标题（备选方案）
3. 整个文档作为单页（无上述结构时）

步骤 3: 导出

输出格式

兼容性

• ✅ PowerPoint 2010+
• ✅ Keynote
• ✅ Google Slides
• ✅ LibreOffice Impress

使用示例

示例 1: html-ppt 生成的 HTML

# 输入：html-ppt 生成的多页 HTML
node scripts/convert.js my-deck/index.html my-deck.pptx

# 输出：包含所有 slide 的 PPTX

示例 2: 带外部 CSS 的 HTML

# 输入：引用多个 CSS 文件的 HTML
node scripts/convert.js presentation.html presentation.pptx

# 自动：
# 1. 嵌入 style.css, theme.css
# 2. 解析 slide 结构
# 3. 生成可编辑 PPTX

示例 3: 单页 HTML 文档

# 输入：普通 HTML 文档
node scripts/convert.js document.html document.pptx

# 输出：按 h1 标题分页的 PPTX

核心脚本

scripts/embed-css.py (步骤 1)

#!/usr/bin/env python3
"""CSS 内嵌脚本"""

import re
from pathlib import Path
from bs4 import BeautifulSoup

def embed_css(html_path, output_path=None):
    # 读取 HTML
    # 查找 \x3Clink> 标签
    # 读取 CSS 文件
    # 替换为 \x3Cstyle>
    # 保存
    pass

scripts/generate-pptx.js (步骤 2-3)

#!/usr/bin/env node
/**
 * PPTX 生成脚本
 * 使用 pptxgenjs 解析 HTML 并生成 PPTX
 */

const PptxGenJS = require('pptxgenjs');
const cheerio = require('cheerio');

async function generate(htmlPath, outputPath) {
  // 读取 HTML
  // 解析 slide 结构
  // 应用 CSS 样式
  // 创建 PPTX
  // 导出文件
}

scripts/convert.js (一键执行)

#!/usr/bin/env node
/**
 * 完整工作流脚本
 * 步骤 1: CSS 内嵌 (Python)
 * 步骤 2: PPTX 生成 (Node.js)
 * 步骤 3: 导出文件
 */

async function convert(htmlPath, outputPath) {
  // 调用 embed-css.py
  // 调用 generate-pptx.js
  // 清理临时文件
}

文件结构

html2pptx-complete/
├── SKILL.md                  (本文档)
├── README.md                 (快速入门)
├── package.json              (Node.js 依赖)
├── requirements-python.txt   (Python 依赖)
├── scripts/
│   ├── convert.js            (一键转换)
│   ├── embed-css.py          (CSS 内嵌)
│   └── generate-pptx.js      (PPTX 生成)
├── refs/
│   └── pptxgenjs-mapping.md  (样式映射表)
└── examples/
    ├── demo.html             (示例 HTML)
    ├── demo.css              (示例 CSS)
    └── demo_converted.pptx   (输出示例)

与现有技能对比

适用场景

✅ 推荐

• 📄 html-ppt 生成的 HTML 转 PPTX
• 📊 带外部 CSS 的 HTML 文档
• 📝 需要快速转换的通用 HTML
• 🎨 对样式要求不极端的场景

⚠️ 不推荐

• 🖼️ 复杂渐变/阴影效果（用 html-to-pptx 截图版）
• 🎭 精确像素级还原（用 html2pptx-shape）
• 📐 CSS Grid/Flex 复杂布局（可能简化）

依赖安装

# Python 依赖
pip3 install beautifulsoup4 cssutils requests

# Node.js 依赖
npm install pptxgenjs cheerio

常见问题

Q1: CSS 文件找不到？

检查:

• 路径是否正确（相对/绝对）
• 文件是否存在
• 权限是否允许读取

解决:

• 使用绝对路径
• 或将 CSS 文件放到 HTML 同目录

Q2: 样式丢失？

原因:

• pptxgenjs 不支持某些 CSS 属性
• 复杂选择器未解析

解决:

• 使用内联样式 style="..."
• 或简化 CSS 选择器

Q3: 图片无法显示？

检查:

• 图片路径是否正确
• 网络 URL 是否可访问
• Base64 格式是否正确

更新日志

v1.0.0 (2026-04-17)

• ✅ 初始版本
• ✅ CSS 自动内嵌
• ✅ pptxgenjs 解析
• ✅ section.slide/h1 分页
• ✅ 基础样式映射

License

MIT

Author

老 6 🎯