slidev-export

导出 Slidev 演示文稿

本技能涵盖 Slidev 的所有导出选项，包括 PDF、PPTX、PNG 和 Markdown 导出，以及各种配置选项。

何时使用本技能

• 无需运行 Slidev 即可分享演示文稿
• 创建 PDF 讲义
• 存档演示文稿
• 打印幻灯片
• 转换为 PowerPoint

导出方式

浏览器导出器（推荐）

从 v0.50.0 开始，使用内置的浏览器导出器：

1. 运行演示文稿：npm run dev
2. 在导航栏中打开“导出”面板
3. 或访问：http://localhost:3030/export
4. 选择格式和选项
5. 点击“导出”

CLI 导出

需要 playwright-chromium：

npm install -D playwright-chromium

然后：

npx slidev export

导出格式

导出 PDF

浏览器方式：

1. 打开 /export
2. 选择“PDF”
3. 配置选项
4. 下载

CLI 方式：

npx slidev export

输出：./slides-export.pdf

导出 PPTX

浏览器方式：

1. 打开 /export
2. 选择“PPTX”
3. 下载

CLI 方式：

npx slidev export --format pptx

输出：./slides-export.pptx

注意：幻灯片将以图像形式导出，并包含演讲者备注。

导出 PNG

CLI 方式：

npx slidev export --format png

输出：./slides-export/ 目录中的独立 PNG 文件。

导出 Markdown

npx slidev export --format md

编译 Markdown，并嵌入 PNG 图像。

CLI 选项

基本选项

选项	描述
--format	导出格式：pdf、pptx、png、md
--output	输出文件／目录名称
--dark	以深色模式导出
--with-clicks	将每次点击导出为单独页面
--range	导出指定幻灯片

示例

自定义输出名称：

npx slidev export --output my-presentation

深色模式导出：

npx slidev export --dark

导出点击步骤：

npx slidev export --with-clicks

为每个动画步骤创建单独的页面。

指定幻灯片：

npx slidev export --range 1,4-5,8

导出第 1、4、5 和 8 张幻灯片。

高级选项

超时设置

适用于包含动画的复杂幻灯片：

npx slidev export --timeout 60000

将超时时间延长至 60 秒。

等待内容加载

npx slidev export --wait 10000

等待 10 秒后开始导出。

页面加载策略

npx slidev export --wait-until networkidle

选项：none、load、domcontentloaded、networkidle

目录

npx slidev export --with-toc

生成包含幻灯片标题的 PDF 大纲。

透明背景（PNG）

npx slidev export --format png --omit-background

移除默认的白色背景。

在 Frontmatter 中配置

导出文件名

---
exportFilename: my-awesome-presentation
---

下载按钮

---
download: true
---

在演示文稿中显示下载按钮。

导出时附带源文件

---
download: 'https://example.com/slides.pdf'
---

链接到预先生成的 PDF。

处理点击动画

不使用 --with-clicks

每张幻灯片仅导出最终状态。

使用 --with-clicks

每个点击步骤都会成为单独的页面：

• 幻灯片 1，点击 0 → 页面 1
• 幻灯片 1，点击 1 → 页面 2
• 幻灯片 1，点击 2 → 页面 3
• 幻灯片 2，点击 0 → 页面 4
• 等等。

讲义建议

制作讲义时使用 --with-clicks，让读者了解内容的呈现过程。

导出质量

PDF 分辨率

npx slidev export --scale 2

比例越高，质量越高（文件也越大）。

PNG 分辨率

npx slidev export --format png --scale 2

Package.json 脚本

添加便捷脚本：

{
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export",
    "export:pdf": "slidev export --format pdf",
    "export:pptx": "slidev export --format pptx",
    "export:png": "slidev export --format png",
    "export:dark": "slidev export --dark"
  }
}

处理导出问题

字体无法渲染

1. 使用网络字体（Google Fonts）
2. 或在样式中嵌入字体

代码未高亮

1. 确保 Shiki 在导出前加载
2. 使用 --wait 选项

图像缺失

1. 使用绝对 URL，或
2. 将图像放在 public/ 目录中

动画异常

导出不包含动画。 使用 --with-clicks 捕获各个状态。

超时错误

npx slidev export --timeout 120000 --wait 5000

内存问题

对于大型演示文稿：

NODE_OPTIONS="--max-old-space-size=4096" npx slidev export

导出与构建

	导出	构建
输出	PDF/PPTX/PNG	静态网站
交互性	否	是
动画	静态截图	可正常播放
大小	较小	较大
分享方式	电子邮件／Drive	Web 托管

最佳实践

1. 尽早测试导出

不要等到演示当天：

npm run export

2. 仔细检查 PDF

检查：

• 是否包含所有幻灯片
• 代码是否清晰易读
• 图像是否显示
• 颜色是否正确

3. 使用一致的宽高比

标准为 16:9。不要在演示过程中更改。

4. 简化内容以便导出

某些功能无法很好地导出：

• 视频 → 使用截图
• iframe → 使用截图
• 复杂动画 → 简化

5. 在 PPTX 中包含演讲者备注

PPTX 导出时会自动包含备注。

6. 为导出文件添加版本号

npx slidev export --output presentation-v1.2

导出工作流

用于会议投稿

# High-quality PDF
npx slidev export --with-toc --scale 2

用于讲义

# Include all click states
npx slidev export --with-clicks

用于社交媒体

# Individual images
npx slidev export --format png

用于归档

# Multiple formats
npm run export:pdf
npm run export:pptx
npm run export:png

输出格式

导出时：

# EXPORT COMMAND:
npx slidev export [options]

# OPTIONS USED:
--format [pdf|pptx|png|md]
--output [filename]
--with-clicks (if needed)
--dark (if needed)
--range [slide numbers]
--timeout [ms]
--wait [ms]

导出前检查清单：

• 所有幻灯片均正确渲染
• 代码块清晰可读
• 图片正常加载
• 字体正确
• 导出命令测试成功

输出文件：

• PDF：./[name].pdf
• PPTX：./[name].pptx
• PNG：./[name]/