基于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激活下一個sheetCtrl+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


在這里插入圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/78793.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/78793.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/78793.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Android Studio for Platform(ASFP)真機調試

連接設備 由于ubuntu連接adb設備每次都需要配置usb權限,很麻煩。并且每次換設備還要重新配置,我多數設備都是用wifi的adb方式連接。 開發板顯示 連接顯示器配合usb鼠標或者遙控器操作(因為開發板默認開啟了adb,我這里是使用有線…

基于springboot+vue的健康健身追蹤系統

開發語言:Java框架:springbootJDK版本:JDK1.8服務器:tomcat7數據庫:mysql 5.7數據庫工具:Navicat11開發軟件:eclipse/myeclipse/ideaMaven包:Maven3.3.9 系統展示 用戶信息管理 健…

Ubuntu下安裝vsode+qt搭建開發框架(一)

Ubuntu下安裝vsode+qt搭建開發框架(一) g++的編譯環境,這里不介紹,可點擊這里查看 查看一下當前的g++環境 g++ --version g++ (Ubuntu 11.4.0-1ubuntu1~22.04) 11.4.0 Copyright (C) 2021 Free Software Foundation, Inc. This is free software; see the source for copyin…

php 需要學會哪些技術棧,掌握哪些框架

作為一個「野生」程序員,我的學習過程比較急功近利。 我記得自己寫的第一個 PHP 程序是留言本。一上來對 PHP 一竅不通,所以直接去網上找了個留言本的源碼,下載下來后先想辦法讓它在自己電腦上運行起來。通過這個過程掌握了 PHP 開發環境的搭…

近期實踐總結

一、計算機二級考試到底教會了我們什么? 1、概況 根據本人復習、考試的經驗,不難發現里面的試題或多或少有些死板(甚至可以說落后于時代),當今時代已經不是二十年前什么都需要手搓的時代了,引擎、集成類軟…

js day8

事件綁定 事件:發生在html元素上的特定動作,鼠標點擊,鍵盤按下,鼠標移入 事件三要素:事件源(觸發事件的元素) 事件類型,事件觸發后執行的函數 通過html觸發事件(不建議…

3.3 Spring Boot文件上傳

在 Spring Boot 項目中實現文件上傳功能,首先創建項目并添加依賴,包括 Commons IO 用于文件操作。接著,創建文件上傳控制器 FileUploadController,定義上傳目錄并實現文件上傳邏輯,通過生成唯一文件名避免文件沖突。創…

Spring的xxxAware接口工作原理-筆記

1.Aware 接口的工作原理 Spring 提供了多個 XXXAware 接口(如 ApplicationEventPublisherAware、ApplicationContextAware、BeanFactoryAware 等),這些接口的核心作用是讓 Bean 在初始化過程中自動獲取特定的依賴。 實現 Aware 接口的 Bean…

Docker可用鏡像

加速域名 https://docker.sunzishaokao.comDockerHub鏡像加速器 - 免費Docker鏡像源國內加速 - DockerHub加速國內解決方案https://docker.1ms.runhttps://docker.1panel.livehttps://hub.rat.devhttps://docker.wanpeng.tophttps://doublezonline.cloudhttps://docker.mrxn.ne…

__proto__與prototype

__proto__與prototype的區別 基本概念剖析 #mermaid-svg-DXCtqoVX4u7x2Amd {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-DXCtqoVX4u7x2Amd .error-icon{fill:#552222;}#mermaid-svg-DXCtqoVX4u7x2Amd .error-tex…

在阿里云實例上部署通義千問QwQ-32B推理模型

通義千問QwQ-32B是阿里云開源的320億參數推理模型,通過大規模強化學習在數學推理、編程及通用任務中實現性能突破,支持消費級顯卡本地部署,兼顧高效推理與低資源消耗。 本文將介紹如何利用vLLM作為通義千問QwQ-32B模型的推理框架,在一臺阿里云GPU實例上構建通義千問QwQ-32…

SpringBoot獲取用戶信息常見問題(密碼屏蔽、駝峰命名和下劃線命名的自動轉換)

文章目錄 一、不返回password字段二、返回的createTime和updateTime為空原因解決:開啟駝峰命名和下劃線命名的自動轉換 一、不返回password字段 在字段上面添加JsonIgnore注解即可 JsonIgnore // 在把對象序列化成json字符串時,忽略該字段 private Str…

北斗導航 | 北斗衛星導航單點定位與深度學習結合提升精度

以下是北斗衛星導航單點定位(SPP)與深度學習結合提升精度的關鍵方法總結,綜合了誤差建模、信號識別、動態環境適應等技術方向: 一、非直射信號(NLOS)抑制與權重修正 1. 雙自注意力網絡(Dual Self-Attention Network) 原理:通過同時建模衛星信號的空間環境特征(如天空…

PostSwigger 的 CSRF 漏洞總結

本文所提供的關于 web 安全的相關信息、技術講解及案例分析等內容,僅用于知識分享與學術交流目的,旨在提升讀者對 web 安全領域的認知與理解。以下僅僅是作者對 PostSwigger Web 安全的知識整理和分享,嚴禁任何非法犯罪活動。 限制 CSRF 的三…

shell命令一

&> /dev/null yum -y install vsftpd &> /dev/null&> /dev/null &>:將命令的**標準輸出(stdout)和標準錯誤(stderr)**同時重定向。/dev/null:Linux中的“黑洞”設備&#xf…

Weiss Robotics的WPG與WSG系列緊湊型機器人夾爪,精準、靈活、高效

在自動化和智能制造領域,Weiss Robotics 以其創新的智能抓取系統而受到廣泛認可。本文將重點介紹 Weiss Robotics 的兩大產品系列:WPG 系列和 WSG 系列。這些產品系列憑借其先進的技術特性,為各行各業的自動化需求提供了高效、靈活的解決方案…

感受野(??Receptive Field??)

感受野(??Receptive Field??)是卷積神經網絡(CNN)中??一個神經元在輸入圖像上能“看到”的區域范圍??。簡單來說,它表示某個特征圖中的像素點,對應原始輸入圖像中的多大區域。 ??舉個栗子&#x…

真.從“零”搞 VSCode+STM32CubeMx+C <2>調試+燒錄

目錄 前言 準備工作 Daplink連接 調試配置(cortex-debug) 燒錄配置 坑點 前言 昨天有驚無險的構建了一個簡單的閃燈程序,今天來挑戰下調試燒錄,看看有什么坑。 準備工作 OpenOCD下載:openocd-xpackDaplink調試器…

ES6 Map/WeakMap/Set/WeakSet 全解指南

一、設計思想與核心概念 1. 解決傳統結構的痛點 Object:鍵只能是字符串/Symbol、無序、無size屬性Array:查找效率低(O(n))、無自動去重機制核心突破:// 傳統方式 vs ES6方式 const obj { [{}]: value }; // 鍵會被轉為"[object Obje…

算法篇-----滑動窗口

1.概念 所謂的滑動窗口,就是我們之前的雙指針的一個擴展應用,在上一章中,我們的雙指針是相向而行的,而這里的雙指針是同向而行的,由于其移動過程中像一個窗口一樣來回滑動,時大時小,而且還會來…