再见Excel！最强国产开源在线表格Luckysheet⾛红GitHub （给机器学习算法与Python学习加星标，提升AI技能）
⽬前⽐较流⾏的办公应⽤主要有Excel、WPS、⽯墨⽂档等等，今天推荐⼀款功能强⼤、配置简单、完全开源的⽤纯JavaScript编写的前端表格库，对它的评价只有【⽤它！】
Luckysheet具备了⼤部分Excel中的常⽤功能，⽐如⽂字与单元格的样式调整与公式的使⽤等。除此之外还提供了独有的复制时转换格式（⽐如 json 等）以及其他格式的数据导⼊导出等，可以说Excel具备的常⽤功能它也都有了。
此外，因为Luckysheet采⽤纯JavaScript编写，因此它可以嵌⼊到任何前端项⽬或应⽤程序中，便于实现集成和⾃动化。不过在图表⽅⾯现在只⽀持了常⽤的ECharts，其他图表框架需要等待以后陆续⽀持。
整体架构
⾸先我们⼀起来看看Luckysheet的格式，⼀个完整的Luckysheet表格⽂件的数据格式为：luckysheetfile，⼀个表格⽂件包含若⼲个sheet⽂件，对应excel的sheet0、sheet1等。
⼀个Luckysheet⽂件的⽰例如下，该表格包含3个sheet：luckysheetfile = [ {sheet1设置}, {sheet2设置}, {sheet3设置} ] 相当于excel 的3个sheet
⽂件中的⼀个sheet的数据luckysheetfile[0]的结构如下：
{
"name": "Cell", //⼯作表名称
"color": "", //⼯作表颜⾊
"index": "0", //⼯作表索引
"status": "1", //激活状态
"order": "0", //⼯作表的顺序
"hide": 0,//是否隐藏
"row": 36, //⾏数
"column": 18, //列数
"config": {
"merge":{}, //合并单元格
"rowlen":{}, //表格⾏⾼
"columnlen":{}, //表格列宽
"rowhidden":{}, //隐藏⾏
"colhidden":{}, //隐藏列
"borderInfo":{}, //边框
},
"celldata": [], //初始化使⽤的单元格数据
"data": [], //更新和存储使⽤的单元格数据
excel最强教科书完全版pdf"scrollLeft": 0, //左右滚动条位置
"scrollTop": 315, //上下滚动条位置
"luckysheet_select_save": [], //选中的区域
"luckysheet_conditionformat_save": {},//条件格式
"calcChain": [],//公式链
"isPivotTable":false,//是否数据透视表
"pivotTable":{},//数据透视表设置
"filter_select": {},//筛选范围
"filter": null,//筛选配置
"luckysheet_alternateformat_save": [], //交替颜⾊
"luckysheet_alternateformat_save_modelCustom": [], //⾃定义交替颜⾊
"freezen": {}, //冻结⾏列
"chart": [], //图表配置
"visibledatarow": [], //所有⾏的位置
"visibledatacolumn": [], //所有列的位置
"ch_width": 2322, //⼯作表区域的宽度
"rh_height": 949, //⼯作表区域的⾼度
"load": "1", //已加载过此sheet的标识
}
在chrome的console中查看 luckysheetfile() 可以看到完整设置 [{shee1}, {sheet2}, {sheet3}]
使⽤⽅法
第⼀步，引⼊依赖，有2种⽅式：
CDN
<link rel='stylesheet' href='cdn.jsdelivr/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='cdn.jsdelivr/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='cdn.jsdelivr/npm/luckysheet/dist/css/luckysheet.css' />
<script src="cdn.jsdelivr/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="cdn.jsdelivr/npm/luckysheet/dist/luckysheet.umd.js"></script>
如果不⽅便访问 jsdelivr，还可以采⽤本地⽅式引⼊
本地引⼊
npm run build后dist⽂件夹下的所有⽂件复制到项⽬⽬录，然后通过相对路径引⼊
<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>
第⼆步，指定⼀个表格容器
<div id="luckysheet" ></div>第三步，创建表格
<script>
$(function () {
//配置项
var options = {
container: 'luckysheet' //luckysheet为容器id
}
})
</script>
其实LuckysheetDocs的使⽤⽅式和Excel差别并不⼤，就连快捷键也是⼀样的：
最后附上在线DEMO体验：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。