excel在线_功能强大的纯前端 Excel 在线表格: Luckysheet

【导语】:Luckysheet是一款类似excel的在线表格,纯前端,功能强大、配置简单、完全开源,几行代码就能展现出一个功能完备的在线表格。

简介

Luckysheet是一款类似excel的纯前端在线表格,只需要引入js和css文件即可使用。Luckysheet保持了和excel一致的操作体验,样式、快捷键、函数等,都与excel的操作方式一致,用户没有额外的学习成本。Luckysheet目前还在持续的迭代演进中,已经实现的功能包括:

1.格式设置。包括字体、字号、颜色、文本对齐、自动换行以及excel支持的各种数据类型

2.单元格。拖拽选取、下拉填充、自动填充、查找替换、合并单元格等。

3.行列。隐藏、插入、删除、冻结。

4.操作。撤销、复制、粘贴、剪切、快捷键、格式刷、筛选排序、批注、共享编辑。

5.函数。内置常见公式,并支持自定义公式。

6.图表。目前支持折线图、柱状图、面积图、条形图、饼图,支持插入图片。

简单使用

项目源码:

https://github.com/mengshukeji/Luckysheet

在线demo:

https://mengshukeji.github.io/LuckysheetDemo

用户手册:

https://mengshukeji.github.io/LuckysheetDocs/

简单尝试一下使用,由于是纯前端,使用起来非常方便,使用CDN引入相关的库,甚至都不需要在自己的环境中安装额外的的东西,新建html页面,引入库,创建方法,就是这么简单。

本地引入库文件:

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

指定一个表格容器:

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;">div>

创建表格:

