当前位置: 首页 > 科技观察

再见卓越!超级国产开源在线表格Luckysheet在GitHub走红

时间:2023-03-19 09:51:59 科技观察

目前流行的办公应用主要有Excel、WPS、石墨文档等,今天源美给大家推荐一款功能强大、配置简单、完全开源的纯JavaScript编写的前端表库,对它的评价只有【用它!】Luckysheet拥有Excel中大部分常用的功能,比如文本和单元格的样式调整,公式的使用。此外,它还提供了复制时的独特转换格式(如json等)和其他格式的数据导入导出等,可以说它也具备了Excel常用的功能。此外,由于Luckysheet是用纯JavaScript编写的,它可以嵌入到任何前端项目或应用程序中,以便于集成和自动化。不过在图表方面,目前只支持常用的ECharts,其他图表框架需要等待后续支持。目前,Luckysheet在GitHub上已经被标记了3.9Kstars,累计分支292个(GitHub地址:https://github.com/mengshukeji/Luckysheet/blob/master/README-zh.md)整体结构先,再来看看Luckysheet格式,一个完整的Luckysheet表格文件的数据格式为:luckysheetfile,一个表格文件包含若干个表格文件,对应excel的sheet0、sheet1等。一个Luckysheet文件的例子如下,里面有3个sheet:luckysheetfile=[{sheet1setting},{sheet2setting},{sheet3setting}]相当于excelluckysheetfile[3个sheet文件之一的数据0]结构如下:{"name":"Cell",//工作表名称"color":"",//工作表颜色"index":"0",//工作表索引"status":"1",//激活状态"order":"0",//工作表的顺序"hide":0,//是否隐藏"row":36,//行数"column":18,//列数"config":{"merge":{},//合并单元格"rowlen":{},//表格行高"columnlen":{},//表格列宽"rowhidden":{},//隐藏行"colhidden":{},//隐藏列"borderInfo":{},//border},"celldata":[],//初始化使用的单元格数据"data":[],//updateandStore使用的单元格数据"scrollLeft":0,//左右滚动条位置"scrollTop":315,//上下滚动条位置"luckysheet_select_save":[],//选中区域"luckysheet_conditionformat_save":{},//合作nditionalformat"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的标识已经加载}查看luckysheet.getluckysheetfile()在chrome控制台看到完整设置[{shee1},{sheet2},{sheet3}]如何使用第一步,引入依赖,有2种方式:CDN注意,https://cdn.jsdelivr.net/npm/luckysheet/dist路径/luckysheet.umd.js将拉取最新的luckysheet代码。如果要指定luckysheet版本,请在luckysheet后面加上版本号,如:https://cdn.jsdelivr.net/npm/luckysheet@2.0。0/dist/luckysheet.umd.js如果不方便访问jsdelivr.net,也可以在本地导入。在本地导入npmrunbuild后,将dist文件夹下的所有文件复制到项目目录下,然后通过相对路径stylesheet'href='./plugins/css/pluginsCss.css'/>第二步指定表格容器

第三步创建表格其实LuckysheetDocs的使用和Excel没有太大区别,连快捷键都是一样的:最后附上在线DEMO体验: