当前位置：首页 > backend >正文

spreadsheet 之websheet

backend 2025/7/4 10:03:36

什么是WEBSHEET

websheet基于HTML5的CANVAS和JAVASCRIPT开发的纯前端xlsx文件展示控件，该控件着重的页面展示，主要完成了文件导入、导出、文本展示、格式化文本、合并单元格、边框、底色、设置行列宽度高度，行列隐藏、视图锁定、基础表格、撤销、重做、快捷键、公式的解析和计算等功能。支持自定义函数，单元格展示编辑和右击菜单定制开发。

一、入门

如果你是新手也不熟悉websheet，则可以从下面两篇文章入手，这些篇幅的内容将会教会你如何在纯HTML和VUE中加载websheet,如何把该控件渲染到你的页面上，以及如何加载本地或网络上的EXCEL文件。也可以在demo地址看到完整的可以使用的例子。

HTML使用入门	VUE使用入门	打开文件	文件导出

目前支持的快捷键

快捷键	功能说明	快捷键	功能说明
Ctrl+O	打开一个新文件	Ctrl+X	剪切
Ctrl+C	复制	Ctrl+P	粘贴
Ctrl+Z	撤销	Ctrl+Y	重做
Ctrl+A	全选	Delete	清除单元格值
Ctrl+Shitf+PageDown	激活下一个sheet	Ctrl+Shitf+PageUp	激活上一个sheet
Ctrl+↑	试图切换到sheet开始行	Ctrl+↓	试图切换到sheet结束行
Ctrl+←	试图切换到sheet开始列	Ctrl+→	试图切换到sheet结束列
Enter	确认编辑并向下一个单元格	Alt+鼠标滚轮	向左或右移动表格

二、进阶

如果你对该控件已经有了解，想在自己项目中利用脚本动态控制该控件的部分功能，则可以了解以下篇幅内容，在以下篇幅将会了解到如何设置单元、如何删除、增加行列，设置行列的高度和宽度、监听websheet的事件以及使用已经支持的功能函数。

单元格	格式化	列和行

sheet操作	视图冻结	名称管理

表格管理	编辑器	打印

目前支持的常用函数清单：

函数名称	说明	例子
SUM	汇总函数	汇总A1到C1单元格的值 SUM(A1:C1)
IF	条件函数	IF(10>5,“Yes”,“No”)
CONCATENATE	链接函数	CONCATENATE(text1,text2,[text3],…)
NOW	当前系统日期及时间函数	参考：日期时间格式化
TRUNC	截取函数	TRUNC(3.141593) // 返回 3

更多函数

目前支持常用事件清单见下面表格，绑定事件可以参考：事件绑定：

事件名称	说明	绑定链接
ActiveCellChange	激活的单元格变化时触发	事件绑定
SheetChange	激活的sheet变化时触发	事件绑定
CellValueChage	单元格值变化触发	事件绑定
RowChange	行增加删除时触发	事件绑定
ColChange	列增加删除时触发	事件绑定
DocumentChange	文件加载完成	事件绑定