厂字型布局网站例子加快实施创新驱动发展战略
随着企业数字化转型加速，安全可控的文档协作环境成为客户服务的核心需求。通过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，为构建客户中心化协作生态提供了强大基石。
相关链接
API 文档
获取ONLYOFFICE协作空间：服务器 / 云端