Html2pptx Complete

HTML 转 PPTX 完整工作流 — 自动内嵌外部 CSS，使用 pptxgenjs 解析 HTML 结构，生成可编辑 PPTX，保留文字、布局、样式

Install

openclaw skills install @iiustrator/html2pptx-complete

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→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

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-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 复杂布局（可能简化）

依赖安装

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 🎯

Html2pptx Complete

Install

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

三步流程

快速开始

安装依赖

基本使用

步骤 1: CSS 内嵌

功能

支持的 CSS

示例

步骤 2: pptxgenjs 解析

解析规则

样式转换

分页规则

步骤 3: 导出

输出格式

兼容性

使用示例

示例 1: html-ppt 生成的 HTML

示例 2: 带外部 CSS 的 HTML

示例 3: 单页 HTML 文档

核心脚本

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

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

scripts/convert.js (一键执行)

文件结构

与现有技能对比

适用场景

✅ 推荐

⚠️ 不推荐

依赖安装

常见问题

Q1: CSS 文件找不到？

Q2: 样式丢失？

Q3: 图片无法显示？

更新日志

v1.0.0 (2026-04-17)

License

Author

Related skills