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

如何实现任务附件管理功能：ONLYOFFICE协作空间文件选择器集成指南

news 2025/8/1 3:21:04

在现代项目管理中，任务与相关文件的关联至关重要。在处理复杂的项目时，可能每个任务都需要参考一定的文档或测试报告。传统的做法可能是将这些文件分散存放在不同位置，导致团队成员需要花费大量时间查找相关文档，严重影响工作效率。而集成 ONLYOFFICE 协作空间文件选择器，将会为您的任务管理系统添加强大的附件管理功能，提升项目协作效率。一起来了解详情吧！

什么是协作空间

ONLYOFFICE 协作空间是一个协同办公平台，能够帮助用户更好地与客户、业务合作伙伴、承包商及第三方，进行文档、表格、幻灯片、PDF 和表单的在线编辑与协作。

其开发者版就是我们开源解决方案的商业版本，主要用途是集成至您自有的商业软件和服务器。查看视频了解更多：

什么是开发者版 ONLYOFFICE 协作空间？无缝集成至您的软件和服务器

对于项目管理者来说，文档贯穿着工作流程的始终，通过集成ONLYOFFICE协作空间，可以在项目管理工具中为任务关联参考文档、在团队协作平台中共享工作文件，这一功能适用于任何将特定文件与数据记录关联的业务系统。

接下来让我们一起学习详细教程！

技术准备

在开始前，请确保使用服务器环境运行 HTML 文件，因为 JavaScript SDK 必须在服务器上启动。您需要将服务器根目录的 URL 添加到协作空间的 “开发者工具”部分。

步骤详解

1. 选择并高亮任务

const taskRows = document.querySelectorAll('.task-row')let selectedTask = null

定义任务行元素
记录当前选中的任务

点击任务行时，会高亮当前任务并加载对应的附件：

for (const row of taskRows) {row.addEventListener('click', ((loadAttachments) => {return () => {if (selectedTask) selectedTask.classList.remove('selected')selectedTask = rowrow.classList.add('selected')loadAttachments(row)}})(loadAttachments))}

为每个任务行添加点击事件监听器
高亮选中任务行
如果任务已有附件，则加载附件列表

2. 使用 SDK 打开模态窗口

const modalElement = document.getElementById('modal')const attachButton = document.getElementById('attachButton')attachButton.addEventListener('click', () => {if (selectedTask) {modalElement.showModal()}})

打开文件选择器的模态窗口
仅当已选中任务时才响应操作

3. 处理文件选择事件

function onSelectCallback(e) {modalElement.close(JSON.stringify({id: e.id,title: e.title}))}

关闭模态窗口
将所选文件的 ID 和标题存入 returnValue 返回值中

4. 渲染并管理任务附件

modalElement.addEventListener('close', () => {const result = modalElement.returnValueif (result && selectedTask) {const { id, title } = JSON.parse(result)const listItem = document.createElement('li')listItem.className = 'attachment-item'const link = document.createElement('a')link.href = dsURL + idlink.target = '_blank'link.textContent = titlelistItem.append(link)const deleteButton = document.createElement('button')deleteButton.className = 'delete-button'deleteButton.textContent = 'Delete'deleteButton.addEventListener('click', () => {listItem.remove()selectedTask.attachments = selectedTask.attachments.filter(i => i !== listItem)})listItem.append(deleteButton)selectedTask.attachments ||= []selectedTask.attachments.push(listItem)document.getElementById('attachmentsList').append(listItem)}})

解析 returnValue 中的文件元数据
若此前无附件，移除“无附件”占位符
创建“删除”按钮，支持用户移除已附加文件
将附件显示在列表，并写入任务的附件记录中

5. 初始化 SDK

function onAppReady() {const frame = DocSpace.SDK.frames['ds-frame']}const config = {events: {onSelectCallback,onAppReady},height: '700px',width: '100%'}DocSpace.SDK.initFileSelector(config)

配置并初始化文件选择器
绑定用户交互所需的事件回调函数

附件管理看似是小功能，却能显著影响团队协作效率。希望本指南能帮助您在项目中实现高效的任务附件管理。

立刻尝试任务附件管理功能

您可以访问我们的官方网站试用开发者版本的 ONLYOFFICE 协作空间，打造个性化的团队协作平台：

下载 ONLYOFFICE 服务器解决方案，并以您的品牌提供给您的客户 | ONLYOFFICEhttps://www.onlyoffice.com/zh/download-developer.aspx#docspace-developer