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

news/2025/9/22 16:46:10/文章来源:https://www.cnblogs.com/fangsmile/p/19105553

导读

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

·核心能力

1. 高效性能：基于Canvas渲染技术，支持百万级数据的秒级渲染，确保流畅的用户体验。

2. 完整功能：提供Excel级别的公式计算、数据筛选、单元格编辑等核心功能，满足企业级需求。

3. 灵活扩展：插件化架构设计，支持自定义功能扩展，轻松适配各种业务场景。

4. 易于集成：简单的API设计，几行代码即可快速集成到项目中，降低开发成本。

快速上手

获取 NPM 包

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

# 使用npm安装
npm install @visactor/vtable-sheet# 使用yarn安装
yarn add @visactor/vtable-sheet

引入 VTable-Sheet

通过 NPM 包引入

在 JavaScript 文件顶部使用 import 引入 vtable-sheet：

import { VTableSheet } from '@visactor/vtable-sheet';const sheetInstance = new VTableSheet(document.getElementById('container'), {showFormulaBar: true,  // 显示公式栏showSheetTab: true,    // 显示底部表格页切换栏sheets: [{sheetKey: 'sheet1',sheetTitle: '销售数据',columns: [{ title: '产品', width: 120 },{ title: '销量', width: 100 },{ title: '金额', width: 100 }],data: [['笔记本电脑', 120, 599900],['智能手机', 350, 139650],['平板电脑', 85, 220315]]}]
});

运行后效果：

VTable-Sheet 的主要能力

灵活的数据展示能力

单元格合并

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

import { VTableSheet } from '@visactor/vtable-sheet';const sheetInstance = new VTableSheet(document.getElementById(CONTAINER_ID), {sheets: [{sheetKey: 'merge-demo',sheetTitle: '季度销售报表',data: [['2024年销售报表', '', '', ''],['', '', '', ''],['产品名称', 'Q1销售额', 'Q2销售额', 'Q3销售额'],['笔记本电脑', 1200000, 1500000, 1800000],['智能手机', 2500000, 2800000, 3200000],['合计', 3700000, 4300000, 5000000]],cellMerge: [{text: '2024年销售报表',  // 合并标题行range: {start: { col: 0, row: 0 },end: { col: 3, row: 1 }}},{text: '合计',  // 合并合计行的标题单元格range: {start: { col: 0, row: 5 },end: { col: 0, row: 5 }}}]}]});

冻结行列功能

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

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

列宽行高调整

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

高亮提示

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

便利的数据编辑功能

单元格编辑

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

行列操作

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等

公式编辑器

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

数据筛选

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

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

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

筛选状态可以保存和恢复，支持多列组合筛选。

完善的数据组织与管理

多表格页管理

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

import { VTableSheet } from '@visactor/vtable-sheet';const sheetInstance = new VTableSheet(document.getElementById('container'), {showSheetTab: true,  // 显示底部表格页切换栏sheets: [{sheetKey: 'sales',sheetTitle: '销售数据',columns: [{ title: '产品', field: 'product', width: 100 },{ title: '销量', field: 'sales', width: 80 },{ title: '金额', field: 'amount', width: 100 }],data: [['笔记本', 120, 599900],['手机', 350, 139650]],active: true  // 设为活动表格页},{sheetKey: 'inventory',sheetTitle: '库存数据',columns: [{ title: '产品', field: 'product', width: 100 },{ title: '库存', field: 'stock', width: 80 }],data: [['笔记本', 50],['手机', 120]]}]
});

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

数据持久化

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

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

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

导入导出功能

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

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

高级的自定义功能

主题定制

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

import { VTableSheet } from '@visactor/vtable-sheet';const sheetInstance = new VTableSheet(document.getElementById('container'), {sheets: [{sheetKey: 'theme-demo',sheetTitle: '主题示例',columns: [{ title: '姓名', field: 'name', width: 100 },{ title: '部门', field: 'dept', width: 100 },{ title: '职位', field: 'position', width: 120 }],data: [['张三', '技术部', '工程师'],['李四', '产品部', '经理']]}],theme: {// 行列序号样式rowSeriesNumberCellStyle: {bgColor: '#f0f0f0',color: '#666666'},// 表格主题tableTheme: {headerStyle: {bgColor: '#e6f7ff',color: '#0066cc',fontWeight: 'bold'},bodyStyle: {fontSize: 14,color: '#333333'},// 选中样式selectionStyle: {cellBorderColor: '#1890ff'}}}
});

内置多套精美主题（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 配置来动态加载和配置所需的插件，最终将一个功能完备的电子表格呈现给用户。