高保真渲染
支持 187 种以上预设形状、23 种图表、SmartArt、动画、平滑切换、嵌入字体、EMF 和 WMF 图元文件以及 3D 模型，均通过 HTML、CSS 和 SVG 绘制。文字仍可选中，也能被屏幕阅读器读取。
了解渲染机制 →跳转到内容完整指南: React →
在线演示
现在就试一试
这里嵌入的是在浏览器中真实运行的编辑器演示，使用的正是 npm 上发布的组件。切换框架体验不同版本，或开启分屏，观察两个独立应用如何共同编辑一份演示文稿。
功能亮点
从预览到编辑，一应俱全
所见即所得编辑
通过功能区、属性面板和画布直接编辑文字、形状、表格、图表及 SmartArt，并支持完整的撤销历史。母版和版式中的元素也可以编辑。
了解编辑功能 →编辑后保存为 PPTX
加载后得到涵盖 16 种元素的完整类型化数据模型。保存时生成有效的 OpenXML，保留主题、母版、版式及 OOXML Strict 格式支持，让编辑后的文件可在 PowerPoint 中重新打开。
加载与保存 →实时协作
基于 Yjs CRDT 共同编辑，支持在线状态、字符级文本合并和点对点传输。信令连接由 y-webrtc 提供。
了解协作功能 →多格式导出
直接在浏览器中导出 PNG、JPEG、SVG、PDF、GIF 和视频。SVG 还可在 Node.js 中导出，无需浏览器或 DOM。
了解导出功能 →文件加密
支持使用 AES-128 和 AES-256 敏捷加密打开和保存受密码保护的文件。
了解加密功能 →生成与转换
通过链式构建 API 编程生成演示文稿，或将文件转换为清晰的 Markdown 和保留元素位置的 HTML，同时提取媒体资源和演讲者备注。
构建器 API →国际化
界面文案通过 1,600 多个 pptx.* 翻译键提供，可接入应用现有的国际化库，如 react-i18next、vue-i18n 或 ngx-translate。
了解国际化支持 →自动化
让智能体也能编辑 .pptx
pptx-viewer-mcp 通过模型上下文协议提供 73 个带有 Zod 数据结构定义的 PPTX 工具，让 Claude、Cursor 和 Copilot 直接读取、编辑和转换演示文稿。这些函数也能在 Node、Bun 或无服务器环境中独立运行，命令行工具则适合处理单次转换。
MCP 与工具 →{
"mcpServers": {
"pptx": {
"command": "npx",
"args": ["pptx-viewer-mcp"]
}
}
}import { PptxHandler } from 'pptx-viewer-core';
const handler = new PptxHandler();
const deck = await handler.load(pptxArrayBuffer);
// Every element is a typed, discriminated union
for (const el of deck.slides[0].elements) {
if (el.type === 'text') {
// Edit runs so bold, font, links, and paragraph breaks survive.
el.textSegments = el.textSegments?.map((run) => ({
...run,
text: run.isParagraphBreak ? run.text : rebrand(run.text),
}));
el.text = rebrand(el.text);
}
}
// Serialize straight back to a valid .pptx
const file = await handler.save(deck.slides);快速开始
几行代码，即可呈现幻灯片
安装对应框架的组件包，传入 .pptx 文件的字节数据，并设置容器高度。通过组件属性即可启用编辑、放映、协作和导出。
import { PowerPointViewer } from 'pptx-react-viewer';
import { useEffect, useState } from 'react';
import 'pptx-react-viewer/styles';
export function Deck() {
const [content, setContent] = useState<Uint8Array | null>(null);
useEffect(() => {
fetch('/deck.pptx')
.then((r) => r.arrayBuffer())
.then((buf) => setContent(new Uint8Array(buf)));
}, []);
if (!content) return <div>Loading...</div>;
return (
<div style={{ height: '100vh' }}>
<PowerPointViewer content={content} canEdit />
</div>
);
}常见问题
你可能想了解这些
可以免费用于商业项目吗？+
可以。核心引擎、五个框架组件包、MCP 服务器和演示应用均采用 Apache-2.0 许可证，没有付费版本。
编辑后的文件能在 PowerPoint 中重新打开吗？+
可以。保存时会生成有效的 OpenXML，保留主题、母版、版式及 OOXML Strict 格式支持，加载、编辑并保存后的演示文稿可以在 PowerPoint 中重新打开。
需要部署服务器吗？+
解析、渲染、编辑和保存都在浏览器中完成，无需服务器。核心引擎也能在 Node.js 和 Bun 中运行，用于服务端或命令行任务。
幻灯片是如何渲染的？+
使用实时的 HTML、CSS 和 SVG 渲染。文字可以选中，缩放后依然清晰，并支持屏幕阅读器。
实时协作需要额外的基础设施吗？+
内置的点对点传输依赖 y-webrtc 信令服务。如果需要持久化存储、身份验证或受控网络连接，可以接入 y-websocket 中继等协作服务。 了解协作功能 →
能打开受密码保护的文件吗？+
可以。打开和保存文件均支持 AES-128 和 AES-256 敏捷加密。
支持哪些框架？+
支持 React 18/19、Vue 3、Angular、Svelte 5，以及无需框架的原生 JavaScript 版本。各版本共享核心引擎和与框架无关的渲染逻辑，并提供各自的视图层。
有哪些功能限制？+
可以替换 OLE 内容，也能编辑受支持的嵌入表格、文档和嵌套演示文稿标题。部分视觉效果采用近似呈现，具体支持范围请查看功能限制文档。 功能限制 →
开始使用
从打开 .pptx，到保存 .pptx
只需一个依赖，就能为应用加入 PowerPoint 支持。采用 Apache-2.0 许可证、严格的 TypeScript 类型检查，无需原生依赖。先用自己的演示文稿体验演示，再按快速开始指南完成接入。
© 2026 Christopher van Rooyen · Apache-2.0pptx-viewer · 面向 Web 的 PowerPoint 引擎