OnlyOffice Web Comp

概览

GitHub

OnlyOffice Web Comp 是一个基于 OnlyOffice v9 静态 SDK 构建的浏览器端文档处理方案。它封装了文档的查看、编辑与转换功能，所有操作均在用户设备本地完成，不需要部署 OnlyOffice Document Server 或其他后端服务。 该项目目前并非可直接安装的 npm 包，而是一个浏览器端的 OnlyOffice 集成模板。仓库包含两部分：位于 `src/components/onlyoffice-web-comp/` 的可复用 Web 编辑器封装组件及 Markdown 文档，以及基于 Next.js 15 和 React 19 构建的演示站点。 **主要能力** - **本地处理**：文档数据保留在浏览器中，不上传至服务器。 - **格式支持**：支持 Word、Excel、PowerPoint、CSV、DOCM 等格式的查看、编辑与转换。格式转换依赖 x2t 与 WebAssembly 实现。 - **工程化 API**：提供只读/编辑模式切换、主题配置、语言设置以及多实例隔离能力。 - **Connector 支持**：可通过 Developer Edition Connector 从父页面调用编辑器的 Automation API，兼容本地与跨域 CDN 模式。 **集成方式** 集成时需要将组件目录复制到应用源码中，并将 `public/packages/onlyoffice/` 下的静态资源复制到应用的对应目录。通过创建 `OnlyOfficeManager` 实例，调用 `openDocument`、`downloadExport`、`toggleReadOnly` 等方法控制编辑器生命周期。静态资源可托管在本地，也可部署到 Cloudflare Pages 等 CDN 并通过 `registerStaticResource` 配置 `cdnOrigin`。 **适合谁** 适合希望在自己的 Web 应用中嵌入 OnlyOffice 文档编辑能力，但不想运行或维护 OnlyOffice Document Server 后端的开发者。项目提供了单实例和多实例 Tab 的在线演示及完整源码供参考。自定义字体可通过 `__custom_font_registry__` 注册。项目使用 TypeScript 编写，采用 AGPL-3.0 协议开源。

Q&A

这个项目是 npm 包吗？可以直接安装使用吗？由 AI 生成

目前还不是可以通过一行命令安装的 npm 包。它是一个浏览器端的 OnlyOffice 集成模板，需要将组件目录和静态资源手动复制到你的项目源码中进行集成。

使用这个组件需要部署 OnlyOffice Document Server 吗？由 AI 生成

不需要。该组件基于 OnlyOffice 静态 SDK 构建，所有文档处理都在浏览器客户端完成，只需托管静态 SDK 资源即可。

如何将 OnlyOffice SDK 的静态资源部署到 CDN？由 AI 生成

可以将 public/packages 目录的内容部署到 Cloudflare Pages，然后在代码中通过 OnlyOfficeManager.registerStaticResource 方法配置 cdnOrigin 为对应的 Pages URL。

支持哪些文档格式？由 AI 生成

支持 Word、Excel、PowerPoint、CSV、DOCM 等格式。具体支持的格式列表可参考组件文档中的注意事项与支持格式说明。

如何添加自定义字体？由 AI 生成

使用 ttf-to-catalog-font.mjs 脚本生成 OnlyOffice 目录格式的字体文件，然后在 AllFonts.js 中通过 window["__custom_font_registry__"] 注册字体 ID 和别名。

项目使用的技术栈是什么？由 AI 生成

核心编辑能力基于 OnlyOffice SDK，格式转换使用 x2t 与 WebAssembly，演示站点使用 Next.js 15 和 React 19 构建，开发语言为 TypeScript。