Ppt Live

LivePPT — 双模式 PPT 生成技能

架构：LLM 直接生成 HTML slides → Flask SSE 推送 → 浏览器渲染（预览模式） 　　　　LLM 生成结构化 JSON → python-pptx 填充模板 → 原生可编辑 PPTX（模板模式） 预览：http://localhost:5679 | 导出：模板模式 = 原生 PPTX；HTML 模式 = PptxGenJS + html2canvas

一、核心概念

每张幻灯片 = 一个自包含的 HTML <div>，尺寸固定 960×540px。

LLM 拥有完全的创意自由 — 用 HTML + inline CSS 画出任何你想要的视觉效果。不再受限于固定的 15 种 JSON 布局类型。

数据格式

Server 接收的 JSON：

{
  "slides": [
    {"html": "<div style='width:960px;height:540px;...'>...</div>"},
    {"html": "<div style='width:960px;height:540px;...'>...</div>"}
  ],
  "current": 0
}

每个 slide 对象只有一个字段：html，包含完整的 HTML 字符串。

硬性约束

1. 根元素必须是 <div style="width:960px;height:540px;...">
2. 所有样式必须 inline — 无外部 CSS，无 <style> 块
3. 字体 — 只用：Inter, 'Noto Sans SC', sans-serif（已由 shell 加载）
4. 不要用 <script> — 纯视觉，不需要交互
5. 图片 — 用 <img> 标签，src 指向 /uploads/images/xxx.png 或公共 URL
6. 不超过 3000 字符/slide — 保持 HTML 精简

二、配色主题

从 templates.json 加载 8 套预设主题。生成时选定一套，所有 slide 统一配色：

用法：在生成所有 slide 前确定主题颜色，然后在每个 HTML 的 inline style 中使用对应的色值。

三、PPT 生成策略（核心 — 必须遵循）

阶段 A：内容分析

从用户素材（wiki 文档、自然语言描述）中提取结构化信息，映射到幻灯片类型：

关键：素材不足以填某类页面时不要硬凑。

阶段 B：大纲规划

遵守硬约束：

1. 相邻两页禁止使用相同布局类型
2. 封面必须是第 1 页，结尾必须是最后 1 页
3. 纯列表页不超过总页数的 40%
4. 特殊布局（数据/时间线/对比/引言/表格/流程）至少出现 2 种
5. 每 3-5 页内容前放一个章节分隔页（总页数 > 8 时）
6. 总页数 6-15 页

阶段 C：逐页生成 HTML

每页独立生成 HTML <div>。下面的模板是参考起点，你可以自由调整和创新。

四、幻灯片 HTML 模板参考

以下用 ${bg} ${title} ${accent} ${body} ${muted} 表示主题色。生成时替换为实际色值。

每种模板都给出一个参考布局，但鼓励变体。每种类型至少有 2-3 种可行布局——选择时考虑内容量和上下文：

1. 封面页 (Cover)

<div style="width:960px;height:540px;background:linear-gradient(135deg,${bg},#1a2332);display:flex;flex-direction:column;justify-content:center;padding:48px 72px;font-family:Inter,'Noto Sans SC',sans-serif;position:relative;overflow:hidden">
  <div style="position:absolute;width:400px;height:400px;border-radius:50%;top:-80px;right:-100px;background:${accent};opacity:0.06"></div>
  <span style="display:inline-block;font-size:12px;font-weight:600;padding:4px 14px;border-radius:14px;background:${accent}22;color:${accent};margin-bottom:12px;width:fit-content">标签文字</span>
  <div style="font-size:42px;font-weight:700;color:${title};line-height:1.2">主标题</div>
  <div style="width:64px;height:3px;background:${accent};border-radius:2px;margin:16px 0 20px"></div>
  <div style="font-size:19px;color:${muted}">副标题描述</div>
  <div style="position:absolute;bottom:32px;left:72px;font-size:14px;color:${muted}">作者  ·  2024-01</div>
  <div style="position:absolute;bottom:0;left:0;width:100%;height:5px;background:${accent}"></div>
</div>

2. 章节分隔页 (Section)

