网站中用特殊字体,制作企业网站的步骤,设计公司的企业文化内容,深圳模板建站代理随着企业数字化转型加速#xff0c;安全可控的文档协作环境成为客户服务的核心需求。通过ONLYOFFICE JavaScript SDK#xff0c;开发者可为每位客户创建独立结构化协作房间。 关于 ONLYOFFICE 协作空间
ONLYOFFICE 协作空间是一个文档编辑与协作平台#xff0c;自带文档编辑…随着企业数字化转型加速安全可控的文档协作环境成为客户服务的核心需求。通过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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleClient Manager/title!-- Replace with your actual portal URL --script src{PORTAL_SRC}/static/scripts/sdk/1.0.1/api.js/scriptstyle/* Full CSS omitted for brevity *//style/headbody!-- Step 2: Client input form --div classcontainerinput typetext idclientInput placeholderEnter client namebutton idadd disabled onclickaddClient()Add Client/button/div!-- Step 3: Client list display --ul idclientList/ul!-- Step 4: SDK iframe (hidden) --iframe idds-frame styledisplay: none;/iframe!-- Step 5: JavaScript SDK Logic --scriptlet 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协作空间服务器 / 云端
