跳转到内容

原生 JavaScript 查看器概览 ​

pptx-vanilla-viewer 是不依赖框架的 PowerPoint 查看器,使用普通 DOM 在浏览器中渲染 .pptx 幻灯片,不依赖 React、Vue 或 Angular。调用工厂函数 createPptxViewer(container, options),会返回具有命令式 API 的查看器实例。解析引擎(pptx-viewer-core)和共享渲染逻辑(pptx-viewer-shared)已经打包在内,因此该包可以独立使用。

在线原生 JavaScript 演示展示了此包在没有框架时的运行效果。

提供的能力 ​

能力说明
幻灯片渲染文本、形状、图片、组合、连接线、表格、图表、SmartArt(二维及可选三维)、媒体、墨迹、OLE、内容部件、缩放定位链接和三维模型,都使用专用渲染器。
导航工具栏、缩略图侧边栏、键盘导航(方向键、PageUp/PageDown、空格、Home/End)和演讲者备注面板。
放映通过真实 Fullscreen API 进入全屏放映模式,Esc 退出,支持媒体自动播放。
主题共享的 ViewerTheme 系统,使用 --pptx-* CSS 自定义属性,包含朱红色预设。参见主题。
编辑通过 editable 启用插入、格式设置、多选和组合、排列、继承模板编辑、富文本备注、撤销和重做、保存和下载。参见实例 API。
导出PNG、PDF、GIF、视频、打印、备注页和讲义输出。
无障碍元素语义,以及覆盖整个演示文稿并支持问题导航的无障碍检查器。
可扩展性开放的元素渲染器注册表,可以按元素类型注册或覆盖渲染器,无需 fork。参见元素渲染器。

元素覆盖范围

底层解析器的精确支持范围,以及采用近似处理的功能,请参见已知限制。

安装 ​

bash
npm i pptx-vanilla-viewer

核心引擎(pptx-viewer-core)和共享渲染层已经打包在内,引擎运行时依赖(jszip、fast-xml-parser)自动安装。没有框架 peer 依赖。

简单示例 ​

ts
import { createPptxViewer } from 'pptx-vanilla-viewer';

const viewer = createPptxViewer(document.getElementById('host')!, {
	source: '/decks/quarterly.pptx', // URL, ArrayBuffer, Uint8Array, Blob, or File
	onLoad: ({ slideCount }) => console.log(`${slideCount} slides`),
});

viewer.next();
viewer.goToSlide(3);
await viewer.enterPresentation();

容器需要设置尺寸,查看器会填满它(width/height: 100%)。完整说明请参见快速上手。

无需构建步骤 ​

组件包提供 ESM 和 CJS 构建。因为没有框架依赖,也可以在普通的 <script type="module"> 中配合 import map 或无需打包器的 CDN 配置使用,适用于现代 JavaScript 能运行的环境。构建查看器时自动注入样式,使用单个 <style id="pptx-vanilla-viewer-styles"> 标签,作用域限定在 .pptxv 根类下。严格 CSP 宿主可以通过 getViewerCss() 自行渲染样式表。

渲染方式:CSS 与 DOM ​

与此 monorepo 中所有绑定一样,幻灯片渲染为 CSS 定位的 HTML/SVG,通过 CSS transform 缩放,不绘制到 Canvas 上。文本在任意缩放下都保持可选中且清晰,屏幕阅读器也可以正常工作。相关取舍请参见已知限制。

主要导出 ​

导出项类型用途
createPptxViewer函数工厂函数,将查看器挂载到容器。参见快速上手。
PptxViewerOptions, PptxViewerCallbacks类型选项和事件回调。参见选项与回调。
PptxViewerInstance类型返回的句柄。参见查看器实例 API。
PptxViewerSource类型ArrayBuffer | Uint8Array | Blob | string(URL)。
ElementRenderer, ElementRendererRegistry类型渲染器扩展接口。参见元素渲染器。
createDefaultRegistry函数默认渲染器注册表,预先注册全部内置渲染器。
getViewerCss函数以字符串形式提供完整样式表,适用于严格 CSP 宿主。
ViewerTheme, ViewerThemeColors类型主题配置类型。参见主题。
vermilionLightTheme, vermilionDarkTheme常量内置的朱红色亮色和深色预设。
themeToCssVars, defaultCssVars函数将主题转换为 --pptx-* CSS 变量。
PptxHandler, PptxSlide, PptxElement类型为 getHandler() 高级入口重新导出的核心类型。

下一步 ​

基于 Apache-2.0 许可证发布