<div style="width:960px;height:540px;background:linear-gradient(135deg,${bg},#1a2332);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:Inter,'Noto Sans SC',sans-serif;position:relative;overflow:hidden">
  <div style="position:absolute;left:0;top:0;width:5px;height:100%;background:${accent}"></div>
  <div style="font-size:110px;font-weight:900;color:${accent};opacity:0.1;position:absolute;top:50%;left:50%;transform:translate(-50%,-65%)">01</div>
  <div style="font-size:34px;font-weight:700;color:${title};position:relative;z-index:2">章节名称</div>
  <div style="font-size:17px;color:${muted};margin-top:14px;max-width:60%;position:relative;z-index:2">一句话描述</div>
</div>

3. 要点列表页 (Bullets)

<div style="width:960px;height:540px;background:${bg};display:flex;flex-direction:column;padding:36px 52px;font-family:Inter,'Noto Sans SC',sans-serif;overflow:hidden">
  <div style="font-size:26px;font-weight:700;color:${title};margin-bottom:16px">页面标题</div>
  <div style="display:flex;flex-direction:column;gap:10px;flex:1">
    <div style="display:flex;align-items:center;gap:14px;padding:14px 18px;background:rgba(255,255,255,0.04);border-radius:10px;border:1px solid rgba(255,255,255,0.06)">
      <span style="width:28px;height:28px;border-radius:50%;background:${accent};display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0">1</span>
      <span style="font-size:15px;color:${body};line-height:1.5">要点内容 15-25 字</span>
    </div>
    <!-- 重复 3-6 条 -->
  </div>
</div>

4. 图标卡片页 (Icon Cards)

<div style="width:960px;height:540px;background:${bg};display:flex;flex-direction:column;padding:36px 48px;font-family:Inter,'Noto Sans SC',sans-serif;overflow:hidden">
  <div style="font-size:26px;font-weight:700;color:${title};margin-bottom:20px">核心能力</div>
  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;flex:1">
    <div style="background:rgba(255,255,255,0.04);border-radius:12px;border:1px solid rgba(255,255,255,0.06);padding:24px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px">
      <div style="font-size:32px">🚀</div>
      <div style="font-size:16px;font-weight:600;color:${title}">卡片标题</div>
      <div style="font-size:13px;color:${muted};line-height:1.5">一句话描述</div>
    </div>
    <!-- 重复 3-6 个卡片 -->
  </div>
</div>

5. 对比页 (Comparison / VS)

<div style="width:960px;height:540px;background:${bg};display:flex;flex-direction:column;padding:36px 48px;font-family:Inter,'Noto Sans SC',sans-serif;overflow:hidden">
  <div style="font-size:26px;font-weight:700;color:${title};margin-bottom:20px;text-align:center">方案对比</div>
  <div style="display:flex;gap:20px;flex:1;align-items:stretch">
    <div style="flex:1;background:rgba(255,255,255,0.04);border-radius:12px;padding:24px;border:1px solid rgba(255,255,255,0.06)">
      <div style="font-size:18px;font-weight:600;color:${accent};margin-bottom:16px">方案 A</div>
      <div style="font-size:14px;color:${body};line-height:1.8">• 特点一<br>• 特点二<br>• 特点三</div>
    </div>
    <div style="display:flex;align-items:center;font-size:20px;font-weight:900;color:${accent};opacity:0.5">VS</div>
    <div style="flex:1;background:rgba(255,255,255,0.04);border-radius:12px;padding:24px;border:1px solid rgba(255,255,255,0.06)">
      <div style="font-size:18px;font-weight:600;color:${accent};margin-bottom:16px">方案 B</div>
      <div style="font-size:14px;color:${body};line-height:1.8">• 特点一<br>• 特点二<br>• 特点三</div>
    </div>
  </div>
</div>

6. 数据指标页 (Stats / KPI)

<div style="width:960px;height:540px;background:${bg};display:flex;flex-direction:column;padding:36px 48px;font-family:Inter,'Noto Sans SC',sans-serif;overflow:hidden">
  <div style="font-size:26px;font-weight:700;color:${title};margin-bottom:24px">关键指标</div>
  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;flex:1;align-content:center">
    <div style="background:rgba(255,255,255,0.04);border-radius:12px;padding:28px 24px;text-align:center;border:1px solid rgba(255,255,255,0.06)">
      <div style="font-size:14px;margin-bottom:8px">📊</div>
      <div style="font-size:36px;font-weight:800;color:${accent}">99.9%</div>
      <div style="font-size:14px;color:${muted};margin-top:8px">服务可用性</div>
    </div>
    <!-- 重复 2-4 个指标 -->
  </div>
