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


相关推荐
IT_陈寒2 小时前
Redis大key删除为什么会导致服务卡顿?我的线上事故复盘
前端·人工智能·后端
系统集成-鹰翔2 小时前
ERP图片改名后仍命中识别缓存:缓存键、十分钟到期与调用计数
javascript·经验分享·后端
用户2705077725243 小时前
MCP 最小 Server 实测:3 个 JSON-RPC 报错与修法
前端
用户499335025073 小时前
一人VIP账号多人共用:Web 代理里的会话共享怎么实现
前端
用户老李3 小时前
无线电自学教程 05:第一台收音机——从矿石机到 SDR
前端
IPIPD3 小时前
Node.js请求遇到503怎么重试?先解析Retry-After,再做有上限退避
前端
葡萄城技术团队3 小时前
dsh-spreadjs-editor 的集成链路:把 SpreadJS Designer 嵌进 Agent 工作台
前端
FlyWIHTSKY4 小时前
vue2和vue3有什么区别,用法上有哪些区别
前端·javascript·vue.js
码云之上4 小时前
10 颗一模一样的「Edit」:中后台 Web Agent 怎么找到对的那一行
前端·人工智能·浏览器
量化分析码农4 小时前
【Python量化多因子实战 04】因子暴露不是 alpha:市值与行业中性化实战
前端·后端