前端UI组件【免费下载链接】spectacleA React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.项目地址https://gitcode.com/gh_mirrors/spectacle2/spectacle点击查看免费下载Spectacle 是基于 React 的演示文稿框架允许开发者用 JSX 语法编写幻灯片并支持在演示过程中实时演示代码。本文聚焦官方 FAQ 中两个高频问题——如何将演示文稿导出为 PDF以及是否可以用 TypeScript 编写演示文稿——结合仓库源码深入讲解查询参数的底层原理、黑白打印机制与类型系统的开箱即用能力。读完本文你将掌握 Spectacle 的导出/打印模式、演示模式的 URL 控制方式以及基于 TypeScript 从零搭建演示文稿的完整方案。一、将幻灯片导出为 PDFexportMode与printMode1. 一键进入展平导出模式Spectacle 原生支持将演示文稿导出为 PDF。方式非常简单在演示文稿的 URL 末尾追加查询参数?exportModetrueSpectacle 会进入导出模式将整个演示文稿展平flatten为适合逐页打印的形态此时你只需要在浏览器中直接选择打印 → 另存为 PDF即可完成导出。https://your-deck.example.com/?exportModetrue所谓展平指的是导出模式下演示文稿不再依赖 JavaScript 交互如分步动画、键盘翻页而是把每一页幻灯片按固定尺寸、无溢出地排布为可打印页面从而保证浏览器打印出来的 PDF 与屏幕上的每页幻灯片一一对应。2. 黑白打印版本?exportModetrueprintModetrue如果你需要一份节省墨水的黑白讲义版本可以同时追加printMode参数https://your-deck.example.com/?exportModetrueprintModetrueprintMode会把幻灯片切换为打印机友好的黑白配色。两个参数可以自由组合Spectacle 支持在同一 URL 中通过多个连接多个查询参数例如exportModetrueprintModetrue这正是官方文档推荐的标准组合方式。3. 导出模式的源码实现原理从源码层面看导出与打印的差别其实非常小。在 packages/spectacle/src/components/deck/index.tsx 中View组件根据当前模式分发渲染PRINT_MODE渲染PrintMode {...props} /EXPORT_MODE渲染PrintMode {...props} exportMode /源码注释明确写道打印模式和导出模式除了使用的主题不同之外完全相同打印模式使用通常是单色调的打印主题而导出模式使用默认主题。Print mode and export mode are identical except for the theme that is used. Print mode uses the print theme which is usually monotone and export mode uses the default theme.也就是说两者共用同一个 packages/spectacle/src/components/print-mode/index.tsx 组件唯一的区别是导出模式exportMode保持你配置的默认主题颜色与设计原样呈现打印模式printMode切换到 packages/spectacle/src/theme/print-theme.ts 定义的黑白主题——该主题将primary设为#777、secondary与quaternary、quinary设为#000、tertiary设为#fff从而把整套配色压成灰阶实现黑白打印效果。PrintMode组件还做了几件对导出至关重要的事情见 print-mode/index.tsx通过media print全局样式清空body/html外边距并利用page { size: ... }将打印页尺寸设置为与幻灯片画布一致默认取主题中theme.size.width与theme.size.height例如1024px 768px将幻灯片背景替换为纯白Backdrop保证打印底色干净传入disableInteractivity关闭交互使每页幻灯片以静态、完整的方式呈现。4. 模式是如何被 URL 触发的useModes与查询参数解析?exportModetrue这类查询参数并非魔法而是由 packages/spectacle/src/hooks/use-modes.ts 这个核心 Hook 负责解析的。其工作流程如下组件挂载时useModes读取window.location.search用query-string库的parse并开启parseBooleans: true解析出所有查询参数modeKeyForSearchParam按优先级判断当前处于哪种模式——若presenterMode为真则进入演示者模式否则依次判断overviewMode、printMode、exportMode全部为空则回到默认模式见 use-modes.ts五种模式常量定义在 packages/spectacle/src/utils/constants.ts 的SPECTACLE_MODES中DEFAULT_MODE、PRESENTER_MODE、OVERVIEW_MODE、PRINT_MODE、EXPORT_MODEtoggleMode在切换模式时会重写window.location.search把对应的presenterMode/overviewMode/printMode/exportMode布尔参数写回 URL并尽量保留当前的slideIndex与stepIndex。这一行为有测试用例背书packages/spectacle/src/hooks/use-modes.test.ts 逐一验证了切换演示者、概览、打印、导出模式后location.search会分别变成presenterModetrue、overviewMode...、printModetrue、exportModetrue。这意味着你完全可以把包含模式的 URL 发给协作者或投放到观众端对方打开即进入对应模式这也是导出场景直接分享带参链接能工作的根本原因。5. 完整支持的查询参数一览Spectacle 支持的全部查询参数可在官方演示控制文档中查看详见 docs/presenting-controls.mdx。除导出外常用参数还包括参数说明exportMode进入导出模式用于将演示文稿以 PDF 形式从浏览器另存为 PDFprintMode将幻灯片切换为打印机友好的黑白版本通常与exportMode组合使用presenterMode显示演示者模式包含演讲备注、计时器与下一张幻灯片预览这些模式也都可以通过键盘快捷键即时切换如Alt Shift P切换演示者模式、Alt Shift O切换概览模式快捷键定义见 constants.ts与查询参数在useModes内部共用同一套模式切换逻辑方便你在演示现场自由进出导出/打印状态。二、用 TypeScript 编写演示文稿类型开箱即用1. 类型随包发布无需额外安装Spectacle 官方 FAQ 的第二个高频问题能否用 TypeScript 编写演示文稿答案是肯定的。Spectacle 的类型定义直接随 npm 包发布你不需要额外安装types/spectacle之类的类型包也不需要任何单独的类型定义导入语句在任意.ts或.js演示文稿中都能安全使用。这一点可以直接在包配置中得到印证packages/spectacle/package.json 中声明了types: lib/index.d.ts与main: lib/index.jsTypeScript 编译器会自动从该字段解析类型因此import { Deck, Slide, Heading } from spectacle这类导入天然具备完整的类型提示与编译期检查。2. TypeScript 是 Spectacle 与 create-spectacle 的默认语言更进一步TypeScript 目前已经是 Spectacle 及脚手架工具create-spectacle的默认语言。官方在 FAQ 中明确表示TypeScript 是 Spectacle 与create-spectacleCLI 的默认语言你可以直接使用无需任何额外配置。仓库中的脚手架模板印证了这一点packages/create-spectacle/src/templates/file-writers.ts 生成的入口文件就是index.tsxpackages/create-spectacle/src/templates/webpack.ts 将构建入口配置为entry: ./index.tsxpackages/create-spectacle/src/templates/babel.ts 内置了babel/preset-typescript用于转译 TSX 代码packages/create-spectacle/src/templates/package.ts 的依赖中默认包含typescript: ^5.3.3。由 packages/create-spectacle/src/templates/index.ts 生成的初始演示文稿就是一个标准的 TypeScript React 组件import React from react; import { createRoot } from react-dom/client; import { Deck, DefaultTemplate, Slide, FlexBox, Heading, SpectacleLogo } from spectacle const Presentation () ( Deck template{() DefaultTemplate /} Slide FlexBox height100% HeadingMy Presentation/Heading /FlexBox /Slide Slide FlexBox height100% Heading fontSizeh2Made with/Heading SpectacleLogo size{300} / /FlexBox /Slide /Deck ); createRoot(document.getElementById(app)!).render(Presentation /);注意其中的非空断言document.getElementById(app)!——这正是 TypeScript 默认启用后的典型写法。如果你偏好纯 JavaScriptSpectacle 同样完全兼容.js文件中不加任何类型注解即可运行两者共享同一套 API 与组件。3. TypeScript 示例项目参考如果你想快速对照一个完整可运行的 TypeScript 演示文稿项目可以直接参考仓库中的 examples/typescript 目录其结构为index.tsx入口演示文稿组件tsconfig.jsonTypeScript 编译器配置webpack.config.js基于 webpack 的构建配置package.json依赖与脚本。配合 README.md 中的说明执行pnpm install后即可本地启动开发服务器边改index.tsx边实时预览。三、FAQ 速查总结问题结论关键操作能否将幻灯片导出到其他用途可以原生支持 PDF 导出URL 追加?exportModetrue浏览器中另存为 PDF能否打印黑白版本可以URL 追加?exportModetrueprintModetrue能否用 TypeScript 编写可以类型随包发布直接使用.ts/.tsx无需额外类型包需要额外配置 TypeScript 吗不需要TypeScript 已是默认语言使用create-spectacle生成即自带完整 TS 环境这两个能力共同构成了 Spectacle 从编写到交付的完整闭环开发阶段用 TypeScript 获得类型安全保障演示阶段用查询参数即时切换演示者/概览模式收尾阶段用exportMode一键导出分享用的 PDF 或讲义。所有机制都基于 URL 查询参数与包内类型声明实现无需任何外部工具这也是 Spectacle 保持开箱即用体验的设计核心。赞分享前端UI组件【免费下载链接】spectacleA React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.项目地址https://gitcode.com/gh_mirrors/spectacle2/spectacle点击查看免费下载相关推荐ActionView甘特图功能详解项目进度可视化与时间管理ActionView甘特图功能详解项目进度可视化与时间管理 ActionView是一款开源免费的类Jira问题跟踪工具专为中小型企业设计。它基于LaraveSlidev 幻灯片导出实战指南用 slidev export 与浏览器导出 PDF / PPTX / PNG / MarkdownSlidev 幻灯片导出实战指南用 slidev export 与浏览器导出 PDF / PPTX / PNG / Markdown 本文是围绕 Slidev前端开发工具Exchange API开发者手册从零开始构建金融应用Exchange API开发者手册从零开始构建金融应用 Exchange API是一个 免费、无限制 的货币汇率API服务支持200种货币、加密货币和贵金上一篇GPT4Free项目中的对话上下文保持技术解析下一篇ggplot2配色方案终极指南从默认调色板到高级自定义色彩创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考