基于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


相关推荐
JustHappy1 小时前
古法编程秘籍(七):互联网到底是什么?把两台电脑怎么说话搞懂就够了
前端·后端·网络协议
老毛肚1 小时前
jeecg-boot-base-core 02 day
javascript·python
snow@li1 小时前
SEO-文章标题:写文章时候,分类+主标题+大纲+解释 作为标题 / 不点进去也知道全文覆盖什么 / 标题即架构
前端
kyriewen2 小时前
Git Commit 前自动修复代码风格?配置 Husky + lint-staged,从此 CR 只聊逻辑
前端·git·面试
小和尚同志2 小时前
AI 自动化测试探索(一):Playwright MCP
前端·人工智能·aigc
老马识途2.03 小时前
在AI的帮助下理解spring的启动过程
java·前端·spring
徐小夕3 小时前
Loop Engineering 深度解析与实战指南(全网最全)
前端·算法·github
运筹vivo@3 小时前
Python ContextVar 底层机制与内存模型拆解
前端·数据库·python
#麻辣小龙虾#5 小时前
基于vue3.0开发一款【固废与废气运维管理系统】(支持源码)
前端·vue.js·vue3
Cosolar5 小时前
Docsify零构建文档站完全指南:从快速搭建到企业级部署
前端·开源·github