基于 OnlyOffice 静态 SDK 的浏览器端文档处理方案,网页端完成 Word、Excel、PowerPoint 的查看、编辑与转换,无需后端

❝
OnlyOffice Web Comp 是一套基于 OnlyOffice v9 静态 SDK 的浏览器端文档处理方案，在客户端完成 Word / Excel / PowerPoint 的查看、编辑与转换，无需 Document Server。

要点

零后端依赖：文档处理完全在用户设备浏览器内执行，只需托管静态 SDK 资源即可，无需运行 Document Server；
格式支持广泛：覆盖 Word、Excel、PowerPoint、CSV、DOCM 等主流办公文档格式；
格式转换：内置 x2t + WebAssembly，支持文档格式互相转换；
工程化 API：提供 OnlyOfficeManager 统一管理编辑器生命周期，支持读写/只读切换、主题、语言设置、多实例隔离、 EventBus 事件系统；
Connector 支持：开发者版 Connector 允许父页面调用编辑器 Automation API，兼容本地和跨域 CDN 模式；
自定义字体：通过 __custom_font_registry__ 和配套脚本注册自定义字体，生成 OnlyOffice 目录格式文件；
非 npm 包形态：当前并非一键安装的 npm 包，而是集成模板——需要手动将组件代码和静态资源复制到自己的项目中；
演示站点即源码：在线 Demo 与组件库在同一仓库中，可直接参考工作集成代码而非零散代码片段；
SDK 资源可分离部署：OnlyOffice SDK 静态资源支持独立部署到 Cloudflare Pages CDN，与主应用解耦。

部署与使用说明

环境依赖：需要 Node.js 环境，使用 pnpm 作为包管理器。项目基于 Next.js 15 + React 19 构建演示应用。

本地运行：

git clone <repository-url>cd onlyoffice-web-comppnpm installpnpm dev# 访问 http://localhost:3001

启动后主要路由包括：/（产品落地页）、/docs（组件文档）、/docs/demos/single（单实例编辑器演示）、/docs/demos/multi（多实例 Tab 演示）。

生产部署：执行 pnpm build 后部署到 Vercel 或任意静态托管平台。若需将 SDK 资源分离到 CDN，可将 public/packages 目录上传至 Cloudflare Pages，再通过 OnlyOfficeManager.registerStaticResource({ cdnOrigin: "..." }) 指定 CDN 地址。

集成到自有项目：

将 src/components/onlyoffice-web-comp/ 复制到项目中
将 public/packages/onlyoffice/ 复制到项目的 public/packages/onlyoffice/
参考 src/features/demo/office-preview-page.tsx 构建 UI：创建编辑器容器、维护 OnlyOfficeManager 实例、调用 openDocument / downloadExport / toggleReadOnly 等方法，组件卸载时销毁管理器

项目由 electroluxcode (Electrolux) 开发，采用 AGPL-3.0 协议，当前 440 Stars。

❝
项目地址：electroluxcode/onlyoffice-web-comp