VTable-Sheet：重新定义Web电子表格的开源解决方案

导读

VTable-Sheet是一个轻量级、高性能的电子表格组件，专为现代Web应用设计。它采用Canvas渲染技术，支持海量数据的流畅展示和编辑，为开发者提供了一个功能完备、易于集成的电子表格解决方案。

·核心能力1. 高效性能：基于Canvas渲染技术，支持百万级数据的秒级渲染，确保流畅的用户体验。2. 完整功能：提供Excel级别的公式计算、数据筛选、单元格编辑等核心功能，满足企业级需求。3. 灵活扩展：插件化架构设计，支持自定义功能扩展，轻松适配各种业务场景。4. 易于集成：简单的API设计，几行代码即可快速集成到项目中，降低开发成本。快速上手

获取 NPM 包

首先，你需要在项目根目录下使用以下命令安装：

1. # 使用npm安装
2. npm install @visactor/vtable-sheet
4. # 使用yarn安装
5. yarn add @visactor/vtable-sheet

复制代码

引入 VTable-Sheet

通过 NPM 包引入在 JavaScript 文件顶部使用 import 引入 vtable-sheet：

1. import { VTableSheet } from '@visactor/vtable-sheet';
3. const sheetInstance = new VTableSheet(document.getElementById('container'), {
4.   showFormulaBar: true,  // 显示公式栏
5.   showSheetTab: true,    // 显示底部表格页切换栏
6.   sheets: [
7.     {
8.       sheetKey: 'sheet1',
9.       sheetTitle: '销售数据',
10.       columns: [
11.         { title: '产品', width: 120 },
12.         { title: '销量', width: 100 },
13.         { title: '金额', width: 100 }
14.       ],
15.       data: [
16.         ['笔记本电脑', 120, 599900],
17.         ['智能手机', 350, 139650],
18.         ['平板电脑', 85, 220315]
19.       ]
20.     }
21.   ]
22. });

复制代码

运行后效果： 

 VTable-Sheet 的主要能力

灵活的数据展示能力

单元格合并

单元格合并是报表制作中的常用功能，VTable-Sheet提供了灵活的合并能力，支持任意区域的单元格合并和拆分。

1. import { VTableSheet } from '@visactor/vtable-sheet';
3. const sheetInstance = new VTableSheet(document.getElementById(CONTAINER_ID), {
4.     sheets: [{
5.       sheetKey: 'merge-demo',
6.       sheetTitle: '季度销售报表',
7.       data: [
8.         ['2024年销售报表', '', '', ''],
9.         ['', '', '', ''],
10.         ['产品名称', 'Q1销售额', 'Q2销售额', 'Q3销售额'],
11.         ['笔记本电脑', 1200000, 1500000, 1800000],
12.         ['智能手机', 2500000, 2800000, 3200000],
13.         ['合计', 3700000, 4300000, 5000000]
14.       ],
15.       cellMerge: [
16.         {
17.           text: '2024年销售报表',  // 合并标题行
18.           range: {
19.             start: { col: 0, row: 0 },
20.             end: { col: 3, row: 1 }
21.           }
22.         },
23.         {
24.           text: '合计',  // 合并合计行的标题单元格
25.           range: {
26.             start: { col: 0, row: 5 },
27.             end: { col: 0, row: 5 }
28.           }
29.         }
30.       ]
31.     }]
32.   });

复制代码

 冻结行列功能

在处理大型数据集时，冻结行列功能可以让表头和关键列保持可见，方便数据查看和对比。

1. import { VTableSheet } from '@visactor/vtable-sheet';
3. const sheetInstance = new VTableSheet(document.getElementById('container'), {
4.   sheets: [{
5.     sheetKey: 'frozen-demo',
6.     sheetTitle: '冻结示例',
7.     columns: [
8.       { title: '序号', field: 'id', width: 60 },
9.       { title: '产品', field: 'product', width: 100 },
10.       { title: '1月', field: 'jan', width: 80 },
11.       { title: '2月', field: 'feb', width: 80 },
12.       { title: '3月', field: 'mar', width: 80 }
13.     ],
14.     data: [
15.       [1, '笔记本', 1200, 1500, 1800],
16.       [2, '手机', 2500, 2800, 3000],
17.       [3, '平板', 900, 950, 1100],
18.       // ... 更多数据行
19.     ],
20.     frozenRowCount: 2,  // 冻结前两行
21.   }]
22. });

复制代码

 

 列宽行高调整

灵活的列宽行高调整功能让用户能够根据内容自由调整表格布局，支持拖拽调整和双击自适应。

 高亮提示

选中单元格时会自动高亮对应的行列标题，帮助用户快速定位数据位置。

 便利的数据编辑功能

单元格编辑

简单直观的编辑体验是电子表格的核心。双击单元格即可进入编辑模式，支持多种数据类型的输入和验证。

 行列操作

