Back to Details

slidev-export

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Exporting Slidev Presentations

导出Slidev演示文稿

This skill covers all export options in Slidev, including PDF, PPTX, PNG, and Markdown exports with various configuration options.
本功能涵盖Slidev的所有导出选项，包括PDF、PPTX、PNG以及带有多种配置选项的Markdown导出。

When to Use This Skill

使用场景

  • Sharing presentations without running Slidev
  • Creating PDF handouts
  • Archiving presentations
  • Printing slides
  • Converting to PowerPoint
  • 在不运行Slidev的情况下分享演示文稿
  • 创建PDF讲义
  • 归档演示文稿
  • 打印幻灯片
  • 转换为PowerPoint格式

Export Methods

导出方法

Browser Exporter (Recommended)

浏览器导出器（推荐）

Since v0.50.0, use the built-in browser exporter:
  1. Run your presentation: 
    npm run dev
  2. Open the Export panel from navigation bar
  3. Or navigate to: 
    http://localhost:3030/export
  4. Choose format and options
  5. Click Export
从v0.50.0版本开始，使用内置的浏览器导出器：
  1. 运行演示文稿：
    npm run dev
  2. 从导航栏打开导出面板
  3. 或直接访问：
    http://localhost:3030/export
  4. 选择格式和选项
  5. 点击导出

CLI Export

CLI导出

Requires 
playwright-chromium
:
bash
npm install -D playwright-chromium
Then:
bash
npx slidev export
需要安装
playwright-chromium
：
bash
npm install -D playwright-chromium
然后执行：
bash
npx slidev export

Export Formats

导出格式

PDF Export

PDF导出

Browser Method:
  1. Open 
    /export
  2. Select "PDF"
  3. Configure options
  4. Download
CLI Method:
bash
npx slidev export
Output: 
./slides-export.pdf
浏览器方法：
  1. 打开
    /export
    页面
  2. 选择“PDF”
  3. 配置选项
  4. 下载
CLI方法：
bash
npx slidev export
输出文件：
./slides-export.pdf

PPTX Export

PPTX导出

Browser Method:
  1. Open 
    /export
  2. Select "PPTX"
  3. Download
CLI Method:
bash
npx slidev export --format pptx
Output: 
./slides-export.pptx
Note: Slides exported as images, presenter notes included.
浏览器方法：
  1. 打开
    /export
    页面
  2. 选择“PPTX”
  3. 下载
CLI方法：
bash
npx slidev export --format pptx
输出文件：
./slides-export.pptx
注意：幻灯片将以图片形式导出，包含演示者备注。

PNG Export

PNG导出

CLI Method:
bash
npx slidev export --format png
Output: Individual PNG files in 
./slides-export/
directory.
CLI方法：
bash
npx slidev export --format png
输出：单个PNG文件将保存在
./slides-export/
目录中。

Markdown Export

Markdown导出

bash
npx slidev export --format md
Compiles Markdown with embedded PNG images.
bash
npx slidev export --format md
编译后的Markdown将嵌入PNG图片。

CLI Options

CLI选项

Basic Options

基础选项

OptionDescription
--format
Export format: 
pdf
, 
pptx
, 
png
, 
md
--output
Output file/directory name
--dark
Export in dark mode
--with-clicks
Export each click as separate page
--range
Export specific slides
选项描述
--format
导出格式：
pdf
、
pptx
、
png
、
md
--output
输出文件/目录名称
--dark
以深色模式导出
--with-clicks
将每一次点击操作导出为单独页面
--range
导出指定幻灯片

Examples

示例

Custom output name:
bash
npx slidev export --output my-presentation
Dark mode export:
bash
npx slidev export --dark
Export with clicks:
bash
npx slidev export --with-clicks
Creates separate pages for each animation step.
Specific slides:
bash
npx slidev export --range 1,4-5,8
Exports slides 1, 4, 5, and 8.
自定义输出名称：
bash
npx slidev export --output my-presentation
深色模式导出：
bash
npx slidev export --dark
导出点击步骤：
bash
npx slidev export --with-clicks
为每个动画步骤创建单独页面。
导出指定幻灯片：
bash
npx slidev export --range 1,4-5,8
导出幻灯片1、4、5和8。

