- name
- html2pptx-complete
- description
- HTML 转 PPTX 完整工作流 — 自动内嵌外部 CSS，使用 pptxgenjs 解析 HTML 结构，生成可编辑 PPTX，保留文字、布局、样式
- metadata
- openclaw
- version
- 3.0
- requires
- pip
- npm
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 内嵌
功能
- 🔍 查找所有
<link rel="stylesheet">标签 - 📄 读取 CSS 文件内容
- 🔗 替换为
<style>CSS 内容</style> - 🗑️ 移除外部 CSS 引用
- ✅ 保证 HTML 可独立运行
支持的 CSS
| 类型 | 支持度 | 说明 |
|---|---|---|
| 本地相对路径 | ✅ | href="style.css" |
| 本地绝对路径 | ✅ | href="/path/to/style.css" |
| 远程 URL | ⚠️ 跳过 | href="https://..." |
| CSS 变量 | ✅ | 完整解析 |
| 渐变/动画 | ✅ | 保留原始代码 |
示例
转换前:
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="theme.css">
</head>转换后:
<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→pt |
font-weight: bold | 粗体 | ✅ |
font-style: italic | 斜体 | ✅ |
text-align | 对齐方式 | ✅ |
border | 边框 | ⚠️ 简化 |
border-radius | 圆角 | ⚠️ 部分 |
box-shadow | 阴影 | ❌ |
linear-gradient | 渐变填充 | ⚠️ 简化 |
分页规则
优先级:
section.slide结构（最高优先级）<h1>标题（备选方案）- 整个文档作为单页（无上述结构时）
步骤 3: 导出
输出格式
| 属性 | 值 |
|---|---|
| 格式 | PPTX (Office Open XML) |
| 比例 | 16:9 宽屏 |
| 可编辑性 | ✅ 文字/形状可编辑 |
| 文件大小 | 50-200KB（取决于内容） |
兼容性
- ✅ 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
# 查找 <link> 标签
# 读取 CSS 文件
# 替换为 <style>
# 保存
passscripts/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 (输出示例)与现有技能对比
| 特性 | html2pptx-complete | html2pptx-shape |
|---|---|---|
| CSS 内嵌 | ✅ 自动 | ✅ 自动 |
| 核心库 | pptxgenjs (JS) | python-pptx |
| 环境 | Node.js + Python | Python |
| 样式保留 | ⚠️ 基础 + 部分 CSS | ✅ 完整 CSS |
| 布局还原 | ⚠️ 简化 | ✅ 精确 |
| 分页规则 | section.slide / h1 | section.slide |
| 适用场景 | 通用 HTML | html-ppt 生成 |
适用场景
✅ 推荐
- 📄 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 🎯