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


相关推荐
子兮曰3 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰3 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万3 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝3 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋3 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
李少兄3 天前
JavaScript 隐式全局变量解析
javascript
汉堡大王95273 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大3 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师3 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端