基于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.mzph.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.概念 所谓的滑动窗口,就是我们之前的双指针的一个扩展应用,在上一章中,我们的双指针是相向而行的,而这里的双指针是同向而行的,由于其移动过程中像一个窗口一样来回滑动,时大时小,而且还会来…