</div>

7. 时间线页 (Timeline)

<div style="width:960px;height:540px;background:${bg};display:flex;flex-direction:column;padding:36px 48px;font-family:Inter,'Noto Sans SC',sans-serif;overflow:hidden">
  <div style="font-size:26px;font-weight:700;color:${title};margin-bottom:24px">发展里程碑</div>
  <div style="display:flex;align-items:flex-start;flex:1;padding:0 20px;position:relative">
    <!-- 横线 -->
    <div style="position:absolute;top:16px;left:40px;right:40px;height:2px;background:${accent};opacity:0.3"></div>
    <!-- 节点 -->
    <div style="flex:1;display:flex;flex-direction:column;align-items:center;position:relative;z-index:2">
      <div style="width:14px;height:14px;border-radius:50%;background:${accent};margin-bottom:12px"></div>
      <div style="font-size:14px;font-weight:700;color:${accent}">2020</div>
      <div style="font-size:13px;color:${body};text-align:center;margin-top:8px;max-width:120px">项目启动</div>
    </div>
    <!-- 重复 3-5 个节点 -->
  </div>
</div>

8. 引言页 (Quote)

<div style="width:960px;height:540px;background:linear-gradient(135deg,${bg},#1a2332);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 80px;font-family:Inter,'Noto Sans SC',sans-serif;position:relative;overflow:hidden">
  <div style="position:absolute;top:60px;left:40px;font-size:240px;font-family:Georgia,serif;color:${accent};opacity:0.06;line-height:1">"</div>
  <div style="font-size:24px;font-style:italic;font-family:Georgia,'Noto Sans SC',serif;line-height:1.65;color:${title};max-width:75%;position:relative;z-index:2">引言内容，50 字以内</div>
  <div style="width:48px;height:2px;background:${accent};border-radius:1px;margin:18px auto"></div>
  <div style="font-size:15px;color:${muted}">—— 署名</div>
</div>

9. 流程步骤页 (Process)

<div style="width:960px;height:540px;background:${bg};display:flex;flex-direction:column;padding:36px 48px;font-family:Inter,'Noto Sans SC',sans-serif;overflow:hidden">
  <div style="font-size:26px;font-weight:700;color:${title};margin-bottom:24px">实施步骤</div>
  <div style="display:flex;gap:12px;flex:1;align-items:center">
    <div style="flex:1;background:rgba(255,255,255,0.04);border-radius:12px;padding:20px 16px;text-align:center;border:1px solid rgba(255,255,255,0.06)">
      <div style="width:36px;height:36px;border-radius:50%;background:${accent};display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;margin:0 auto 10px">1</div>
      <div style="font-size:14px;font-weight:600;color:${title}">需求分析</div>
      <div style="font-size:12px;color:${muted};margin-top:6px">短描述</div>
    </div>
    <div style="font-size:18px;color:${accent};opacity:0.4">→</div>
    <!-- 重复 3-5 步 -->
  </div>
</div>

10. 表格页 (Table)

<div style="width:960px;height:540px;background:${bg};display:flex;flex-direction:column;padding:36px 48px;font-family:Inter,'Noto Sans SC',sans-serif;overflow:hidden">
  <div style="font-size:26px;font-weight:700;color:${title};margin-bottom:20px">功能矩阵</div>
  <table style="width:100%;border-collapse:separate;border-spacing:0;border-radius:10px;overflow:hidden;font-size:14px">
    <thead>
      <tr style="background:${accent}">
        <th style="padding:12px 16px;text-align:left;color:#fff;font-weight:600">功能</th>
        <th style="padding:12px 16px;text-align:left;color:#fff;font-weight:600">方案 A</th>
        <th style="padding:12px 16px;text-align:left;color:#fff;font-weight:600">方案 B</th>
      </tr>
    </thead>
    <tbody>
      <tr style="background:rgba(255,255,255,0.03)">
        <td style="padding:10px 16px;color:${body};border-bottom:1px solid rgba(255,255,255,0.06)">性能</td>
        <td style="padding:10px 16px;color:${body};border-bottom:1px solid rgba(255,255,255,0.06)">★★★</td>
        <td style="padding:10px 16px;color:${body};border-bottom:1px solid rgba(255,255,255,0.06)">★★</td>
      </tr>
      <!-- 斑马纹：偶数行 background:transparent -->
    </tbody>
  </table>
