导读

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

 

小结

VTable-Sheet是一个正在成长的开源电子表格组件，我们致力于为Web应用提供良好的电子表格解决方案。

它将桌面端Excel的强大功能带到了Web端，同时充分发挥了Web技术的优势。无论您是要构建在线办公系统、数据分析平台、财务报表系统，还是任何需要电子表格功能的Web应用，VTable-Sheet都能可以胜任。