文档备案控制台登录立即注册
首页文章问答视频活动下载资源开发者计划团队号镜像站
发布

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

VisActor
VisActor
开源
企业应用大数据数据库

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

key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM

导读

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

picture.image

核心能力

  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]  
      ]  
    }  
  ]  
});

运行后效果：

picture.image

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 }  
          }  
        }  
      ]  
    }]  
  });

picture.image

冻结行列功能

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

  
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,  // 冻结前两行  
  }]  
});

picture.image

列宽行高调整

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

picture.image

高亮提示

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

picture.image

便利的数据编辑功能

单元格编辑

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

picture.image

行列操作

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

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

picture.image

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

填充柄功能

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

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

picture.image

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

快捷键支持

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等

picture.image

公式编辑器

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

picture.image

数据筛选

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

  • 按值筛选 ：通过勾选列表快速筛选所需数据
  • 按条件筛选 ：支持大于、小于、包含、介于等复杂条件
  
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]  
    ]  
  }]  
});

picture.image

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

完善的数据组织与管理

多表格页管理

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]  
      ]  
    }  
  ]  
});

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

picture.image

数据持久化

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

  
// 保存当前状态  
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等），也支持扩展自定义主题。

picture.image

右键菜单

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

picture.image

小结

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

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

欢迎交流

官方资源

欢迎交流

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

VTable ：VTable 官网https://www.visactor.io/vtable、VTable Githubhttps://github.com/VisActor/VTable（欢迎 Star）

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

Discord：discord.gg/3wPyxVyH6m

飞书群（外网）：

picture.image

微信公众号：

github：github.com/VisActor

0
0
0
0
关于作者
VisActor
VisActor
关于作者
VisActor
VisActor

文章

0

获赞

0

收藏

0

相关资源
云原生可观测性技术的落地实践
云原生技术和理念在近几年成为了备受关注的话题。应用通过云原生改造，变得更动态、弹性，可以更好地利用云的弹性能力。但是动态、弹性的环境也给应用以及基础设施的观测带来了更大的挑战。本次分享主要介绍了云原生社区中可观测性相关的技术和工具，以及如何使用这些工具来完成对云原生环境的观测。
点击下载 
相关产品
推荐阅读
Goland 2025.2 迎来重大升级，又整新活！
VS Code又又出新版本1.89了，新姿势用起来真是YYDS的快
Jetbrains Fleet 又爆出了一个王炸！！！
Gin 实现统一异常处理和封装统一返回结果
从0死磕全栈第八天：使用nest.js五分钟搭建后端开发环境
评论
未登录
看完啦，登录分享一下感受吧～
暂无评论