Advanced Options

高级选项

Timeout Settings

超时设置

For complex slides with animations:
bash
npx slidev export --timeout 60000
Increases timeout to 60 seconds.
对于包含复杂动画的幻灯片：
bash
npx slidev export --timeout 60000
将超时时间增加到60秒。

Wait for Content

等待内容加载

bash
npx slidev export --wait 10000
Waits 10 seconds before starting export.
bash
npx slidev export --wait 10000
开始导出前等待10秒。

Page Loading Strategy

页面加载策略

bash
npx slidev export --wait-until networkidle
Options: 
none
, 
load
, 
domcontentloaded
, 
networkidle
bash
npx slidev export --wait-until networkidle
可选值：
none
、
load
、
domcontentloaded
、
networkidle

Table of Contents

生成目录

bash
npx slidev export --with-toc
Generates PDF outline with slide titles.
bash
npx slidev export --with-toc
生成包含幻灯片标题的PDF大纲。

Transparent Background (PNG)

透明背景（PNG格式）

bash
npx slidev export --format png --omit-background
Removes default white background.
bash
npx slidev export --format png --omit-background
移除默认白色背景。

Configuration in Frontmatter

Frontmatter配置

Export Filename

导出文件名

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

Download Button

下载按钮

yaml
---
download: true
---
Shows download button in presentation.
yaml
---
download: true
---
在演示文稿中显示下载按钮。

Export with Source

关联外部导出文件

yaml
---
download: 'https://example.com/slides.pdf'
---
Links to pre-generated PDF.
yaml
---
download: 'https://example.com/slides.pdf'
---
链接到预先生成的PDF文件。

Handling Click Animations

处理点击动画

Without --with-clicks

不使用--with-clicks参数

Only final state of each slide exported.
仅导出每张幻灯片的最终状态。

With --with-clicks

使用--with-clicks参数

Each click step becomes a separate page:
  • Slide 1, Click 0 → Page 1
  • Slide 1, Click 1 → Page 2
  • Slide 1, Click 2 → Page 3
  • Slide 2, Click 0 → Page 4
  • etc.
每一次点击步骤都会成为单独页面：
  • 幻灯片1，点击0 → 页面1
  • 幻灯片1，点击1 → 页面2
  • 幻灯片1，点击2 → 页面3
  • 幻灯片2，点击0 → 页面4
  • 以此类推

Recommended for Handouts

讲义推荐用法

Use 
--with-clicks
for handouts so readers see progression.
使用
--with-clicks
参数导出讲义，以便读者查看内容的递进过程。

Export Quality

导出质量

PDF Resolution

PDF分辨率

bash
npx slidev export --scale 2
Higher scale = higher quality (and larger file).
bash
npx slidev export --scale 2
缩放比例越高，质量越好（文件体积也越大）。

PNG Resolution

PNG分辨率

bash
npx slidev export --format png --scale 2
bash
npx slidev export --format png --scale 2

Package.json Scripts

package.json脚本配置

Add convenient scripts:
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"
  }
}
添加便捷的脚本命令：
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"
  }
}

Handling Export Issues

导出问题处理

Fonts Not Rendering

字体未渲染

  1. Use web fonts (Google Fonts)
  2. Or embed fonts in styles
  1. 使用网络字体（如Google Fonts）
  2. 或在样式中嵌入字体

Code Not Highlighting

代码未高亮

  1. Ensure Shiki loads before export
  2. Use 
    --wait
    option
  1. 确保Shiki在导出前已加载完成
  2. 使用
    --wait
    参数

Images Missing

图片缺失

  1. Use absolute URLs or
  2. Place in 
    public/
    directory
  1. 使用绝对URL
  2. 或将图片放置在
    public/
    目录中

Animations Broken

动画失效

Export doesn't include animations. Use 
--with-clicks
to capture states.
导出不包含动画效果。使用
--with-clicks
参数捕获各状态。

