基于HTML CANVAS和EXCEL的xlsx文件展示工具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 激活下一个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 文件加载完成 事件绑定

更多事件


三、高级

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

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

四、在线代码

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


五、关于版权

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


六、联系我们

邮箱地址:11627685@qq.com

QQ群:1036131666


相关推荐
2501_920931706 小时前
React Native鸿蒙跨平台采用ScrollView的horizontal属性实现横向滚动实现特色游戏轮播和分类导航
javascript·react native·react.js·游戏·ecmascript·harmonyos
0思必得07 小时前
[Web自动化] Selenium处理动态网页
前端·爬虫·python·selenium·自动化
东东5168 小时前
智能社区管理系统的设计与实现ssm+vue
前端·javascript·vue.js·毕业设计·毕设
catino8 小时前
图片、文件的预览
前端·javascript
2501_920931709 小时前
React Native鸿蒙跨平台实现推箱子游戏,完成玩家移动与箱子推动,当所有箱子都被推到目标位置时,玩家获胜
javascript·react native·react.js·游戏·ecmascript·harmonyos
layman052810 小时前
webpack5 css-loader:从基础到原理
前端·css·webpack
半桔10 小时前
【前端小站】CSS 样式美学:从基础语法到界面精筑的实战宝典
前端·css·html
AI老李10 小时前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·postcss
_OP_CHEN10 小时前
【前端开发之CSS】(一)初识 CSS:网页化妆术的终极指南,新手也能轻松拿捏页面美化!
前端·css·html·网页开发·样式表·界面美化
啊哈一半醒10 小时前
CSS 主流布局
前端·css·css布局·标准流 浮动 定位·flex grid 响应式布局