UniverSheets最新版本测试

目录

1.关于大数据量渲染

2.UI及插件配置

3.函数

4.筛选

5.排序

6.查找&替换

7.导入导出、打印、图表 (Pro收费版)

8.表格样式渲染

a).单元格样式设置 S

9.事件绑定

a).单元格单击事件

最佳实践

b).双击事件，并未提供，借助单击事件以及时间差来实现

c).行列操作，增、删、隐藏、移动、设置（官网中有详细的说明）

10.权限控制，可限制用户编辑

11.问题点

1.粘贴菜单被禁用

原有测试版本为0.4.1 版本更新至0.10.4，更新速度快，官网文档也更加清晰明了，优化了许多方法，使用起来更方便。准备弃用原有版本，替换为最新的版本，更换引入模式为预设模式，避免插件引入时加载大量文件。

1.关于大数据量渲染

项目测试数据10000条，渲染速度快，整体操作不卡顿，与Excel体验感相同，官网的在线演示有一个专门模拟大数据量压力测试的例子，测试数据为一百万条，渲染快且操作流畅。

2.UI及插件配置

const { univerAPI } = createUniver({theme: ''// 主题 默认使用 defaultThemedarkMode: true,//暗黑模式 默认falselocale: LocaleType.ZH_CN,locales: { // 国际化语言配置[LocaleType.ZH_CN]: mergeLocales(UniverPresetSheetsCoreZhCN,UniverPresetSheetsFilterZhCN,UniverPresetSheetsSortZhCN,UniverPresetSheetsDataValidationZhCN,UniverPresetSheetsFindReplaceZhCN,UniverPresetSheetsTableZhCN,)},presets: [ // 插件注册UniverSheetsCorePreset({container: 'univerSheets',sheets: {protectedRangeShadow: false, // 保护范围是否展示阴影},// header: false, // 是否显示头部// toolbar: false, // 是否显示头部工具栏// contextMenu: false, // 是否显示右键菜单// ribbonType: 'simple', // 头部工具栏的类型。default: 分组模式；simple：不分组模式。menu: { // 菜单配置'sheet.command.set-range-bold': { // 隐藏加粗hidden: true,},'sheet.command.set-range-italic': { // 斜体禁用hidden: false,disabled: true,},},}), // 默认defaultUniverSheetsFilterPreset(),// 过滤组件UniverSheetsSortPreset(), // 排序组件UniverSheetsDataValidationPreset(), // 数据验证UniverSheetsFindReplacePreset(), // 查找替换UniverSheetsTablePreset(), // 表格]});

电子表格的UI配置

interface IUniverSheetsUIConfig {// 是否显示底部。footer?: false | {// Sheet bar 是子表管理器，包括添加/切换/删除子表。sheetBar?: boolean// 统计栏包括当前选区的统计信息，如计数、总和、平均值等。statisticBar?: boolean// 在底部的菜单，包括高亮、网格线等。menus?: boolean// 底部的缩放滑块。zoomSlider?: boolean}// 是否显示公式栏formulaBar?: booleanclipboardConfig?: {// 在粘贴操作后是否显示粘贴选项按钮hidePasteOptions?: boolean}// 滚动条配置scrollConfig?: IScrollBarProps// 是否显示受保护范围的阴影。protectedRangeShadow?: boolean// 是否禁用强制字符串警告。disableForceStringAlert?: boolean// 是否禁用强制字符串标记。disableForceStringMark?: boolean}

3.函数

常用的求和、平均值、最大值、最小值皆可使用，共计500+个公式可用，可以检索出想要使用的函数。

4.筛选

筛选功能允许用户对电子表格中的数据进行筛选，以便快速查找和分析特定信息。它支持多种筛选条件和操作，帮助用户更高效地处理数据。不需要服务端的支持。

预设信息

@univerjs/preset-sheets-filter

5.排序

排序功能允许用户对电子表格中的数据进行排序，以便更好地组织和分析信息。它支持多种排序方式，包括升序、降序和自定义排序，帮助用户快速找到所需数据。

预设信息

@univerjs/preset-sheets-sort

6.查找&替换

可用快捷键查找替换，与Excel类似

7.导入导出、打印、图表 (Pro收费版)

该功能需要Univer 服务端，且插件需升级为Pro。

8.表格样式渲染

a).单元格样式设置 S

可在cellData中设置s，s可以是字符串(样式id)也可以是样式对象

示例：

styles:{"cellSty_id_1":{fs: 12bg: {rgb: '#ff0000'}}},cellData:[0: {0: { v: 'A1',s:'cellSty_id_1' } // 样式id1: { v: 1,s:{ // 样式对象fs: 12bg: {rgb: '#ff0000'}} }}]

9.事件绑定

a).单元格单击事件

 univerAPI.addEvent(univerAPI.Event.CellClicked, (params) => {const { worksheet, workbook, row, column } = params});

事件监听器会返回一个 IDisposable 对象，可以用它来在不再需要时移除监听器：

const disposable = univerAPI.addEvent(univerAPI.Event.CellClicked, (params) => {  // 处理值变化})// 之后，当你想要移除监听器时：disposable.dispose()

最佳实践

1. 当不再需要时，务必销毁事件监听器以防止内存泄漏；

2. 根据具体用例选择合适的事件 - 优先使用特定事件而不是通用事件；

3. 保持事件处理程序轻量化以维持性能；

4. 当需要阻止默认行为时，考虑使用 BeforeClipboardChange 等“前置”事件；

b).双击事件，并未提供，借助单击事件以及时间差来实现

示例：

// 用于存储上次单击的时间let lastClickTime = 0;// 双击的时间间隔阈值，单位为毫秒const doubleClickThreshold = 300;// 单元格 单击事件univerAPI.addEvent(univerAPI.Event.CellClicked, (params) => {const { worksheet, workbook, row, column } = params;const sheet = activeWorkBook.getActiveSheet();const range = sheet.getRange(row,column,1,1);const currentTime = new Date().getTime();// 通过两次单击时间差 实现双击效果const timeDiff = currentTime - lastClickTime;if (timeDiff <= doubleClickThreshold) {// 获取单元格数值let value = range.getValue();}lastClickTime = currentTime;});

c).行列操作，增、删、隐藏、移动、设置（官网中有详细的说明）

在指定行位置之后插入一行。

const sheet = univerAPI.getActiveWorkbook().getActiveSheet()// 这将在第一行位置后插入一行
sheet.insertRowAfter(0)

在指定行位置之前插入一行。

const sheet = univerAPI.getActiveWorkbook().getActiveSheet()// 这将在第一行位置前插入一行
sheet.insertRowBefore(0)

在工作表中从指定位置开始插入一个或多个连续的空白行。

const sheet = univerAPI.getActiveWorkbook().getActiveSheet()// 将所有行向下移动三位
sheet.insertRows(0, 3)

10.权限控制，可限制用户编辑

Univer 提供了权限控制的能力，通常可用于限制用户对工作簿、工作表、选区的操作。当用户进行没有权限的操作时，可终止代码执行并提示用户缺失权限。例如你可以在一片选区内设置区域保护，就可以设置其他协作者在该保护范围内是否可以使用编辑、阅读、复制、筛选等等。

适用场景：多角色协作场景；

 /** 权限控制 编辑功能限制 */const permission = univerAPI.getActiveWorkbook().getPermission();// 权限位点 编辑功能const worksheetEditPermission = permission.permissionPointsDefinition.WorksheetEditPermission;let unitId = 'fvcghuyjyfjm';let subUnitId = 'RSfWjJFv4opmE1JaiRj80';// 创建工作表权限，unitId 是工作簿的 id, subUnitId 是工作表的 id，此时生成的权限是一个基础权限，它的作用是用于渲染权限区域const permissionId = permission.addWorksheetBasePermission(unitId, subUnitId);permission.sheetRuleChangedAfterAuth$.subscribe((currentPermissionId) => {let golInfo = JSON.parse(tcCommon.decryptAes(window.global));let isxt=golInfo.isxt;if (isxt !== '1') { // 权限规则 非系统用户不可编辑// 设置工作表为不可编辑状态permission.setWorksheetPermissionPoint(unitId, subUnitId, worksheetEditPermission, false);}});

11.问题点

1.粘贴菜单被禁用

问题描述：

把示例放到项目里后，右键粘贴菜单被禁用了？代码中并未禁止该功能。

静态文件没问题，一旦使用链接打开就会被禁止, 猜测与链接的安全性有关？

原因：

这一问题与链接的安全性直接相关，核心原因是浏览器对「安全上下文」（Secure Context）的严格限制 —— 剪贴板 API（Univer Sheet 右键粘贴功能依赖此 API）仅在安全上下文环境中才能正常工作，而通过普通 HTTP 链接打开的页面可能处于「非安全上下文」，导致粘贴功能被浏览器自动禁用。

具体原理：浏览器的安全上下文限制

现代浏览器（Chrome、Firefox、Edge 等）为保护用户隐私和数据安全，规定剪贴板读写操作（navigator.clipboard API）只能在「安全上下文」中使用。判断是否为安全上下文的核心依据是页面的协议和来源：

环境 / 协议	是否为安全上下文？	剪贴板 API 可用性	Univer 右键粘贴菜单状态
本地文件（file://）	特殊处理（历史兼容）	大部分浏览器允许（限制较松）	可用（静态文件正常）
HTTPS 链接（https://）	是	完全可用	正常启用
HTTP 链接（http://）	否（除 localhost 特殊情况）	被浏览器禁用（或限制极大）	禁用（项目网页问题）

解决办法：

验证是否生效

打开项目页面后，按 F12 打开控制台，输入以下代码：

JavaScript

运行

 // 检查是否为安全上下文console.log('安全上下文：', window.isSecureContext); // 检查剪贴板 API 是否可用console.log('剪贴板 API：', navigator.clipboard);

• 若输出 安全上下文：true 且 剪贴板 API：[Clipboard 对象]，则问题已解决，右键粘贴菜单会正常显示。

• 若仍为 false 或 undefined，则需检查 HTTPS 配置是否正确。

univerSheets官网说明

使用 FUniver.copy() 和 FUniver.paste() 方法可以读取和写入系统剪贴板。

复制与粘贴依赖浏览器原生 API ，当环境条件或者权限不满足时复制与粘贴功能将无法工作。