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

三步流程#

text

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

---

快速开始#

安装依赖#

bash

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

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

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

基本使用#

bash

# 一键转换
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 内嵌#

功能#

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

支持的 CSS#

类型支持度说明本地相对路径✅href="style.css"本地绝对路径✅href="/path/to/style.css"远程 URL⚠️ 跳过href="https://..."CSS 变量✅完整解析渐变/动画✅保留原始代码

示例#

转换前:

html

<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="theme.css">
</head>

转换后:

html

<head>
  <style>
/* style.css 内容 */
/* theme.css 内容 */
  </style>
</head>

---

步骤 2: pptxgenjs 解析#

解析规则#

HTML 结构PPTX 映射说明section.slide新幻灯片每张 slide 一页<h1>标题文本框幻灯片标题<h2>- <h6>小标题层级递减字号<p>正文文本框保留段落<ul>, <ol>列表保留项目符号<img>图片支持路径/URL/Base64<div>容器/文本框根据内容判断CSS 样式PPTX 属性颜色/字体/大小/对齐

样式转换#

CSS 属性PPTX 映射支持度color文字颜色✅background-color填充色✅font-size字号✅ px→ptfont-weight: bold粗体✅font-style: italic斜体✅text-align对齐方式✅border边框⚠️ 简化border-radius圆角⚠️ 部分box-shadow阴影❌linear-gradient渐变填充⚠️ 简化

分页规则#

优先级:

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

---

步骤 3: 导出#

输出格式#

属性值格式PPTX (Office Open XML)比例16:9 宽屏可编辑性✅ 文字/形状可编辑文件大小50-200KB（取决于内容）

兼容性#

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

---

使用示例#

示例 1: html-ppt 生成的 HTML#

bash

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

# 输出：包含所有 slide 的 PPTX

示例 2: 带外部 CSS 的 HTML#

bash

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

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

示例 3: 单页 HTML 文档#

bash

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

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

---

核心脚本#

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

python

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

import re
from pathlib import Path
from bs4 import BeautifulSoup

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

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

javascript

#!/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 (一键执行)#

javascript

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

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

---

文件结构#

text

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   (输出示例)

---

与现有技能对比#

特性html2pptx-completehtml2pptx-shapeCSS 内嵌✅ 自动✅ 自动核心库pptxgenjs (JS)python-pptx环境Node.js + PythonPython样式保留⚠️ 基础 + 部分 CSS✅ 完整 CSS布局还原⚠️ 简化✅ 精确分页规则section.slide / h1section.slide适用场景通用 HTMLhtml-ppt 生成

---

适用场景#

✅ 推荐#

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

⚠️ 不推荐#

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

---

依赖安装#

bash

# 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 🎯