Timeout Errors

超时错误

bash
npx slidev export --timeout 120000 --wait 5000
bash
npx slidev export --timeout 120000 --wait 5000

Memory Issues

内存问题

For large presentations:
bash
NODE_OPTIONS="--max-old-space-size=4096" npx slidev export
对于大型演示文稿：
bash
NODE_OPTIONS="--max-old-space-size=4096" npx slidev export

Export vs Build

导出与构建的区别

ExportBuild
OutputPDF/PPTX/PNGStatic website
InteractiveNoYes
AnimationsStatic capturesWorking
SizeSmallerLarger
SharingEmail/DriveWeb hosting
导出构建
输出结果PDF/PPTX/PNG静态网站
交互性无有
动画静态捕获可正常播放
文件大小较小较大
分享方式邮件/云盘网页托管

Best Practices

最佳实践

1. Test Export Early

1. 提前测试导出

Don't wait until presentation day:
bash
npm run export
不要等到演示当天才测试：
bash
npm run export

2. Review PDF Thoroughly

2. 仔细检查PDF

Check:
  • All slides included
  • Code readable
  • Images appear
  • Colors correct
检查内容：
  • 所有幻灯片均已包含
  • 代码清晰可读
  • 图片正常显示
  • 颜色显示正确

3. Use Consistent Aspect Ratio

3. 使用统一的宽高比

Standard is 16:9. Don't change mid-presentation.
标准比例为16:9，不要在演示过程中更改。

4. Simplify for Export

4. 简化内容以适配导出

Some features don't export well:
  • Videos → Use screenshots
  • iframes → Use screenshots
  • Complex animations → Simplify
部分功能导出效果不佳：
  • 视频 → 使用截图
  • 内嵌框架（iframes） → 使用截图
  • 复杂动画 → 简化处理

5. Include Speaker Notes in PPTX

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

PPTX export includes notes automatically.
PPTX导出会自动包含备注内容。

6. Version Your Exports

6. 为导出文件添加版本标识

bash
npx slidev export --output presentation-v1.2
bash
npx slidev export --output presentation-v1.2

Export Workflow

导出工作流

For Conference Submission

会议提交用

bash
undefined
bash
undefined

High-quality PDF

高质量PDF

npx slidev export --with-toc --scale 2
undefined
npx slidev export --with-toc --scale 2
undefined

For Handouts

讲义用

bash
undefined
bash
undefined

Include all click states

包含所有点击状态

npx slidev export --with-clicks
undefined
npx slidev export --with-clicks
undefined

For Social Media

社交媒体用

bash
undefined
bash
undefined

Individual images

导出单张图片

npx slidev export --format png
undefined
npx slidev export --format png
undefined

For Archiving

归档用

bash
undefined
bash
undefined

Multiple formats

导出多种格式

npm run export:pdf npm run export:pptx npm run export:png
undefined
npm run export:pdf npm run export:pptx npm run export:png
undefined

Output Format

输出格式

When exporting:
bash
undefined
导出时的命令格式：
bash
undefined

EXPORT COMMAND:

导出命令：

npx slidev export [options]
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]

**CHECKLIST BEFORE EXPORT:**
- [ ] All slides render correctly
- [ ] Code blocks are readable
- [ ] Images load properly
- [ ] Fonts are correct
- [ ] Test export command works

**OUTPUT FILES:**
- PDF: ./[name].pdf
- PPTX: ./[name].pptx
- PNG: ./[name]/
--format [pdf|pptx|png|md] --output [filename] --with-clicks（如需） --dark（如需） --range [幻灯片编号] --timeout [毫秒] --wait [毫秒]

**导出前检查清单：**
- [ ] 所有幻灯片渲染正常
- [ ] 代码块清晰可读
- [ ] 图片加载正常
- [ ] 字体显示正确
- [ ] 导出命令可正常执行

**输出文件：**
- PDF: ./[名称].pdf
- PPTX: ./[名称].pptx
- PNG: ./[名称]/