</div>

11. 图文混排页 (Image + Text)

<div style="width:960px;height:540px;background:${bg};display:flex;padding:36px 48px;gap:32px;font-family:Inter,'Noto Sans SC',sans-serif;overflow:hidden">
  <div style="flex:1;display:flex;flex-direction:column;justify-content:center">
    <div style="font-size:26px;font-weight:700;color:${title};margin-bottom:12px">产品架构</div>
    <div style="font-size:15px;color:${body};line-height:1.7;margin-bottom:16px">描述文字，2-3 句话。</div>
    <div style="font-size:14px;color:${muted};line-height:1.8">• 补充要点一<br>• 补充要点二</div>
  </div>
  <div style="flex:1;display:flex;align-items:center;justify-content:center">
    <img src="/uploads/images/xxx.png" style="max-width:100%;max-height:100%;border-radius:10px;object-fit:contain" alt="">
  </div>
</div>

没有图片时，右侧用占位框：

<div style="flex:1;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.03);border-radius:12px;border:2px dashed rgba(255,255,255,0.1)">
  <span style="font-size:48px;opacity:0.3">🖼️</span>
</div>

12. 结尾页 (Ending)

<div style="width:960px;height:540px;background:linear-gradient(135deg,${bg},#1a2332);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:Inter,'Noto Sans SC',sans-serif;position:relative;overflow:hidden">
  <div style="font-size:36px;margin-bottom:16px">🎯</div>
  <div style="font-size:40px;font-weight:700;color:${title}">感谢聆听</div>
  <div style="font-size:18px;color:${muted};margin-top:16px;max-width:55%">欢迎交流讨论</div>
  <div style="position:absolute;bottom:40px;font-size:13px;color:${muted}">email@example.com</div>
  <div style="position:absolute;bottom:0;left:0;width:100%;height:5px;background:${accent}"></div>
</div>

五、设计系统

视觉风格配方

同一套内容可以用不同的视觉风格呈现。根据演示场景选择合适的风格：

风格映射到 CSS：

Sharp:   border-radius: 0~2px;   padding: 10~14px; gap: 8~12px;
Soft:    border-radius: 6~10px;  padding: 14~20px; gap: 12~18px;
Rounded: border-radius: 12~20px; padding: 20~28px; gap: 18~28px;
Pill:    border-radius: 24px+;   padding: 24~36px; gap: 24~36px;

排版层级

关键规则：

• 正文禁止加粗 — bold 只用于标题和 heading，正文永远 font-weight: 400
• 标题左对齐 — 正文段落和要点列表左对齐，不要居中
• 字号对比 — 标题必须 ≥ 24px 以与 14~16px 正文形成层级差

间距系统

演示风格（扩展）

除了配色主题外，可叠加以下视觉风格，适应不同场合：

Glassmorphism 卡片模板：

background: rgba(255,255,255,0.05);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;

Neo-Brutalist 卡片模板：

background: #FFE500;
border: 3px solid #000;
border-radius: 0;
box-shadow: 6px 6px 0 #000;
color: #000;

字体搭配

注：当前系统已加载 Inter 和 Noto Sans SC，引言页可用 Georgia, serif 增加变化。

页码

每页必须包含页码（封面页除外）。标准位置：右下角。

<div style="position:absolute;bottom:16px;right:24px;font-size:11px;color:${muted};opacity:0.6">3 / 12</div>

格式：当前页 / 总页数。页码用 muted 色 + 低透明度，不抢视觉焦点。

六、创意自由 — 超越模板

上面的模板只是参考。LLM 直接写 HTML，意味着你可以创造任何布局：

• 多列不等宽布局 — display:flex + 不同 flex 值
• 叠加装饰元素 — 渐变圆、斜条纹、几何图形（用 position:absolute）
• 渐变文字 — background:linear-gradient(...); -webkit-background-clip:text; -webkit-text-fill-color:transparent
• 进度条 / 仪表盘 — 嵌套 div 实现
• 卡片阴影 — box-shadow 层次感
• 强调某条数据 — 更大字号、不同颜色、单独卡片

目标：每张幻灯片都应该有独特的视觉表达，不要千篇一律。

设计原则

