@ betteroffice/ pptx 反应
使用幻灯片画布、幻灯片条、格式化工具栏和键盘编辑来反应演示文稿编辑器. 引擎默认在Web Worker中运行,承诺回放读取并输出.
安装
bun add @betteroffice/pptx-react react react-dom
同伴依赖性 : react 财务报告和审定财务报表 react-dom,18或19版本;PPTX核心是一个包依赖.
使用量
import { PptxEditor } from '@betteroffice/pptx-react';
export function Presentation({ file, fontBytes }: {
file: Uint8Array;
fontBytes: Uint8Array;
}) {
return (
<div style={{ height: 720 }}>
<PptxEditor file={file} fonts={[{ family: 'My Sans', bytes: fontBytes }]} />
</div>
);
}
fonts 需要时间。 每个条目是一个姓氏和一个TTF或OTF文件的字节,例如:
从您的服务器获取或装入 loadBundledFontBytes 从
@betteroffice/fonts。 。 。 .
关键选项
导出 PptxAsyncEditorProps 类型描述默认编辑器道具。 下面所有的道具都是
选项除外 fonts。 。 。 .
| 道具 | 类型 | 说明 |
|---|---|---|
file | Uint8Array | ArrayBuffer | 要打开的演示字节 . |
fonts | ReadonlyArray<PptxFontFace> | 字体家族和文字布局的字节 . |
readOnly | boolean | 屏蔽用户编辑,同时保留导航和选择. |
initialSlide | number | 最初滑行,编号从1并被夹入甲板. |
fileName | string | 下载名称; 默认为 presentation.pptx。 。 。 . |
className | string | 编辑容器的课. |
style | CSSProperties | 编辑器容器的内置样式. |
initialZoom | number | 初始缩放比例从0.1缩放到5;省略后,幻灯片适合舞台. |
loadingIndicator | ReactNode | 演示文稿打开时显示 . |
i18n | PptxAsyncEditorProps['i18n'] | UI 翻译自 @betteroffice/pptx-i18n。 。 。 . |
onReady | (api: PptxAsyncEditorApi) => void | (() => void) | 接收 Aync API; 可选择返回清理 . |
onChange | (snapshot: DeckSnapshot) => void | 更改后接收甲板快照 . |
onDocumentChange | (change: PptxDocumentChange) => void | 接收 { version } 在完成编辑后 onChange。 。 。 . |
onError | (error: Error) => void | 接收加载和编辑错误 . |
onSave | (bytes: Uint8Array) => void | 接收已保存的字节; 省略, 保存下载文件 . |
downloadOnSave | boolean | 是否保存同时下载副本;默认为 true 只有没有 onSave。 。 。 . |
onSaveRequest | () => boolean | void | Promise<boolean | void> | 截取工具栏和键盘保存; 返回 true 继续. |
toolbar | ReactNode | 替换内置控制; null 把他们带走. |
showToolbar | boolean | 显示工具栏区域;默认为 true。 。 。 . |
collaboration | PptxAsyncCollaborationOptions | 共享种子、复制回调和存在选项. |
plugins | readonly PptxPlugin[] | 主机拥有的工具,面板,并覆盖. |
pluginGrants | Readonly<Record<string, PptxPluginGrant>> | 由插件 ID 键入权限 . |
onPluginError | (error: PptxPluginError) => void | 接收孤立插件失败 . |
PptxFontFace 财务报告和审定财务报表 DeckSnapshot 导出于 @betteroffice/pptx; 编辑器和插件类型
导出者 @betteroffice/pptx-react。 。 。 . ReactNode 是反应类型.
折旧: legacySyncApi 将同步 API 保留在行进引擎上,并被去除为 6.6.0;
省略它以使用默认的 Aync 编辑器 。 还省略了被腐烂的 experimentalWorkerOpen 道具 (英语).
编辑器 API
onReady 接收 PptxAsyncEditorApi等待时 save() 将演示文稿序列化(saveAsync() 是一个
并等待着
handleAsync() 用于同步文档访问,包括 snapshot(), (中文(简体) ), exportStructured(),以及
exportMarkdown()。通过访问读取和导出对象返回承诺;API还
exportStructured() 财务报告和审定财务报表 exportMarkdown() 直接说 工作不能违背其输入或
目标拒绝方式 PptxCommandAdmissionError。 。 。 .
flushPendingInput() 等待被接受的输入. goToSlide(slide) 财务报告和审定财务报表 selectText(target) 返回时
承诺; 幻灯片数字基于1, 文本抵消使用UTF-16. getPositionAtPoint(clientX, clientY)
同步返回当前幻灯片上的命中值或 null 外部幻灯片内容.
在冲出输入的工作流程前完成指针手势. 把API绑在挂载上 演示文稿; 替换或关闭文档使其访问无效.
保存
工具栏和 Ctrl/Cmd+S 引用 onSaveRequest 在序列化之前。 正在等待结果:
true 继续保存,同时 false 或者说 void 处理或取消请求。 如果储蓄继续,
onSave 接收字节,编辑器使用 fileName 何时 downloadOnSave
实值 true (默认没有 onSave) (中文(简体) ).
通话 save() 直接返回字节,而不引用那些保存回调 .
工具栏
工具栏组成 API 是实验性. api.commands 由内置控制器共享
主机工具栏部件。 将控件替换为
toolbar,或以 showToolbar={false}。 。 。 .
见 编写 PPTX 工具栏
用于组成、外部控制、指挥状态和外溢.
折旧: 丙基 EditorToolbar 财务报告和审定财务报表 Toolbar 使用被命令模式控制所取代;
使用情况 EditorToolbar 与 mode="commands"。 。 。 .
插件
definePptxPlugin 定义已安装的工具 plugins,并获得
pluginGrants。这个插件 API 是实验性的,可能会改变小版本.
见 主机 PPTX 编辑器插件
用于面板、叠加、寿命周期、权限和错误处理.
版本已检查的编辑批次
readContent, (中文(简体) ), findText, (中文(简体) ), validateEdits,以及 applyEdits aPI 返回承诺并运行
在等待输入后。 见 在版本检查的批次中编辑 PPTX
要求、原子性和打字拒绝.
B. 审查代理人的建议
使用返回的访问 handleAsync() 调用 propose,然后等待着 refreshProposals()。 。 。 .
有待提出的提案出现在画布上,有文字差异、形状界限和发音.
审查控制预览、接受或拒绝一组;接受将产生一个倒数步骤.
逃脱或 编辑幻灯片 退出审查模式。 已承诺保存、 PNG 导出和显示模式使用 内容。 待决提案留在会场;接受的编辑保存并同步.
协作
过 collaboration 共同编辑甲板; onReplica 接收同步复制件或 null 关于清理.
设定 roomId 当切换室和种子对等者从相同的更新。 奥米 clientId 生成
每次开幕会各一个.
见 协作指南 运输设施.
浏览器集成
在浏览器中以明确高度的容器上载编辑器. 构成《公约》 服务器应该将编辑器客户端加载到服务器渲染被禁用。 见 托管 页:1 工人,块和CSP需要.