基于 Collabora 的 Web 端 Office 文档在线编辑集成指南

引言

在 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);
}