如何使用 Univer 实现工作表或范围保护

m0_61385531

已于 2025-01-13 19:55:29 修改

阅读量848

点赞数 13

分类专栏： Univer Go 文章标签：前端 excel javascript 后端编辑器 java python

于 2025-01-13 19:52:30 首次发布

本文链接：https://blog.youkuaiyun.com/m0_61385531/article/details/145122108

版权

Univer Go 专栏收录该内容

6 篇文章

订阅专栏

背景

在多人协作编辑表格的场景中，经常需要对某些工作表或特定范围进行保护，以防止数据被意外修改。例如，在财务报表中，管理员可能希望锁定公式区域或只允许特定用户对某些范围进行编辑。针对这一需求，Univer 提供了强大的权限管理模块，可以轻松实现工作表或范围的保护功能。

Univer 是一个前后端同构的全栈开发框架，可以在 web 端和服务端创建、编辑电子表格、文档以及幻灯片。

官网链接：Univer Go

Univer Github ：https://github.com/dream-num/univer

方案

Univer 的权限模块支持对工作簿、工作表以及特定单元格范围进行权限控制。通过简单的 API 调用，开发者可以灵活设置不同层级的权限，包括只读、完全限制编辑或自定义权限规则。

以下将通过两个场景来详细说明如何使用 Univer 实现工作表和范围的保护功能。

参考 Univer 官方文档-权限控制

实现

1. 设置工作表权限

通过权限模块，您可以为整个工作表设置权限，控制用户是否可以编辑工作表内容。以下是一个实现代码示例：

async function setWorksheetPermission() {
    const workbook = univerAPI.getActiveWorkbook(); // 获取当前活动的工作簿
    const unitId = workbook.getId(); // 获取工作簿 ID
    const subUnitId = workbook.getActiveSheet().getSheetId(); // 获取当前活动工作表的 ID
    const permission = univerAPI.getPermission(); // 获取权限模块

    const worksheetEditPermission = permission.permissionPointsDefinition.WorksheetEditPermission;

    // 创建基础工作表权限
    const permissionId = await permission.addWorksheetBasePermission(unitId, subUnitId);

    permission.sheetRuleChangedAfterAuth$.subscribe((currentPermissionId) => {
        if(currentPermissionId === permissionId){
            // 设置工作表为不可编辑状态
            permission.setWorksheetPermissionPoint(unitId, subUnitId, worksheetEditPermission, false);
        }
    })
}

关键点

addWorksheetBasePermission 用于创建工作表的基础权限。

setWorksheetPermissionPoint 可细化控制某项具体的编辑权限点。

2. 设置选区范围权限

有些情况下，只需要对特定单元格范围设置保护，而非整个工作表。以下代码展示了如何实现多选区的权限保护：

async function setRangePermission() {
    const workbook = univerAPI.getActiveWorkbook(); // 获取当前活动的工作簿
    const sheet = workbook.getActiveSheet(); // 获取当前活动的工作表
    const unitId = workbook.getId(); // 获取工作簿 ID
    const subUnitId = sheet.getSheetId(); // 获取工作表 ID

    const range1 = sheet.getRange('A1:B3').getRange(); // 第一个保护范围
    const range2 = sheet.getRange('C4:D5').getRange(); // 第二个保护范围
    const ranges = [range1, range2]; // 多个保护范围集合

    const permission = univerAPI.getPermission(); // 获取权限模块
    const rangeProtectionPermissionEditPoint = permission.permissionPointsDefinition.RangeProtectionPermissionEditPoint;

    // 添加范围保护并获取返回的规则 ID 和权限 ID
    const res = await permission.addRangeBaseProtection(unitId, subUnitId, ranges);
    const { permissionId, ruleId } = res;

    permission.rangeRuleChangedAfterAuth$.subscribe((currentPermissionId)=>{
        if(currentPermissionId === permissionId){
            // 设置范围保护为不可编辑
            permission.setRangeProtectionPermissionPoint(unitId, subUnitId, permissionId, rangeProtectionPermissionEditPoint, false);
        }
    })
}

关键点

addRangeBaseProtection 支持对多个范围设置保护规则。

返回值中包含 ruleId（规则唯一标识）和 permissionId（用于拼接权限点位）。

setRangeProtectionPermissionPoint 用于设置具体范围的权限点，例如编辑权限。