当前位置：首页 > news >正文

ONLYOFFICE协作空间API指南：使用JavaScript SDK为每个用户结构化协作房间

news 来源：原创 2025/6/14 13:55:20

随着企业数字化转型加速，安全可控的文档协作环境成为客户服务的核心需求。通过ONLYOFFICE JavaScript SDK，开发者可为每位客户创建独立结构化协作房间。

关于 ONLYOFFICE 协作空间

ONLYOFFICE 协作空间是一个文档编辑与协作平台，自带文档编辑器，提供一整套用于文档储存、共享和协作的工具。可以高效地与同事、客户、业务合作伙伴、承包商及第三方进行文档协作。

关于房间类型

协作空间可设置灵活的访问权限，通过创建房间、邀请他人加入、协作和沟通完成工作，支持以下房间类型：

公共房间：无需注册即可共享文档以供查看、编辑、评论或审阅。还可以将此房间嵌入到任何网页界面中。
表单填写房间：将 PDF 表单上传至房间。邀请成员和访客填写 PDF 表单。查看已完成的表单并分析电子表格中自动收集的数据。
协作房间：与团队就一个或多个文档进行协作
虚拟数据房间：在逐步填写和签署文档时实现高级文件安全性和透明度。设置水印，自动索引并跟踪所有内容，限制下载和复制操作。
自定义房间：根据不同目的和用途对房间进行自定义设置
根据模板创建房间：使用模板创建房间，将套用房间模板中的所有设置、文件夹和文件。

对于企业来说，保证安全且高效的办公协作至关重要。因此，许多企业会选择本地部署或将 ONLYOFFICE 协作空间进行商业开发，集成到更多的平台或系统中。

关于 ONLYOFFICE JavaScript SDK

ONLYOFFICE JavaScript SDK 是一套用于在网页应用中集成文档编辑功能的开发工具包，允许开发者通过 JavaScript 与 ONLYOFFICE 文档编辑器进行深度交互。

如何使用JavaScript SDK为每个客户创建结构化房间

此示例演示了如何使用协作空间 JavaScript SDK 为每个新客户端创建结构化工作区。当用户添加客户端时，系统：

创建具有 clients 名称的共享房间
在该房间内自动生成一组预定义文件夹
将特定文档模板（DOCX、XLSX、PDF）插入到相应的文件夹中

这允许客户快速加入标准化的工作空间环境。

准备工作

请确保您使用服务器环境运行 HTML 文件，因为 JavaScript SDK 必须在服务器上启动。
您需要将服务器根目录的 URL 添加到 DocSpace 的 Developer Tools 部分。

脚本执行步骤

1. 定义模板并初始化 SDK

const templates = {instructions: "{PUBLIC_DOCX_ID}",priceList: "{PUBLIC_XLSX_ID}",contract: "{PUBLIC_PDF_ID}"
};function onAppReady() {document.getElementById("add").removeAttribute("disabled")document.getElementById("ds-frame").style.display = "none"
}docSpace = DocSpace.SDK.initManager({frameId: "ds-frame",events: { onAppReady }
});

模板 ID 指向用作基本模板的公共 DocSpace 文档
SDK 已初始化并隐藏（）并在准备就绪后激活 UI iframe

2. 添加客户端并创建具有文件夹结构的房间

async function addClient() {const input = document.getElementById("clientInput")const clientName = input.value.trim()if (!clientName) returnconst list = document.getElementById("clientList")const li = document.createElement("li")li.textContent = clientNamelist.appendChild(li)const room = await docSpace.createRoom(clientName, 2)if (room.status && room.status !== 200) {alert(`Failed to create room: ${room.status}`)return}input.value = ""const roomId = room.id// Create folder: Instructionsconst instructionsFolder = await docSpace.createFolder(roomId, "Instructions")if (instructionsFolder.status && instructionsFolder.status !== 200) {alert("Failed to create 'Instructions' folder")return}const docxFile = await docSpace.createFile(instructionsFolder.id,"Instructions.docx",templates.instructions)if (docxFile.status && docxFile.status !== 200) {alert("Failed to insert Instructions.docx")return}// Create folder: Price Listconst priceListFolder = await docSpace.createFolder(roomId, "Price List")if (priceListFolder.status && priceListFolder.status !== 200) {alert("Failed to create 'Price List' folder")return}const xlsxFile = await docSpace.createFile(priceListFolder.id,"Price List.xlsx",templates.priceList)if (xlsxFile.status && xlsxFile.status !== 200) {alert("Failed to insert Price List.xlsx")return}// Create folder: Contractsconst contractsFolder = await docSpace.createFolder(roomId, "Contracts")if (contractsFolder.status && contractsFolder.status !== 200) {alert("Failed to create 'Contracts' folder")return}const pdfFile = await docSpace.createFile(contractsFolder.id,"Contract template.pdf",templates.contract)if (pdfFile.status && pdfFile.status !== 200) {alert("Failed to insert Contract template.pdf")return}// Create folder: Invoices for payment (no files)const invoicesFolder = await docSpace.createFolder(roomId, "Invoices for payment")if (invoicesFolder.status && invoicesFolder.status !== 200) {alert("Failed to create 'Invoices for payment' folder")return}
}

