spreadsheet 之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