# HTML 转 PowerPoint 指南 使用 `html2pptx.js` 库将 HTML 幻灯片转换为具有精确定位的 PowerPoint 演示文稿。 ## 目录 1. [创建 HTML 幻灯片](#creating-html-slides) 2. [使用 html2pptx 库](#using-the-html2pptx-library) 3. [使用 PptxGenJS](#using-pptxgenjs) --- ## 创建 HTML 幻灯片 每个 HTML 幻灯片必须包含正确的 body 尺寸： ### 布局尺寸 - **16:9** (默认): `width: 720pt; height: 405pt` - **4:3**: `width: 720pt; height: 540pt` - **16:10**: `width: 720pt; height: 450pt` ### 支持的元素 - `

`, `

`-`

` - 带样式的文本 - `

`, `
` - 列表（切勿使用手动项目符号 •, -, *） - ``, `` - 粗体文本（行内格式） - ``, `` - 斜体文本（行内格式） - `` - 下划线文本（行内格式） - `` - 带 CSS 样式的行内格式（粗体、斜体、下划线、颜色） - `
` - 换行符 - 带背景/边框的 `
` - 转换为形状 - `` - 图片 - `class="placeholder"` - 图表的预留空间（返回 `{ id, x, y, w, h }`） ### 关键文本规则 **所有文本必须位于 `

`, `

`-`

`, `

` 或 `
` 标签内：** - ✅ 正确: `

此处为文本

` - ❌ 错误: `
此处为文本
` - **文本将不会出现在 PowerPoint 中** - ❌ 错误: `此处为文本` - **文本将不会出现在 PowerPoint 中** - 没有文本标签的 `
` 或 `` 中的文本将被静默忽略 **切勿使用手动项目符号（•, -, * 等）** - 请改用 `
` 或 `
` 列表 **仅使用通用的 Web 安全字体：** - ✅ Web 安全字体: `Arial`, `Helvetica`, `Times New Roman`, `Georgia`, `Courier New`, `Verdana`, `Tahoma`, `Trebuchet MS`, `Impact`, `Comic Sans MS` - ❌ 错误: `'Segoe UI'`, `'SF Pro'`, `'Roboto'`, 自定义字体 - **可能导致渲染问题** ### 样式 - 在 body 上使用 `display: flex` 以防止外边距折叠破坏溢出验证 - 使用 `margin` 进行间距设置（padding 包含在尺寸中） - 行内格式：使用 ``, ``, `` 标签或带 CSS 样式的 `` - `` 支持: `font-weight: bold`, `font-style: italic`, `text-decoration: underline`, `color: #rrggbb` - `` 不支持: `margin`, `padding`（PowerPoint 文本运行中不支持） - 示例: `粗体蓝色文本` - Flexbox 有效 - 位置根据渲染布局计算 - 在 CSS 中使用带 `#` 前缀的十六进制颜色 - **文本对齐**: 使用 CSS `tex

数据来源：claude-code-templates（MIT），中文翻译由 AI 生成。详见关于我们。