引言
在 Web 项目中嵌入 Office 文档编辑功能可以显著提升用户体验。Collabora Online 基于 LibreOffice 核心,提供开源解决方案,支持主流格式(DOCX/XLSX/PPTX 等)的实时协作编辑。以下指南详细介绍了如何部署和集成 Collabora,实现媲美 Office 365 的网页端编辑体验。
核心组件与原理
Collabora Online Development Edition (CODE)
服务端提供文档渲染与协作引擎(通过 Docker 部署),前端通过 <iframe> 嵌入编辑窗口。
WOPI 协议 定义 Web 应用与 Office 服务间的通信标准,关键操作包括文件加载、保存回调和权限控制。
部署 Collabora 服务端
环境要求 Linux 服务器(Ubuntu/CentOS)、Docker。
步骤 拉取 Collabora 镜像:
docker pull collabora/code
启动容器:
docker run -t -d -p 9980:9980 \
-e "domain=<你的 Web 域名>" \
--cap-add MKNOD \
collabora/code
注意:默认使用 HTTPS,可通过配置关闭 SSL 协议。
前端集成步骤
场景 点击网页中的 DOCX 文件后打开编辑窗口。
代码示例 构建编辑按钮:
<button onclick="openCollabora('文档 URL')">编辑 DOCX</button>
动态生成 iframe:
function openCollabora(fileUrl) {
const wopiSrc = `https://<Collabora 服务端 IP>:9980/loleaflet/dist/loleaflet.html?` +
`WOPISrc=${encodeURIComponent(fileUrl)}` +
`&access_token=${token}`;
// 此处传用户 token,或简单点直接生成个时间戳也可以
const iframe = document.createElement('iframe');
iframe.src = wopiSrc;
iframe.style = 'width:100%; height:80vh; border:none;';
..(iframe);
}

