跳到主要内容

快速开始

1. 前期准备​

在开始集成前，请先在管理控制台配置应用信息（repoId/appId、三方应用接口地址、开启前端集成并配置密钥等），详见：前期准备。
同时建议先阅读：重要术语，确保 repoId、docId、回调地址约束等概念一致。

2. 准备必要信息​

前端集成支持两种模式：主动传参 与 被动传参。两者入口相同，区别在于“用户信息/文档元信息/下载地址/上传地址”是由你主动带入还是由中台回调获取。

2.1 主动传参模式（更灵活）​

你需要在打开在线编辑/预览页面时，在 URL 中传入：

  • userinfo：base64(JSON) 后再 encodeURIComponent
  • meta：base64(JSON) 后再 encodeURIComponent
  • downloadUrl：下载文件流的地址（不要 encodeURIComponent，也不要在该 URL 里拼 query 参数，需要传递的参数请放到 params）
  • uploadUrl：保存回传地址（编辑时必填，规则同 downloadUrl）
  • ts + HMAC：防篡改与防重放（通常有效期 10 秒，需时钟同步）

详细规则与参数表见：前端集成主动传参模式。
HMAC 生成方式见：HMAC计算（密钥请仅保存在后端，避免泄漏）。

2.2 被动传参模式（按标准回调接口实现）​

你打开页面时只需要传入 repoId/docId/action/params/ts/HMAC，中台会按标准方式回调你的系统获取四类信息：

  • 当前用户信息：GET {context}/profiles
  • 文档元信息：GET {context}/{docId}/meta
  • 获取文件流：GET {context}/{docId}/content
  • 保存文件：POST {context}/{docId}/content

你的系统需要实现这些接口，回调接口的定义参照标准接口说明：

被动模式的整体流程与参数表见：前端集成被动传参模式。

3. 打开在线编辑/预览页面​

统一入口地址为：

http(s)://{zofficehost}:8001/docs/app/driver-callback?...

iframe 示例​

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <style>
    html, body { height: 100%; margin: 0; padding: 0; }
    iframe { width: 100%; height: 100%; border: none; display: block; }
  </style>
</head>
<body>
  <iframe
    id="integration-frame"
    src="http://zofficehost:8001/docs/app/driver-callback?repoId=repoId&docId=docId&action=edit&ts=xxx&HMAC=xxx"
    allowfullscreen="true"
    allow="fullscreen *">
  </iframe>
</body>
</html>

注意：ts/HMAC 建议由业务系统后端生成后返回给前端使用，避免密钥暴露。

最后于 更新