<script>    $(function () {        //配置项        var options = {            container: 'luckysheet' //luckysheet为容器id        }        luckysheet.create(options)    })script>

以下是我按照以上步骤操作的完整代码:

html><html>  <head>    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />    <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js">script>    <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js">script>  head>  <body>    <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;">div>  body>  <script>      $(function () {          //配置项          var options = {              container: 'luckysheet' //luckysheet为容器id          }          luckysheet.create(options)      })script>html>

效果如下:

4db5642a097745357ef4d357a7aefcc7.png

简单编辑了一些单元格,修改字体,颜色,尝试了自动填充功能。

f32aa81d84ce5146858eed4f47166ed7.png

从开发者的角度来看,Luckysheet对于开发者比较友好,文档完善、API简洁,几行代码就能创建一个在线表格了;

从用户角度来看,Luckysheet保持了和excel一致的操作体验(有一些excel的功能还未实现),不需要用户再去额外进行学习,这样也能吸引更多的人来使用。

项目开始的时间不长,后续还会推出更多更好用、更丰富的功能,有兴趣的同学可以持续关注这个项目的情况。

- EOF - 

更多优秀开源项目(点击下方图片可跳转)

cb7526bbfe5bb67c69221a4ac243440d.png

b24cb0bdf339b924aa429f952bbacebe.png

144e481f251d5988ba098ed23bd94eb2.png


如果觉得本文介绍的开源项目不错,欢迎转发推荐给更多人。

b857ee621fa6963c7da7b558f248ffb8.png

分享、点赞和在看

支持我们分享更多优秀开源项目,谢谢!

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

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

相关文章

STL-queue.back()队尾误区

queue.back()指向最新插入queue中的值&#xff0c;而非队尾元素&#xff0c; 如&#xff1a;queue.pop()多次&#xff0c;并不会影响queue.back()的值。 STL 英文back()解释&#xff1a; reference& back(); const_reference& back() const; Access last element …

u8 和 char如何转化_EXCEL小知识——如何快速实现文本与数值的互相转化

我是前言嗨&#xff0c;大家好&#xff0c;消失了一个多月&#xff0c;我胡汉三&#xff0c;又回来啦~今天给大家带来的&#xff0c;是如何实现文本与数值之间的 “ 快速 ” 转换&#xff01;众所周知&#xff0c;在一些制造类公司&#xff0c;公司的运营离不开一些系统软件的辅…

navicat er图没有连线_迁徙图?流向图?城市关系强度图?

文章首发于公众号「码上GIS」&#xff0c;欢迎关注。文中流向图和城市关系强度图的 ArcMap 10.5 Mxd 工程和数据可在公众号后台回复「190708」和「190709」获取不记得是从哪年开始&#xff0c;每年春运期间&#xff0c;百度都会发布个春运大数据&#xff0c;其中最让人印象深刻…

linux删除文件_Linux中删除特殊名称文件的多种方式

今日分享&#xff1a;我们在肉体的疾病方面花了不少钱&#xff0c;精神的病害方面却没有花什么&#xff0c;现在已经到了时候&#xff0c;我们应该有不平凡的学校。--《瓦尔登湖》前言我们都知道&#xff0c;在linux删除一个文件可以使用rm命令&#xff0c;但是有一些特殊名称的…

Python中的lambda和apply结合使用

1、 lambda lambda原型为&#xff1a;lambda 参数:操作(参数) lambda函数也叫匿名函数&#xff0c;即没有具体名称的函数&#xff0c;它允许快速定义单行函数&#xff0c;可以用在任何需要函数的地方。这区别于def定义的函数。 lambda与def的区别&#xff1a; 1&#xff09;…

软件开发报价模板_定制开发小程序和行业通用(模板)小程序的利弊分析

最近很多掌客多客户来咨询&#xff0c;纠结到底是定制开发小程序还是买个模板通用小程序好&#xff0c;其实在回答这个问题之前&#xff0c;我们先要搞明白什么是定制开发小程序&#xff0c;什么是模板通用小程序&#xff0c;最后再问问自己的搞小程序的目的是什么&#xff1f;…

有十五个数按由大到小顺序存放在一个数组中_「图形化编程」前导知识-数组(一)...

今天我们来学习一个新的概念-数组。这节课将通过一个小程序讲解数组的基本概念-数组的长度和下标定义数组指的是有序元素的集合&#xff0c;数组中的每个元素具有相同的类型&#xff0c;按照顺序排列的形式组织在一起。我们可以把数组想象为一个抽屉柜&#xff0c;每个抽屉只能…

octave错误-error: ‘squareThisNumber‘ undefined near line 1 column 1

.m文件名称也应为大写&#xff1a;squareThisNumber.m 问题2&#xff1a; parse error near line 1 of file C:\Users\asus\squareThisNumber.m syntax error >>> {\rtf1\ansi\ansicpg936\deff0\nouicompat{\fonttbl{\f0\fnil\fcharset134 \cb\ce\cc\e5;}} 解决方案…

python矩阵中找满足条件的元素_Python 找到列表中满足某些条件的元素方法

Python 找到列表中满足某些条件的元素方法 更新时间&#xff1a;2018年06月26日 11:20:17 作者&#xff1a;CS_network 今天小编就为大家分享一篇Python 找到列表中满足某些条件的元素方法&#xff0c;具有很好的参考价值&#xff0c;希望对大家有所帮助。一起跟随小编过来看看…

计算机启动过程-阮一峰

从打开电源到开始操作&#xff0c;计算机的启动是一个非常复杂的过程。 我一直搞不清楚&#xff0c;这个过程到底是怎么回事&#xff0c;只看见屏幕快速滚动各种提示...... 这几天&#xff0c;我查了一些资料&#xff0c;试图搞懂它。下面就是我整理的笔记。 零、boot的含义 …

python神经网络实例_Python编程实现的简单神经网络算法示例

本文实例讲述了Python编程实现的简单神经网络算法。分享给大家供大家参考&#xff0c;具体如下&#xff1a; python实现二层神经网络 包括输入层和输出层 # -*- coding:utf-8 -*- #! python2 import numpy as np #sigmoid function def nonlin(x, deriv False): if(deriv Tru…

由于被认为是客户端对错误(例如:畸形的请求语法、无效的请求信息帧或者虚拟的请求路由),服务器无法或不会处理当前请求。

问题描述&#xff1a; 由于被认为是客户端对错误&#xff08;例如&#xff1a;畸形的请求语法、无效的请求信息帧或者虚拟的请求路由&#xff09;&#xff0c;服务器无法或不会处理当前请求。 在实现向数据库中添加记录时&#xff0c;请求发送无效&#xff0c;参数也未传递到控…

怎么通过id渲染页面_完全理解Vue的渲染watcher、computed和user watcher

作者&#xff1a;Naicehttps://segmentfault.com/a/1190000023196603这篇文章将带大家全面理解vue的watcher、computed和user watcher&#xff0c;其实computed和user watcher都是基于Watcher来实现的&#xff0c;我们通过一个一个功能点去敲代码&#xff0c;让大家全面理解其中…

VS2015启动调试程序变慢

问题描述## 标题 vs2015编译速度很快&#xff0c;运行时不停显示加载xxx.dll动态库&#xff0c;加载很慢 解决方案## 标题 打开vs2015,依次点击工具-》选项-》调试-》符号&#xff0c;点击勾选去掉Microsoft符号服务器&#xff0c;清空符号缓存完毕 转载自VS2015启动调试程序变…

根可达算法的根_我的JVM(六):GC的基础概念以及GC算法

一、概述垃圾收集Garbage Collection通常被称为GC&#xff0c;但是GC一般也指Garbage Collecting(垃圾回收这个动作)或Garbage Collector(垃圾回收器)&#xff0c;这些都是是JVM知识体系中非常重要的知识&#xff0c;也是程序员必须要掌握的技能&#xff0c;本文将详细讲述Java…

docker 删除包含关键字的镜像_30分钟带你轻松掌握Docker原理

前言Docker是什么&#xff1f;Docker是Go语言开发实现的容器。2013年发布至今&#xff0c;备受推崇。相关文档、学习资料十分详尽。近期有docker相关项目&#xff0c;得重新学习一下。博客以笔记为什么要使用 Docker&#xff1f;Docker 容器的启动在秒级Docker 对系统资源利用率…

pads中如何设置等长_如何在SQL Server中设置扩展,监控系统性能

dbForge Studio for SQL Server为有效的探索、分析SQL Server数据库中的大型数据集提供全面的解决方案&#xff0c;并设计各种报表以帮助作出合理的决策。dbForge Studio for SQL Server​www.evget.com扩展事件是一种有用且方便的解决方案&#xff0c;旨在监视您的系统性能。它…

iar stm32_STM32延时函数的四种方法

关注、星标公众号&#xff0c;不错过精彩内容单片机编程过程中经常用到延时函数&#xff0c;最常用的莫过于微秒级延时delay_us()和毫秒级delay_ms()。本文基于STM32F207介绍4种不同方式实现的延时函数。普通延时这种延时方式应该是大家在51单片机时候&#xff0c;接触最早的延…

使用pm2启动node文件_PM2 是什么

目录 pm2是什么特点示例说明配置文件常用命令背景 由于需要在容器云新增一个测试环境&#xff0c;改了代码相关的配置后&#xff0c;进行部署。发现服务一直启动不了。在和运维一起排查问题&#xff0c;他看到pm2的一些信息&#xff0c; 问我pm2是不是阻塞了&#xff0c;并不是…

CP/M世界上第一个微机操作系统

CP/M世界上第一个微机操作系统 微软宣布2014年4月8日将不再对Windows XP系统进行更新&#xff0c;宣告这个存活了13年的史上寿命最长的微机操作系统基本上寿终正寝。很多人都知道这是个脱胎于DOS的系统&#xff0c;也潜意识中认为DOS是微机操作系统的鼻祖。不过&#xff0c;这大…