Slidev 如何在构建产物中同时生成可下载的 PDF 并显示下载按钮-北京尧图网络

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），仅供参考

Slidev 如何在构建产物中同时生成可下载的 PDF 并显示下载按钮

相关推荐

jj 多远程（Multiple Remotes）实战指南：GitHub 式 Fork 协作与上游集成工作流配置

从源码构建 Deskflow：一套键鼠多机共享工具的完整编译指南

ZeroTierOne 的 MPL-2.0 许可怎么用不踩线：面向集成者与二次开发者的完整指南

更多资讯

ReVanced Manager 应用管理指南：在 Apps 标签页中查看、打开、重新修补与卸载已修补应用

ToolJet 数据库查询实战指南：GUI 模式、SQL 编辑器、联表与 JSON 查询全解析

如何理解 Motrix 浏览器扩展配对协议 MBP1：SPAKE2 首次配对与 AEAD 安全通道

Angular 编译器 ngtsc 的 Shims 机制解析：如何把“虚拟源码文件“无缝注入 TypeScript 程序

技术新手到中级的成长路径与学习方法

OpenCode 如何在 GitLab 的 Issue 与 Merge Request 中通过 @opencode 触发任务

今日更新

CopilotKit Vue Demo 与 React Demo 的 Parity 实现指南：路由、运行时端点与交互语义的全框架对齐

Harbor RBAC 实战：db_auth 模式下非管理员用户管理项目成员的完整验证与权限模型解析

STM32平衡车纯平衡程序从拆包到参数整定的完整调试指南

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？