VTable-Sheet通过AddRowColumnPlugin插件提供了直观的行列操作功能：

• 可视化操作：鼠标悬停时显示添加按钮，点击即可新增行列
  
• 灵活的插入位置：可在任意位置插入新的行或列
  
• 自定义回调：支持自定义新增行列的数据内容和格式
  
• 右键菜单集成：结合ContextMenuPlugin，提供完整的插入、删除、隐藏等操作
  

 

 操作简单直观，无需记忆复杂的快捷键，鼠标悬停即可看到操作提示。 填充柄功能

VTable-Sheet 提供类似Excel的填充柄功能：

• 智能识别数据模式：自动识别数字序列、日期序列、文本模式等
  
• 多种填充模式：支持复制填充和序列填充两种模式
  
• 灵活的操作方式：拖拽填充或双击快速填充
  
• 丰富的内置规则：支持日期序列、中文数字、星期序列等多种模式
  

使用方式简单直观：选中单元格后，拖拽右下角的填充柄即可快速填充数据。 快捷键支持

VTable-Sheet支持常用的键盘操作：

• 编辑快捷键：Enter确认编辑、Tab切换单元格、方向键导航
  
• 复制粘贴：Ctrl+C/V/X复制粘贴剪切、Ctrl+A全选
  
• 区域选择：Shift+鼠标连续选择、Ctrl+鼠标多选
  
• 智能编辑：双击进入编辑、F2编辑当前单元格
  

让Excel用户无需学习成本，即可流畅使用VTable-Sheet。 强大的数据分析功能

公式计算

VTable-Sheet集成了HyperFormula计算引擎，目前支持常用的函数：

• 数学函数：SUM、AVERAGE、MAX、MIN、ROUND等
  
• 逻辑函数：IF、AND、OR、NOT等
  
• 文本函数：CONCATENATE、LEFT、RIGHT、LEN等
  
• 日期函数：TODAY、NOW、YEAR、MONTH、DAY等
  
• 查找函数：VLOOKUP、INDEX、MATCH等
  

 公式编辑器

公式编辑器不仅仅是一个输入框，它提供了智能提示、参数提示、语法高亮等功能，让公式编写变得轻松高效。

 数据筛选

支持按值筛选和按条件筛选两种模式：

• 按值筛选：通过勾选列表快速筛选所需数据
  
• 按条件筛选：支持大于、小于、包含、介于等复杂条件
  

1. import { VTableSheet } from '@visactor/vtable-sheet';
3. const sheetInstance = new VTableSheet(document.getElementById('container'), {
4.   sheets: [{
5.     sheetKey: 'filter-demo',
6.     sheetTitle: '筛选示例',
7.     filter: true,  // 启用筛选功能
8.     columns: [
9.       { title: '姓名', field: 'name', width: 100, filter: false },
10.       { title: '年龄', field: 'age', width: 80 },
11.       { title: '部门', field: 'dept', width: 100 },
12.       { title: '薪资', field: 'salary', width: 100 }
13.     ],
14.     data: [
15.       ['张三', 25, '技术部', 8000],
16.       ['李四', 30, '产品部', 12000],
17.       ['王五', 28, '技术部', 9500],
18.       ['赵六', 35, '市场部', 15000]
19.     ]
20.   }]
21. });

复制代码

 

筛选状态可以保存和恢复，支持多列组合筛选。 完善的数据组织与管理

多表格页管理

VTable-Sheet支持在一个实例中管理多个表格页，类似Excel的工作簿概念：

1. import { VTableSheet } from '@visactor/vtable-sheet';
3. const sheetInstance = new VTableSheet(document.getElementById('container'), {
4.   showSheetTab: true,  // 显示底部表格页切换栏
5.   sheets: [
6.     {
7.       sheetKey: 'sales',
8.       sheetTitle: '销售数据',
9.       columns: [
10.         { title: '产品', field: 'product', width: 100 },
11.         { title: '销量', field: 'sales', width: 80 },
12.         { title: '金额', field: 'amount', width: 100 }
13.       ],
14.       data: [
15.         ['笔记本', 120, 599900],
16.         ['手机', 350, 139650]
17.       ],
18.       active: true  // 设为活动表格页
19.     },
20.     {
21.       sheetKey: 'inventory',
22.       sheetTitle: '库存数据',
23.       columns: [
24.         { title: '产品', field: 'product', width: 100 },
25.         { title: '库存', field: 'stock', width: 80 }
26.       ],
27.       data: [
28.         ['笔记本', 50],
29.         ['手机', 120]
30.       ]
31.     }
32.   ]
33. });

复制代码

支持动态添加、删除、切换表格页，每个表格页可以独立配置样式和功能。

 数据持久化

提供完整的状态保存和恢复机制：

