功能强大的纯前端 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>
以下是我按照以上步骤操作的完整代码:
<!DOCTYPE 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>
效果如下:
简单编辑了一些单元格,修改字体,颜色,尝试了自动填充功能。
从开发者的角度来看,Luckysheet对于开发者比较友好,文档完善、API简洁,几行代码就能创建一个在线表格了;
从用户角度来看,Luckysheet保持了和excel一致的操作体验(有一些excel的功能还未实现),不需要用户再去额外进行学习,这样也能吸引更多的人来使用。
项目开始的时间不长,后续还会推出更多更好用、更丰富的功能,有兴趣的同学可以持续关注这个项目的情况。
- EOF -
更多优秀开源项目(点击下方图片可跳转)
如果觉得本文介绍的开源项目不错,欢迎转发推荐给更多人。
分享、点赞和在看
支持我们分享更多优秀开源项目,谢谢!