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


相关推荐
白兰地空瓶11 小时前
当神经网络跑在浏览器里:brain.js 前端机器学习实战
javascript·人工智能
疯狂踩坑人11 小时前
【面试系列】万字长文,速通TCP、HTTP(s)、DNS、CDN、websocket、SSE
前端·面试
小时前端11 小时前
前端稳定性:你的应用经得起一场“混沌演练”吗?
前端·面试
我爱画页面11 小时前
vue3封装table组件及属性介绍
开发语言·javascript·ecmascript
逻极11 小时前
Next.js vs Vue.js:2025年全栈战场,谁主沉浮?
开发语言·javascript·vue.js·reactjs
一枚前端小能手11 小时前
🗂️ Blob对象深度解析 - 从文件处理到内存优化的完整实战指南
前端·javascript
杰克尼11 小时前
vue-day02
前端·javascript·vue.js
一只小阿乐11 小时前
vue3 中实现父子组件v-model双向绑定 总结
前端·javascript·vue.js·vue3·组件·v-model语法糖
qq_3380329211 小时前
Vue 3 的<script setup> 和 Vue 2 的 Options API的关系
前端·javascript·vue.js
lumi.11 小时前
Vue Router页面跳转指南:告别a标签,拥抱组件化无刷新跳转
前端·javascript·vue.js