luckysheet的使用

前言

公司新需求要一个在线的excel编辑器

一、luckysheet是什么?

LuckySheet是一款基于Web的在线表格组件,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源结合Vue3可以实现数据的动态展示和编辑,为用户提供良好的用户体验。

二、使用步骤

1.引入库

有两种方式,第一种是直接通过npm下载

npm install luckysheet

第二种是将luckysheet下载到本地之后打包之后在引入(我会在另一篇文章中写怎么打包)

<link rel='stylesheet' href='./luckysheet/plugins/css/pluginsCss.css' /><link rel='stylesheet' href='./luckysheet/plugins/plugins.css' /><link rel='stylesheet' href='./luckysheet/css/luckysheet.css' /><link rel='stylesheet' href='./luckysheet/assets/iconfont/iconfont.css' /><script src="./luckysheet/plugins/js/plugin.js"></script><script src="./luckysheet/luckysheet.umd.js"></script>

 

(将打包后的包放在public中)

2.使用

let options={container: "luckysheet", // 设定DOM容器的idtitle: "原始记录表格", // 设定表格名称lang: "zh", // 设定表格语言,gridKey: "luckysheet",showtoolbar: true, //是否显示工具栏functionButton:'<button id="myElement" class="btn"  style="padding:3px 6px;font-size: 12px;margin-right: 10px;">保存</button>',showtoolbarConfig: {undoRedo: true, //撤销重做,注意撤消重做是两个按钮,由这一个配置决定显示还是隐藏paintFormat: true, //格式刷currencyFormat: true, //货币格式percentageFormat: true, //百分比格式numberDecrease: true, // '减少小数位数'numberIncrease: true, // '增加小数位数moreFormats: true, // '更多格式'font: true, // '字体'fontSize: true, // '字号大小'bold: true, // '粗体 (Ctrl+B)'italic: true, // '斜体 (Ctrl+I)'strikethrough: true, // '删除线 (Alt+Shift+5)'underline: true, // '下划线 (Alt+Shift+6)'textColor: true, // '文本颜色'fillColor: true, // '单元格颜色'border: true, // '边框'mergeCell: true, // '合并单元格'horizontalAlignMode: true, // '水平对齐方式'verticalAlignMode: true, // '垂直对齐方式'textWrapMode: true, // '换行方式'textRotateMode: true, // '文本旋转方式'image: true, // '插入图片'link: true, // '插入链接'chart: true, // '图表'(图标隐藏,但是如果配置了chart插件,右击仍然可以新建图表)postil: true, //'批注'pivotTable: true, //'数据透视表'function: true, // '公式'frozenMode: true, // '冻结方式'sortAndFilter: true, // '排序和筛选'conditionalFormat: true, // '条件格式'dataVerification: true, // '数据验证'splitColumn: true, // '分列'screenshot: true, // '截图'findAndReplace: true, // '查找替换'protection: true, // '工作表保护'(解除保护密码为admin)print: false, // '打印'},showsheetbar: false,showsheetbarConfig: {add: true, //新增sheetmenu: true, //sheet管理菜单sheet: true, //sheet页显示},data: [{name: "测试",celldata: [],},],}
window.luckysheet.create(options);

其中options里面的functionButton需要注意下只能用javascript的点击事件

//事件写在luckysheet初始化之后
//myElement为functionButton中的button的idconst element = document.getElementById("myElement");
// 为该元素添加点击事件监听器element.addEventListener("click", function () {});

填充进表格中的数据需要转化为二维数据

 let array= [['iii','uuuuu'],['1111','2222']]options.data[0].celldata=window.luckysheet.transToCellData(array)

总结 

luckysheet的文档地址为https://mengshukeji.gitee.io/luckysheetdocs/zh/ 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/847469.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年澳大利亚科学院新增院士名单和两位华人学者简介

近日&#xff0c;澳大利亚科学院公布了2024年新当选的24位院士名单&#xff0c;他们也是访问学者、博士后及联合培养博士们关注的目标导师。为此知识人网小编推出该文&#xff0c;以飨读者。 5月 23 日&#xff0c;2024年澳大利亚科学院&#xff08;the Australian Academy of…

Java面试题-Tomcat初级面试题

Tomcat是什么&#xff1f;请简述它的主要功能。 Tomcat是一个开源的Web应用服务器&#xff0c;由Apache软件基金会开发。它是一个实现了Java Servlet和JavaServer Pages&#xff08;JSP&#xff09;技术的容器&#xff0c;用于处理客户端的请求并返回响应。Tomcat的主要功能如…

【企业开发】大屏的响应式处理

【企业开发】大屏的响应式处理 如图&#xff1a; 响应式工具封装 // 等比缩放方式屏幕适配 export function screenAdaptive(designWidth 1920, designHeight 1080) {const screenWidth document.documentElement.clientWidth || document.body.clientWidthconst screenHeig…

【数据结构】 排序算法总结,直接选择排序详解!

文章目录 1. 排序几个重点概念的理解2. 排序算法的分析&#x1f427;3.直接选择排序 1. 排序几个重点概念的理解 2. 排序算法的分析&#x1f427; 3.直接选择排序 &#x1f427; begin 有可能就是 maxi &#xff0c;所以交换的时候&#xff0c;要及时更新 maxi &#x1f34e;…

各种源码文件的扩展名

各种源码文件的扩展名(/后缀名) (0) java : .java 。 (0) OC : .h 和 .m 。 (0) Swift : .swift 。 (0) C语言和C :  .h //头文件&#xff08;主要是函数声明、结构声明、常量定义等&#xff09;。  .c //源文件&#xff0c;函数实现。  .exe //可执行…

java同步

Java中的同步是指在多线程编程中&#xff0c;用来控制多个线程对共享资源的访问&#xff0c;以避免数据不一致的问题。Java提供了多种同步机制来确保线程安全。以下是Java同步的详细讲解&#xff1a; 1. synchronized关键字 synchronized关键字是Java中最常见的同步机制&…

计算机专业本科就业还是考研?考研有哪些热门方向?

考研并不是一个逃避就业的避难所&#xff0c;也不是一个简单的提升待遇的手段。考研是提升自我的途径&#xff0c;特别是对于那些对特定技术领域有浓厚兴趣并愿意深入研究的人来说 一个本科生能够认真学三年&#xff0c;那么他们所掌握的技能和知识不应该逊色于那些通过短期培…

Python检测变量:深入剖析与实战应用

Python检测变量&#xff1a;深入剖析与实战应用 在Python编程中&#xff0c;变量的检测是一个基础且重要的任务。无论是进行数据分析、机器学习还是Web开发&#xff0c;我们都需要对变量进行各种形式的检测&#xff0c;以确保程序的正确性和稳定性。本文将从四个方面、五个方面…

Solidworks 提取模型中的零件,并组合成一个新的零件,放入特征库

对方发来一个STP文件&#xff0c;其中有模型的部分零件想为我所用。 Shift键鼠标左键 选取需要的零件 在选好零件上右键&#xff0c;选择“孤立” 左边找到部件&#xff0c;ctrl左键选中&#xff0c;选择“插入到新零件” 点 绿色 勾 就选择保存类型&#xff0c;完成 。 打开这…

Pyinstaller安装与使用

一、Pyinstaller简介 PyInstaller将Python应用程序冻结(打包)独立可执行文件中。它可以构建较小的可执行文件,它是完全多平台的,并且使用OS支持来加载动态库,从而确保完全兼容。 二、Pyinstaller安装 1、下载安装 首先安装“pip install pywin32” 其次“pip install …

JAVA--IO流2(缓冲流、转换流、序列化流、打印流、Properties、IO工具包)

缓冲流 字节缓冲流 BufferedOutputStream:字节缓冲输出流 构造:BufferedOutputStream(OutputStream out) 使用:和FileOutputStream一样 BufferedInputStream:字节缓冲输入流 构造:BufferedInputStream(InputStream in) 使用:和FileInputStream一样 问题1:使用缓冲流的时候,为…

设备维修管理系统

设备维修管理系统是一个集故障处理、巡检处理、设备管理、维修管理、系统管理以及手机客户端功能等六大功能于一体的信息化管理系统。该系统旨在实现设备管理的科学化、规范化和网络化&#xff0c;通过整合设备维修的各个环节和流程&#xff0c;提高设备维修的效率和质量&#…

serverless记录

将算法部署到云平台 1、选择云平台&#xff1a;首先&#xff0c;需要选择一个合适的云平台&#xff0c;如阿里云、腾讯云、华为云等&#xff0c;根据项目的需求和预算选择合适的云服务提供商 2、准备算法代码&#xff1a;将算法代码准备好&#xff0c;确保代码可以在云平台上…

代码随想录35期Day60-JavaScript

Day60题目 60天打卡最后一天 LeetCode84柱状图中最大面积 核心思想:当当前遍历到的元素小于栈顶元素的时候,此时栈顶元素最大面积就是自身面积,然后while向左移动,如果左边的值大于当前遍历到的元素,可以得到中间两个的元素最大矩形面积(左边的高度*2) 理解了下面这个用例,就…

网络安全||信息加解密技术以及密钥管理技术

一、信息加解密技术 对称加密 对称加密&#xff08;又称为私人密钥加密/共享密钥加密&#xff09;&#xff1a;加密与解密使用同一密钥。特点&#xff1a;加密强度不高&#xff0c;但效率高&#xff1b;密钥分发困难。&#xff08;大量明文为了保证加密效率一般使用对称加密&…

GAT1399协议分析(二)--注册流程分析

一、官方流程说明 二、官方流程解析 1 : 发起方向接收方发送注册 HTTP POST 请求/VIID/System/Register。 2: 接收方向发送方发送响应401 Unauthorized, 并在响应的消息头 WWW-Authenticate 字段中给 出适合发送方的认证机制和参数。 3: 发起方重新向接收方发送注册 HTTP POST…

单实例11.2.0.4迁移到11.2.0.4RAC_使用rman异机恢复

保命法则&#xff1a;先备份再操作&#xff0c;磁盘空间紧张无法备份就让满足&#xff0c;给自己留退路。 场景说明&#xff1a; 1.本文档的环境为同平台、不同版本&#xff08;操作系统版本可以不同&#xff0c;数据库版本相同&#xff09;&#xff0c;源机器和目标机器部分…

解锁阿里巴巴API接口的无限可能:打造你的电商、物流、支付新纪元

Alibaba API接口是Alibaba平台对外开放的一系列编程接口&#xff0c;开发者可以通过这些接口访问Alibaba平台的数据和功能&#xff0c;如商品搜索、订单管理、支付接口等。这些接口基于HTTP/HTTPS协议&#xff0c;支持多种编程语言和数据格式&#xff08;如JSON、XML等&#xf…

【设计模式】JAVA Design Patterns——Observer(观察者模式)

&#x1f50d;目的 定义一种一对多的对象依赖关系这样当一个对象改变状态时&#xff0c;所有依赖它的对象都将自动通知或更新。 &#x1f50d;解释 真实世界例子 在遥远的土地上生活着霍比特人和兽人的种族。他们都是户外生活的人所以他们密切关注天气的变化。可以说他们不断地…

深度解析ChatGPT原理

深度解析ChatGPT原理 ChatGPT是基于OpenAI的生成式预训练变换器&#xff08;GPT&#xff09;模型的自然语言处理技术。它通过大规模预训练和微调来生成高质量的自然语言文本。本文将详细探讨ChatGPT的技术原理&#xff0c;包括其架构、训练过程、生成机制和应用场景&#xff0…