为客户创建共享聊天室
添加四个文件夹
更新界面中的客户端列表

3. 处理 Enter key 提交

document.getElementById("clientInput").addEventListener("keypress", function (e) {if (e.key === "Enter") {addClient()}
});

允许用户按 Enter 键触发房间和文件夹的创建

完整示例

<!-- Step 1: HTML Setup -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Client Manager</title><!-- Replace with your actual portal URL --><script src="{PORTAL_SRC}/static/scripts/sdk/1.0.1/api.js"></script><style>/* Full CSS omitted for brevity */</style></head><body><!-- Step 2: Client input form --><div class="container"><input type="text" id="clientInput" placeholder="Enter client name"><button id="add" disabled onclick="addClient()">Add Client</button></div><!-- Step 3: Client list display --><ul id="clientList"></ul><!-- Step 4: SDK iframe (hidden) --><iframe id="ds-frame" style="display: none;"></iframe><!-- Step 5: JavaScript SDK Logic --><script>let docSpace;// Step 5: Template file IDs (replace with real ones)const templates = {instructions: "{PUBLIC_DOCX_ID}",priceList: "{PUBLIC_XLSX_ID}",contract: "{PUBLIC_PDF_ID}"};// Step 6: Enable Add Client button when SDK is readyfunction onAppReady() {document.getElementById("add").removeAttribute("disabled")document.getElementById("ds-frame").style.display = "none"}// Step 7: Init DocSpace SDKdocSpace = DocSpace.SDK.initManager({frameId: "ds-frame",events: { onAppReady }})// Step 8: Add client and create room with folder structureasync function addClient() {const input = document.getElementById("clientInput")const clientName = input.value.trim()if (!clientName) returnconst list = document.getElementById("clientList")const li = document.createElement("li")li.textContent = clientNamelist.appendChild(li)const room = await docSpace.createRoom(clientName, 2)if (room.status && room.status !== 200) {alert(`Failed to create room: ${room.status}`)return}input.value = ""const roomId = room.id// Create folder: Instructionsconst instructionsFolder = await docSpace.createFolder(roomId, "Instructions")if (instructionsFolder.status && instructionsFolder.status !== 200) {alert("Failed to create 'Instructions' folder")return}const docxFile = await docSpace.createFile(instructionsFolder.id,"Instructions.docx",templates.instructions)if (docxFile.status && docxFile.status !== 200) {alert("Failed to insert Instructions.docx")return}// Create folder: Price Listconst priceListFolder = await docSpace.createFolder(roomId, "Price List")if (priceListFolder.status && priceListFolder.status !== 200) {alert("Failed to create 'Price List' folder")return}const xlsxFile = await docSpace.createFile(priceListFolder.id,"Price List.xlsx",templates.priceList)if (xlsxFile.status && xlsxFile.status !== 200) {alert("Failed to insert Price List.xlsx")return}// Create folder: Contractsconst contractsFolder = await docSpace.createFolder(roomId, "Contracts")if (contractsFolder.status && contractsFolder.status !== 200) {alert("Failed to create 'Contracts' folder")return}const pdfFile = await docSpace.createFile(contractsFolder.id,"Contract template.pdf",templates.contract)if (pdfFile.status && pdfFile.status !== 200) {alert("Failed to insert Contract template.pdf")return}// Create folder: Invoices for payment (no files)const invoicesFolder = await docSpace.createFolder(roomId, "Invoices for payment")if (invoicesFolder.status && invoicesFolder.status !== 200) {alert("Failed to create 'Invoices for payment' folder")return}}// Step 9: Submit on Enterdocument.getElementById("clientInput").addEventListener("keypress", function (e) {if (e.key === "Enter") {addClient()}});</script></body>
</html>

希望以上示例对您有帮助，欢迎尝试用 ONLYOFFICE JavaScript SDK，为构建客户中心化协作生态提供了强大基石。