HTML 转 PPTX 转换技能

该技能提供了一套完整流程，可将基于 Web 的幻灯片（HTML/CSS）转换为专业、原生的 PowerPoint 文件。其采用混合技术方案：使用 Python（BeautifulSoup）提取内容，再通过 Node.js（PptxGenJS）重建布局。

前提条件

# Python 依赖
pip install beautifulsoup4 lxml

# Node.js 依赖
npm install -g pptxgenjs

工作流

1. 结构分析（Python）

解析 HTML，提取语义化的幻灯片数据（标题、项目符号列表、指标数值、表格及布局信息）。

from bs4 import BeautifulSoup
import json

def parse_slides(html_path):
    soup = BeautifulSoup(open(html_path), 'lxml')
    slides = []
    for div in soup.find_all('div', class_='slide'):
        # 根据类名（如 'cover-slide'、'content-box'、'two-column'）提取内容
        # 返回结构化 JSON 列表
        pass
    return slides

2. 布局映射（JavaScript）

将提取出的 JSON 数据映射为 PptxGenJS 对象，坐标系统基于 10 英寸 × 5.625 英寸画布。

const pptxgen = require("pptxgenjs");
let pres = new pptxgen();

// 定义统一配色方案
const COLORS = { PRIMARY: "0F3460", ACCENT: "00D4FF", TEXT: "FFFFFF" };

// 遍历解析后的数据并逐页添加幻灯片
data.forEach(item => {
    let slide = pres.addSlide();
    // 根据 item.type 使用 slide.addText、slide.addShape 或 slide.addTable
});

pres.writeFile({ fileName: "output.pptx" });

设计原则

• 原生元素：始终使用 addShape 和 addText 方法，而非截图方式，确保生成的 PPT 文件完全可编辑。
• 指标卡片：在数据密集型幻灯片中，使用大字号文本框配合彩色矩形背景，突出关键数值。
• 网格系统：将 HTML 中的 grid 或 flex 布局手动映射为 X/Y 坐标（例如双栏布局对应 X:0.5 和 X:5.2）。
• 品牌一致性：PPT 背景颜色需与 HTML 中的 background-color 或等效 linear-gradient 保持同步。

常见问题与建议

• 十六进制颜色值：PptxGenJS 要求颜色代码不带 # 前缀（例如应写为 00D4FF）。
• 字体兼容性：为保障跨平台显示一致，建议默认使用 "Microsoft YaHei" 或 "Arial" 字体。
• 表格高度控制：表格不会自动计算自身高度以影响后续元素位置；需根据行数手动递增 currentY 值。