什么是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