')
inner = content[start:end]
# 修复资源路径 ../assets/ → ./assets/
inner = inner.replace('../assets/', './assets/')
out.write(f'
{inner}
\n')
out.write('''
''')
print(f"Merged {len(pages)} slides → {OUTPUT}")
```
---
### Step 3 — Playwright 导出脚本
```javascript
// export.js
const { chromium } = require('playwright');
const path = require('path');
(async () => {
const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({
viewport: { width: 1920, height: 1080 }
});
const page = await context.newPage();
// 加载合并后的 HTML
const filePath = path.resolve(__dirname, 'combined.html');
await page.goto(`file://${filePath}`);
// 等待 dom-to-pptx 初始化完毕
await page.waitForFunction(
() => typeof window.exportToPptx === 'function',
{ timeout: 30000 }
);
console.log('dom-to-pptx 就绪，开始导出...');
// 拦截浏览器下载事件
const [download] = await Promise.all([
page.waitForEvent('download', { timeout: 120000 }),
page.evaluate(() => window.exportToPptx())
]);
const outputPath = path.resolve(__dirname, 'output.pptx');
await download.saveAs(outputPath);
console.log(`✅ 导出完成: ${outputPath}`);
console.log(` 文件大小: ${(await require('fs').statSync(outputPath)).size / 1024 / 1024} MB`);
await browser.close();
})();
```
**运行**：
```bash
npm install playwright dom-to-pptx
npx playwright install chromium
node export.js
```
---
### Step 4 — 部署交付
```bash
# 复制到文件站
cp output.pptx ~/projects/files/dist/L1/L1-11保卫小鸡/
# 重新生成文件列表 + 部署
cd ~/projects/files
python3 generate.py
bash deploy.sh
```
部署后即可通过文件站访问：
- 主页：https://files-f0v.pages.dev/
- 直接链接：https://files-f0v.pages.dev/L1/L1-11保卫小鸡/L1-11保卫小鸡.pptx
---
## 三、dom-to-pptx 核心原理
```
浏览器 DOM 树
↓ 递归遍历
每个 DOM 节点 → 分类处理：
├──
→ PPTX 矩形形状 (p:sp)
│ ├── background → 形状填充 (a:solidFill)
│ ├── border → 形状边框 (a:ln)
│ ├── border-radius → 圆角 (a:prstGeom)
│ └── box-shadow → 阴影效果 (a:effectLst)
├──
![]()
→ PPTX 图片 (p:pic)
│ └── src → 内嵌图片数据
├──
/ → PPTX 文本框 (p:txBody)
│ ├── font-family → 字体引用
│ ├── font-size → 字号
│ ├── color → 文字颜色
│ └── text-align → 对齐方式
└──