欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 时评 > spreadsheet 之websheet

spreadsheet 之websheet

2025/4/27 0:21:40 来源:https://blog.csdn.net/likewindy/article/details/147514824  浏览:    关键词:spreadsheet 之websheet

什么是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激活下一个sheetCtrl+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文件加载完成事件绑定

三、高级

        该部分篇幅允许你对websheet的功能进行扩展。比如如何在websheet内展示你的控件,使用你自定义的功能函数以及交互中的右击菜单。

自定义函数自定义展示控件自定义右击菜单

四、在线代码

         所有展现代码及展示地址: 演示demo


五、关于版权

        未经允许禁止用于商业用途。


六、联系我们

邮箱地址:11627685@qq.com
QQ群:1036131666


在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词