# online-view **Repository Path**: hhs_3/online-view ## Basic Information - **Project Name**: online-view - **Description**: 基于 Collabora CODE 的在线文档编辑和预览服务，支持多种文件源，采用前后端分离架构——Spring Boot + VUE。 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2026-03-24 - **Last Updated**: 2026-03-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: 在线文档编辑, SpringBoot, CollaboraCODE, minio ## README # 在线文档编辑服务 基于 Collabora CODE 的在线文档编辑和预览服务，支持多种文件源，支持多人同时在线编辑，采用前后端分离架构。 > ⚠️ **重要提示：本项目仅供学习和开发测试使用，不建议直接用于生产环境！** > > Collabora CODE (Collabora Online Development Edition) 是开源版本，官方明确声明**不推荐用于生产环境部署**。详见 [Collabora 官方说明](https://www.collaboraonline.com/code/)。 ## 生产环境部署路径 如需将本项目部署到生产环境，请选择以下方案之一： | 方案 | 说明 | 适用场景 | 成本 | |------|------|----------|------| | **Collabora Online** | Collabora 官方商业版，提供企业级支持 | 企业生产环境 | 💰 付费 | | **Nextcloud Office** | 基于 Collabora 的完整云办公套件 | 已有/计划使用 Nextcloud | 免费/付费 | | **OnlyOffice** | 开源办公套件，支持自部署 | 需要完全开源方案 | 免费 | | **永中Office** | 国产办公软件，支持在线协作 | 国产化需求 | 💰 付费 | | **金山文档/WPS** | 国内主流在线办公方案 | 国内企业 | 💰 付费 | ### 商业版获取方式 1. **Collabora Online** - [官方网站](https://www.collaboraonline.com/) - 提供技术支持和 SLA 保障 - 更好的性能和稳定性 - 企业级安全特性 2. **云服务集成** - 如果你使用云平台，可考虑： - [阿里云 云电脑](https://www.aliyun.com/product/ecs/gws) - [腾讯云 在线文档](https://cloud.tencent.com/product/tcd) ## 运行效果 ### 文件列表 ![文件列表](./doc/images/文件列表.png) ### 在线预览 ![在线预览](./doc/images/预览.png) ### 在线编辑 ![在线编辑](./doc/images/编辑.png) ## 功能特性 - 📝 **多格式支持**：Word、Excel、PPT、PDF、ODF 等 - 📁 **多文件源**：本地文件、MinIO 对象存储 - ✏️ **在线编辑**：基于 Collabora CODE 的实时协作编辑 - 👁️ **在线预览**：独立的预览功能，只读查看文档 - 📤 **文件管理**：上传、下载、删除、新建文件夹 - 🌳 **目录导航**：左侧目录树 + 右侧文件列表 - 📊 **分页加载**：无限滚动，自动加载更多 - 📈 **上传进度**：实时显示上传进度 ## 技术栈 | 组件 | 技术 | 版本 | |------|------|--------| | 后端 | Spring Boot | 3.4.0 | | 运行时 | Java | 17 | | 前端 | Vue 3 + Vite | 3.4.x | | UI组件 | Element Plus | 2.6.x | | 文档引擎 | Collabora CODE | 24.04 | | 对象存储 | MinIO | Latest | ## 系统架构 ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ 用户浏览器 │ │ http://192.168.30.64:3000 │ └─────────────────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────────────────┐ │ 前端 (Vue 3 + Vite) │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────────┐ │ │ │ 目录树 │ │ 文件列表 │ │ 在线编辑器 │ │ 上传/下载 │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────────┘ │ └─────────────────────────────────────────────────────────────────────────────┘ │ REST API ▼ ┌─────────────────────────────────────────────────────────────────────────────┐ │ 后端 (Spring Boot 8080) │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────────┐ │ │ │ FileController│ │WopiController│ │ FileService │ │ CollaboraService│ │ │ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────────┘ │ │ │ │ │ ┌─────────────────┴─────────────────┐ │ │ ▼ ▼ │ │ ┌──────────┐ ┌──────────┐ │ │ │LocalAdapter│ │MinioAdapter│ │ │ └──────────┘ └──────────┘ │ └─────────────────────────────────────────────────────────────────────────────┘ │ │ ┌─────────────┘ │ ▼ ▼ ┌───────────────┐ ┌───────────────┐ │ 本地磁盘 │ │ MinIO │ │ ./uploads │ │ 对象存储 │ └───────────────┘ └───────────────┘ │ │ WOPI Protocol ▼ ┌───────────────────────────────┐ │ Collabora CODE Server │ │ http://192.168.51.10:9980 │ │ │ │ 文档渲染 + 编辑 + 转换 │ └───────────────────────────────┘ ``` ## 快速开始 ### 1. 部署 Collabora CODE 详见 [Collabora CODE 部署文档](./doc/Collabora%20CODE部署文档.md) ```bash # 快速启动（开发环境） docker run -t -p 9980:9980 \ -e "domain=localhost" \ -e "extra_params=--o:ssl.enable=false --o:ssl.termination=false --o:net.frame_ancestors=http://localhost:*" \ --restart always \ --name collabora_code \ collabora/code:latest ``` ### 2. 启动 MinIO（可选） ```bash docker run -p 9000:9000 -p 9001:9001 \ -e "MINIO_ROOT_USER=username" \ -e "MINIO_ROOT_PASSWORD=password" \ -v /data/minio:/data \ --restart always \ --name minio \ minio/minio server /data --console-address ":9001" ``` ### 3. 启动后端 ```bash cd backend # 编译 ./mvnw clean package -DskipTests # 运行 java -jar target/online-view-1.0.0-SNAPSHOT.jar # 或使用 Maven ./mvnw spring-boot:run ``` ### 4. 启动前端 ```bash cd frontend # 安装依赖 npm install # 开发模式 npm run dev # 生产构建 npm run build ``` ### 5. 访问应用 这里要使用部署IP访问前端、不然会前端打开Collabora文档会报：Content Security Policy (CSP) 内嵌页被拦截问题 - 前端地址：http://部署IP:3000 - 后端 API：http://localhost:8080/api/files/sources - Collabora：http://localhost:9980/hosting/discovery ## 配置说明 ### 后端配置 (application.yml) ```yaml server: port: 8080 # Collabora CODE 配置 collabora: url: http://192.168.51.10:9980 # Collabora 服务地址 host: 192.168.30.64:8080 # 后端服务地址（Collabora 回调用） # MinIO 配置 minio: endpoint: http://192.168.51.100:9002 access-key: username secret-key: password bucket: online # 文件存储配置 file: source-type: MINIO # 默认文件源: LOCAL, MINIO local: base-path: ./uploads ``` ### 前端配置 (vite.config.js) ```javascript export default defineConfig({ server: { host: '0.0.0.0', // 允许局域网访问 port: 3000, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true }, '/wopi': { target: 'http://localhost:8080', changeOrigin: true } } } }) ``` ## API 接口 ### 文件管理 API | 接口 | 方法 | 说明 | |------|------|------| | `/api/files/sources` | GET | 获取文件源配置 | | `/api/files/list` | GET | 获取文件列表（目录树用） | | `/api/files/list-paged` | GET | 分页获取文件列表 | | `/api/files/{fileId}` | GET | 获取文件信息 | | `/api/files/{fileId}/download` | GET | 下载文件 | | `/api/files/upload` | POST | 上传文件 | | `/api/files/{fileId}` | DELETE | 删除文件 | | `/api/files/directory` | POST | 创建目录 | | `/api/files/{fileId}/editor-url` | GET | 获取编辑器 URL | | `/api/files/{fileId}/preview-url` | GET | 获取预览器 URL | ### WOPI 协议 API | 接口 | 方法 | 说明 | |------|------|------| | `/wopi/files/{fileId}` | GET | CheckFileInfo | | `/wopi/files/{fileId}/contents` | GET | GetFile | | `/wopi/files/{fileId}/contents` | POST | PutFile | ## 支持的文档格式 | 格式 | 类型 | 查看 | 编辑 | |------|------|:----:|:----:| | .docx | Word 2007+ | ✅ | ✅ | | .doc | Word 97-2003 | ✅ | ✅ | | .xlsx | Excel 2007+ | ✅ | ✅ | | .xls | Excel 97-2003 | ✅ | ✅ | | .pptx | PowerPoint 2007+ | ✅ | ✅ | | .ppt | PowerPoint 97-2003 | ✅ | ✅ | | .odt | OpenDocument Text | ✅ | ✅ | | .ods | OpenDocument Spreadsheet | ✅ | ✅ | | .odp | OpenDocument Presentation | ✅ | ✅ | | .pdf | PDF | ✅ | ❌ | | .txt | Plain Text | ✅ | ✅ | | .csv | CSV | ✅ | ✅ | | .rtf | Rich Text | ✅ | ✅ | ## 并发性能参考 ### Collabora CODE 并发限制（4核8G 配置） | 使用场景 | 并发用户数 | 说明 | |----------|------------|------| | 轻度编辑（简单文档） | 15-20 | 普通办公文档，少量格式 | | 中度编辑（复杂文档） | 10-15 | 含图片、表格的文档 | | 重度编辑（大型文档） | 5-10 | 大型报告、PPT演示 | ### 性能优化建议 1. **增加内存**：每增加 2G 内存约可支持 5-10 个额外并发 2. **增加 CPU**：复杂文档编辑对 CPU 要求较高 3. **独立部署**：生产环境建议 Collabora 独立服务器部署 4. **负载均衡**：高并发场景可部署多个 Collabora 实例 ### 推荐配置 | 并发用户 | CPU | 内存 | 磁盘 | |----------|-----|------|------| | 1-10 | 2核 | 4G | 20G | | 10-30 | 4核 | 8G | 50G | | 30-50 | 8核 | 16G | 100G | | 50+ | 16核 | 32G+ | 200G+ | ## 目录结构 ``` online-view/ ├── backend/ # 后端项目 │ ├── src/main/java/com/ktwl/onlineview/ │ │ ├── adapter/ # 文件源适配器 │ │ │ ├── FileSourceAdapter.java # 适配器接口 │ │ │ ├── LocalFileAdapter.java # 本地文件 │ │ │ └── MinioAdapter.java # MinIO 存储 │ │ ├── config/ # 配置类 │ │ ├── controller/ # 控制器 │ │ │ ├── FileController.java # 文件管理 │ │ │ └── WopiController.java # WOPI 协议 │ │ ├── model/ # 数据模型 │ │ ├── service/ # 服务层 │ │ └── util/ # 工具类 │ ├── src/main/resources/ │ │ └── application.yml │ └── pom.xml ├── frontend/ # 前端项目 │ ├── src/ │ │ ├── api/index.js # API 封装 │ │ ├── router/index.js # 路由配置 │ │ ├── views/ │ │ │ ├── Home.vue # 文件浏览 │ │ │ └── Editor.vue # 在线编辑 │ │ ├── App.vue │ │ └── main.js │ ├── package.json │ └── vite.config.js ├── doc/ # 文档目录 │ ├── Collabora CODE部署文档.md │ ├── MinIO部署文档.md │ └── 数据流向说明.md └── README.md ``` ## 相关文档 - [Collabora CODE 部署文档](./doc/Collabora%20CODE部署文档.md) - 详细的部署步骤和配置说明 - [MinIO 部署文档](./doc/MinIO部署文档.md) - 对象存储服务部署指南 - [数据流向说明](./doc/数据流向说明.md) - 文件编辑的数据获取与保存流程 ## 常见问题 ### Q: iframe 嵌入报 CSP 错误？ 配置 `frame_ancestors` 参数： ```bash -e "extra_params=--o:ssl.enable=false --o:ssl.termination=false --o:net.frame_ancestors=http://your-ip:*" ``` ### Q: localhost 可访问但 IP 不行？ 在 `domain` 和 `frame_ancestors` 中添加 IP 地址。 ### Q: 文件保存失败？ 检查 Collabora 服务器能否访问后端 WOPI 接口： ```bash curl http://后端IP:8080/wopi/files/test ``` ## License [MIT License](./LICENSE) Copyright (c) 2024 胡汉三 --- **免责声明**：本项目仅作为技术演示和学习参考，作者不对使用本项目造成的任何损失负责。生产环境请使用官方支持的商业版本。