Vue 是一套用于构建用户界面的渐进式框架,与其它 JS 框架不同,Vue 被设计为可以自底向上逐层应用,由于其核心库只关注视图层,因此 Vue 更易上手,且很容易与第三方库或既有项目整合,当其与现代化的工具链或各种支持类库相结合时,Vue 也能为复杂的单页应用提供驱动。

SpreadJS作为一款基于 HTML5 的纯前端表格控件,可以以原生的方式嵌入各类应用,并与前后端技术框架相结合。将 SpreadJS 与 Vue 集成,可在 Vue 框架中实现类似 Excel 的电子表格功能,包括对 450 多种计算公式的支持、在线导入导出 Excel 文档、数据透视表和可视化分析,使应用程序具备极高的处理性能和响应速度。

SpreadJS 集成 Vue,可提供多种电子表格功能

高性能数据处理

高性能数据处理

SpreadJS 针对数据处理性能进行了优化。点击运行演示,即可通过设置数据的数量、行列、分组和排序,衡量 SpreadJS 的数据处理性能。

在线表格编辑器

在线表格编辑器

在线表格编辑器内置开放的 API 和类 Excel 的 UI 设计元素,可实现模板在线设计、在线编辑和数据绑定等功能,为用户提供高度类似 Excel 的使用体验。

数据透视表

数据透视表

SpreadJS 的数据透视表具备了 Excel 透视表的大部分功能,包括透视面板、透视表字段、筛选器、值字段设置、数据排序、分类汇总等。

导入/导出 Excel

导入/导出 Excel

支持在线导入和导出 Excel (.xlsx),使用该功能,用户可在浏览器中加载并修改各种 Excel 文档,并将修改后的数据保存到数据库中。

450 多种计算公式

450 多种计算公式

SpreadJS 的计算引擎支持 450 多种 Excel 公式函数,包括自定义函数、数组函数、动态数组、异步函数、XMATCH、LET 、XLOOKUP 函数等。

数据绑定

数据绑定

使用 SpreadJS 可以直接通过模板创建与数据的绑定关系,即可绑定 JavaScript 对象和对象数组,也可将整个工作表、表格或单元格绑定到数据源。

32 种图表

32 种图表

SpreadJS 内置 32 种图表类型,支持趋势线、误差线和组合图表功能。通过设置图表布局、自定义元素,可以将表格数据以可视化的方式呈现。

迷你图

迷你图

与 Excel 相似,SpreadJS 可以把一行数据生成一个图表放在一个单元格中,用于显示数据趋势,例如增/减、最小/最大值、库存水平、成本等。

182 种形状

182 种形状

SpreadJS 的内置形状可以在 Excel 中无损导入和导出,除了内置形状,还可以使用数据驱动来动态生成可交互的形状类型,为系统添加更多细节展现。

超链接

超链接

SpreadJS 的超链接功能与 Excel 类似,使用超链接,可以快速定位目标工作表的位置、打开电子邮件或实现类似按钮的跳转功能。

排序

排序

即可以选择表单区域并通过上下文菜单排序,也可以通过表头筛选框进行排序,与此同时,SpreadJS 还提供了 Compare 函数来执行更复杂的排序。

数据验证

数据验证

数据验证的目的是判断在单元格中输入的数据是否合法。借助 SpreadJS,可以标注出无效数据,帮助用户及时更正数据,以满足输入要求。

自定义菜单

自定义菜单

SpreadJS 的在线表格编辑器提供了类似于 Excel 的上下文菜单,该菜单可与工作表进行交互。通过调用 API,可实现添加、删除、自定义菜单选项。

打印

打印

SpreadJS 提供了实时预览与自定义打印的功能。通过设置分页符,可在打印预览页显示预览行,并实时获取页面信息以将背景图像作为水印。

导出 PDF

导出 PDF

SpreadJS 支持导出 PDF 文件,也可以导入 Excel(.xlsx)并将其转化为 PDF。导出时使用 printInfo 对象进行页面设置,以享受 SpreadJS 中所有打印功能。

体验 SpreadJS 纯前端表格控件

立即下载 Demo 演示

三种方式,学会在 Vue 中快速集成 SpreadJS

使用 Node 包管理器

使用 Node 包管理器

使用 Node 包管理器,可直接从 NPM 服务器下载 SpreadJS 包和命令行模块到本地使用。

使用传统 HTML

使用 HTML 语法,可以将 SpreadJS 和 Vue-SpreadJS 添加到 HTML 模板,以便在 Vue 应用程序中使用。

新手训练营

您可以通过参加新手训练营,快速学会在 Vue 框架中使用 SpreadJS,搭建在线表格编辑系统。

SpreadJS 表格控件开发实战

搭建基于 Vue 3 的在线表格编辑系统

SpreadJS 集成 Vue 的典型案例

苏宁易购 - 极客办公平台

苏宁易购 - 极客办公平台

为了提升效率实现真正的多人协同办公,苏宁易购在 Vue 脚手架工程中,整合了 SpreadJS 纯前端表格控件与在线表格编辑器,实现了类 Excel 的数据分析、计算、在线 Excel 导入导出以及在线填报等功能。

了解更多