Slidev 如何在构建产物中同时生成可下载的 PDF 并显示下载按钮【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev讲完一场 Talk 之后你往往希望观众既能在线浏览可交互的幻灯片也能随手下载一份 PDF 存档。Slidev 的slidev build支持在构建 SPA 的同时渲染出一份 PDF 放进构建产物并在构建后的页面中显示一个下载按钮观众点击即可获取 PDF。这篇文章给出从配置、构建、验证到部署的完整操作路径适用前提是你的项目通过slidev/cli构建用npm init slidev创建的项目已本地安装 CLI。准备条件项目能正常执行slidev命令。CLI 需要全局安装slidev/cli或安装在 Node.js 项目本地npm init slidev创建的项目已包含本地安装。注意npx slidev不受支持因为包名实际是slidev/cli。构建时的 PDF 生成走的是与slidev export相同的导出渲染流程而 CLI 导出依赖 Playwright 渲染页面因此项目中需要先安装playwright-chromium见 Exporting 文档pnpm add -D playwright-chromiumnpm i -D playwright-chromiumyarn add -D playwright-chromiumbun add -D playwright-chromiumdeno add -D npm:playwright-chromium开启 PDF 生成与下载按钮两种配置方式任选其一效果一致构建时生成 PDF 文件构建后的页面中出现下载按钮。方式一headmatter 配置在第一张幻灯片的 headmatterfrontmatter中加入download配置该选项默认值为false--- download: true ---download: true时Slidev 会在构建产物的同时生成 PDF 文件并在构建后的页面中显示下载按钮。方式二build 命令参数不想改 slides 文件时可以直接在构建命令上传--download布尔值默认false只接受 boolean不支持传 URLslidev build --download可选指向已有的 PDF 地址如果 PDF 已经由别处生成并托管可以在 headmatter 中直接给出 URL此时会跳过渲染流程下载按钮直接指向该地址--- download: https://myside.com/my-talk.pdf ---这种写法仅限 headmatterCLI 的--download只接受布尔值。构建并验证结果执行构建以 headmatter 方式为例slidev build构建产物默认输出到dist目录。当download生效时构建过程除了 SPA 文件还会在输出目录中生成 PDF 文件文件名为 headmatter 中exportFilename指定的名字默认slidev-exported即默认产物是dist/slidev-exported.pdf。这一逻辑见构建命令实现 build.ts。验证步骤检查dist/中是否同时存在 SPA 文件和 PDF 文件在构建目录中运行npx vite preview或任意静态服务器测试构建版本打开页面后把鼠标移到页面左下角唤出导航栏见 UI 文档导航栏中的 “Download PDF” 按钮即为本次配置产生的下载入口点击即可下载构建产物里的 PDF。一个实现细节生成 PDF 时构建脚本会临时在固定端口12445上启动本地服务来渲染构建产物见 build.ts。构建期间如果该端口被占用构建可能失败排查构建报错时可先确认这一点。定制生成的 PDF按 build-with-pdf 文档 说明使用 download 选项时可以同时提供导出选项来源有两个CLI 的 export 选项完整列表见 CLI 文档可以附加在 build 命令后例如为大型演示增加渲染超时时间slidev build --download --timeout 60000headmatter 中的export配置块格式为 export CLI 选项的 camelCase 写法默认值列表见 Customizations 文档--- download: true exportFilename: my-talk export: format: pdf timeout: 30000 dark: false withClicks: false withToc: false ---其中format可选pdf、png、pptx、md默认pdf--range支持按页码区间导出如1,4-5,6--with-clicks会把带点击动画的幻灯片导出为多页。这些参数同样可用于 build 时的 PDF 生成。部署构建产物带 PDF 下载按钮的dist目录就是一个标准 SPA 静态站点按 Building and Hosting 文档 部署即可部署到子路径时必须传--base且路径以/开头和结尾slidev build --download --base /talks/my-cool-talk/GitHub Pages、Netlify、Vercel 等平台的配置文件写法deploy.yml、netlify.toml、vercel.json都在 hosting 文档中给出按其步骤执行即可如果计划把构建版幻灯片公开分享且不想泄露演讲者备注可同时加--without-notesslidev build --download --without-notes常见问题以下问题在 Exporting 文档 的 Troubleshooting 中有对应处理build 时的 PDF 生成同样适用导出的 PDF 内容缺失或动画未播完在导出命令加--wait 1000增加每页导出前的等待时间或在 headmatter 中写export.wait: 1000slidev build --download --wait 1000大型演示超时用--timeout增大 Playwright 超时如slidev build --download --timeout 60000。PDF 中 Emoji 显示异常通常是运行环境缺少字体文档以 Google 的 Noto Emoji 为例。文档给出的修复方式是下载NotoColorEmoji.ttf并移动到系统字体目录/usr/local/share/fonts/后执行fc-cache -fv刷新字体缓存——注意这组命令会修改系统字体且需要管理员权限只在容器/CI 类 Linux 环境自行评估后执行。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考