1. 留白 — 不要塞满整页，至少留 30% 空间
2. 层级 — 标题 > 关键数字 > 正文 > 注释，字号递减
3. 对比 — 用强调色突出最重要的信息
4. 对齐 — 元素之间保持对齐和间距一致
5. 避免 AI 味 — 不要加底部强调线到每一页、不要每页都用相同的装饰圆

内容深度要求（核心 — 防止内容空洞）

问题：最大的败笔不是视觉不好看，而是内容太水、太空洞。每一页必须有实质性信息。

硬性要求：

1. 标题要具体 — ❌ "项目概述" → ✅ "Q3 营收增长 37%：三大核心业务全面领跑"
2. 数据要有来源感 — 不要凭空写 "99.9%"，要和素材对应的真实数据一致
3. 要点要有洞见 — ❌ "团队协作很重要" → ✅ "跨部门审批周期从 14 天压缩到 3 天"
4. 对比要有结论 — 不要只列特点，要明确说哪个更优、为什么
5. 时间线要有因果 — 不只是年份+事件，要说明关键转折的因果逻辑
6. 引言要有重量 — 选最有冲击力的原文金句，不要自己编
7. 结尾要有行动 — 不要只写 "谢谢"，要有明确的 Next Steps 或 Call to Action

每页内容检查清单：

• 这页删掉后，听众会少获得什么信息？（如果答案是 "没什么" → 删掉或重写）
• 标题能否让观众不看正文就知道核心结论？
• 正文里有没有至少一个具体数字、案例、或引用？

高级视觉技巧（提升质感）

渐变背景 — 不要用纯色背景，至少用两色渐变：

background: linear-gradient(135deg, #0f1318 0%, #1a2332 50%, #0d1825 100%);

多层装饰 — 用 2-3 个半透明几何图形叠加，避免单调：

<div style="position:absolute;width:500px;height:500px;border-radius:50%;top:-200px;right:-150px;background:radial-gradient(circle,${accent}15 0%,transparent 70%)"></div>
<div style="position:absolute;width:200px;height:200px;border:2px solid ${accent}15;border-radius:50%;bottom:60px;left:-80px"></div>

发光强调 — 给关键数字加辉光效果：

text-shadow: 0 0 40px ${accent}40, 0 0 80px ${accent}20;

毛玻璃卡片 — 比纯色卡片高级：

background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.08);

渐变文字 — 用于关键数字或标题：

