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

玄魂
265 阅读9分钟

导读

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都能可以胜任。

欢迎交流

官方资源

欢迎交流

最后，我们诚挚的欢迎所有对数据可视化感兴趣的朋友参与进来，参与 VisActor 的开源建设：

VTable：VTable 官网、VTable Github（欢迎 Star）

VisActor 官方网站：www.visactor.io/ 或 www.viactor.com

Discord：discord.gg/3wPyxVyH6m

飞书群（外网）：打开链接扫码

微信公众号：打开链接扫码

github：github.com/VisActor

avatar
文章
阅读
粉丝