1. // 保存当前状态
2. const config = sheetInstance.saveToConfig();
3. localStorage.setItem('sheet-state', JSON.stringify(config));
5. // 恢复状态
6. const savedConfig = JSON.parse(localStorage.getItem('sheet-state'));
7. const newInstance = new VTableSheet(document.getElementById('container'), savedConfig);

复制代码

可保存的状态包括：数据内容、筛选条件、活动表格页、公式设置、合并单元格等。 导入导出功能

支持CSV、XLSX格式的导入导出，方便与Excel等工具交换数据：

1. // 导出为Excel
2. sheetInstance.exportSheetToFile('xlsx');
4. // 导入Excel文件
5. sheetInstance.importFileToSheet();

复制代码

 高级的自定义功能

主题定制

VTable-Sheet提供了主题定制功能，可以自定义表格的视觉样式：

1. import { VTableSheet } from '@visactor/vtable-sheet';
3. const sheetInstance = new VTableSheet(document.getElementById('container'), {
4.   sheets: [{
5.     sheetKey: 'theme-demo',
6.     sheetTitle: '主题示例',
7.     columns: [
8.       { title: '姓名', field: 'name', width: 100 },
9.       { title: '部门', field: 'dept', width: 100 },
10.       { title: '职位', field: 'position', width: 120 }
11.     ],
12.     data: [
13.       ['张三', '技术部', '工程师'],
14.       ['李四', '产品部', '经理']
15.     ]
16.   }],
17.   theme: {
18.     // 行列序号样式
19.     rowSeriesNumberCellStyle: {
20.       bgColor: '#f0f0f0',
21.       color: '#666666'
22.     },
23.     // 表格主题
24.     tableTheme: {
25.       headerStyle: {
26.         bgColor: '#e6f7ff',
27.         color: '#0066cc',
28.         fontWeight: 'bold'
29.       },
30.       bodyStyle: {
31.         fontSize: 14,
32.         color: '#333333'
33.       },
34.       // 选中样式
35.       selectionStyle: {
36.         cellBorderColor: '#1890ff'
37.       }
38.     }
39.   }
40. });

复制代码

内置多套精美主题（ARCO、BRIGHT、DARK等），也支持扩展自定义主题。

 右键菜单

VTable-Sheet提供了完整的右键菜单功能，支持不同区域的自定义菜单：右键菜单支持：

• 分区域配置：表头、表体、行列序号区域可配置不同菜单
  
• 内置功能：复制、剪切、粘贴、插入、删除、冻结、合并等
  
• 自定义扩展：支持添加自定义菜单项和处理逻辑
  
• 动态调整：根据上下文动态显示/隐藏菜单项
  

 插件化架构

VTable-Sheet采用插件化架构，许多功能通过插件实现。这种设计保持了核心的简洁，同时为社区贡献者提供了扩展的空间。欢迎更多开发者贡献插件，共同丰富VTable-Sheet的功能。 具体来说，VTable-Sheet 采用分层架构，将核心引擎、插件功能和上层应用解耦，从而带来灵活性和可扩展性。

• VTable (核心引擎)：作为整个系统的基石，VTable 是一个高性能的表格渲染与交互引擎。它提供了底层的表格组件 ListTable 和一套标准的插件接口。
  
• VTable-Plugins (功能套件)：这是一个独立的插件库，提供了如筛选、右键菜单、自动填充等一系列可复用的功能模块。这些插件遵循 VTable 的标准接口，可以灵活地被任何基于 VTable 的项目使用。
  
• VTable-Sheet (整合应用)：VTable-Sheet 是一个更高层次的封装，它基于 VTable 构建，并消费 VTable-Plugins 中的插件。它通过一个插件工厂 (table-plugins.ts)，根据用户的 Sheet 配置来动态加载和配置所需的插件，最终将一个功能完备的电子表格呈现给用户。
  

小结

VTable-Sheet是一个正在成长的开源电子表格组件，我们致力于为Web应用提供良好的电子表格解决方案。它将桌面端Excel的强大功能带到了Web端，同时充分发挥了Web技术的优势。无论您是要构建在线办公系统、数据分析平台、财务报表系统，还是任何需要电子表格功能的Web应用，VTable-Sheet都能可以胜任。欢迎交流

官方资源

- GitHub仓库：https://github.com/VisActor/VTable- 官方文档：https://visactor.io/vtable- 在线演示：https://visactor.io/vtable/demo 参与贡献

• 问题反馈：欢迎通过GitHub Issues提交问题和建议，帮助我们改进
  
• 技术讨论：加入VisActor开源社区，一起探讨技术方案
  
• 贡献代码：非常欢迎提交PR，无论是修复bug还是新增功能
  
• 完善文档：帮助改进文档，让更多人能够使用VTable-Sheet
  
• 分享经验：分享您的使用经验和最佳实践
  

 
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！