background: linear-gradient(135deg, ${accent}, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

进度条/仪表 — 用嵌套 div 实现可视化：

<div style="width:100%;height:8px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden">
  <div style="width:73%;height:100%;background:linear-gradient(90deg,${accent},#50e3c2);border-radius:4px"></div>
</div>

不同页面差异化装饰 — 避免所有页面看起来一样：

• 封面：大面积渐变 + 透明装饰圆
• 数据页：网格点阵背景（用 radial-gradient 的 repeating-radial-gradient）
• 对比页：中间分割线 + 左右不同底色
• 引言页：超大引号装饰 + 居中布局
• 结尾页：放射渐变中心聚焦效果

七、CLI 命令速查

# ── HTML 预览模式 ──

# 推送完整 PPT（从文件）— ✅ 推荐方式
python ppt_live/pptx_live.py push slides.json

# ❌ 绝对不要用 --inline 传含引号的 HTML！会因引号嵌套导致 shell 解析失败
# python ppt_live/pptx_live.py push --inline '[{"html": "..."}]'

# 编辑单页（替换整页 HTML）
python ppt_live/pptx_live.py edit 3 --html "<div style='width:960px;height:540px;...'>新内容</div>"

# 删除 / 插入 / 交换
python ppt_live/pptx_live.py delete 4
python ppt_live/pptx_live.py insert 3 --html "<div style='width:960px;height:540px;...'>插入的页</div>"
python ppt_live/pptx_live.py swap 2 5

# 批量修改（主题色替换）
python ppt_live/pptx_live.py batch --theme-bg "#1a1a2e" --theme-accent "#e94560"

# 导航 / 状态 / 导出
python ppt_live/pptx_live.py goto 3
python ppt_live/pptx_live.py state
python ppt_live/pptx_live.py export output/演示.pptx

HTML 模式实际操作：生成完整 PPT 时，必须先用 create_file 工具写 JSON 文件再 push：

⚠️ 绝对不要把 HTML 内容嵌入 python -c "..." 等 shell 命令！ HTML 中的引号会导致 shell 解析失败（unexpected EOF while looking for matching '）。

# ✅ 正确：用 create_file 工具写入 slides.json，然后在终端执行：
# python ppt_live/pptx_live.py push slides.json

# ❌ 错误：不要把 HTML 放进 python -c 或 bash -c 命令

模板模式实际操作：先上传模板，再写结构化 JSON 生成：

import json

八、编辑模式指南

九、内容密度规则

• 标题：10 字以内
• 要点：每条 15-25 字，一眼可读
• 每页要点不超过 6 条（推荐 3-4）
• 引言：50 字以内
• KPI 数字：大字 + 短描述，不超过 4 个
• 内容太多则拆页 — 宁可多一页也不要塞满

十、Emoji 图标选择

• 选择语义相关的 emoji
• 同组 items 风格一致（如都用实物 📊📈📉 或都用抽象 ⚡🔒🚀）
• 推荐图标集：
  • 通用：🎯 📊 ⚡ 🔒 🚀 💡 🌟 ✅
  • 技术：🔧 💻 🖥️ ⚙️ 🛠️ 📡 🔌 🧠
  • 商务：📈 💰 🏢 👥 🤝 📋 🎯 🏆
  • 安全：🛡️ 🔐 🚨 ⚠️ 🔍 👁️ 🛑 ✋

十一、QA 检查与常见陷阱

自检流程

生成完 PPT 后，假设存在问题，逐页检查：

1. 内容检查 — 标题是否具体？数据是否真实？要点有洞见？
2. 布局多样性 — 相邻两页是否用了不同布局？有没有连续 3 页看起来一样？
3. 视觉一致性 — 色值是否统一？字号层级是否一致？间距是否整齐？
4. 页码 — 除封面外每页都有页码？
5. 可读性 — 字号够大？对比度够？文字不会被装饰元素遮挡？

常见 AI 生成陷阱（必须避免）

视觉一致性检查清单

• 所有页面使用相同的背景色（或同系渐变）
• 标题字号在 24~28px 范围内统一
• 正文字号在 14~16px 范围内统一
• 强调色只用主题的 accent 色
• 卡片圆角保持一致（同一风格配方）
• 安全边距一致（推荐 36~48px）

十二、关键原则

1. 直接生成 HTML — 每张 slide 是自包含的 <div>，不是 JSON 对象
2. 布局多样性 — 相邻不重复，特殊布局至少 2 种
3. 每次操作后浏览器自动刷新 — 不需要手动刷新
4. 用户永远不需要接触 HTML — 你负责翻译自然语言到 HTML
5. 先写 JSON 文件再 push — [{"html":"..."}, {"html":"..."}]
6. 使用 state 了解当前状态 — 编辑前先看
7. 统一主题配色 — 选定主题后所有 slide 使用同一套色值
8. 从 wiki 获取内容 — 读取 wiki 文档作为素材
9. 内容精炼 — 宁缺毋滥，不硬凑
10. 创意自由 — 模板只是起点，请创造独特的视觉效果

十三、PPTX 导出功能

浏览器内置一键导出：点击预览界面左上角的 「📥 导出 PPTX」 按钮即可下载可编辑的 PPTX 文件。

导出原理

1. html2canvas — 对每页 HTML 截图为 PNG（2x 清晰度）作为幻灯片背景图
2. DOM 文字提取 — 遍历 DOM 树，提取每个文字元素的位置、字号、颜色、对齐方式
3. PptxGenJS — 在浏览器中生成 PPTX 文件，背景图 + 文字叠加层 = 可编辑的 PPTX

导出效果

• ✅ 视觉 100% 还原（因为背景是截图）
• ✅ 文字可选中、可编辑（因为提取了文字层）
• ✅ 完全离线，无需服务器
• ⚠️ 表格和复杂布局的文字提取可能有偏差，但视觉保真

导出适配最佳实践

为了获得最佳导出效果，生成 HTML 时注意：

• 文字用 <div> 或 <span> 包裹 — 方便 DOM 提取
• 避免 transform: rotate() — 旋转文字在导出时位置可能偏移
• 不用 overflow: hidden 的嵌套裁剪 — 截图可以正确渲染，但文字提取可能遗漏
• 装饰性文字（如大号背景 "01"） — 导出时自动跳过 fontSize > 80 的元素