|
|
|
|
移动端

再见Excel!超强国产开源在线表格Luckysheet走红GitHub

今天,猿妹要和大家推荐一款功能强大、配置简单、完全开源的用纯JavaScript编写的前端表格库,对它的评价只有【用它!】

作者:猿妹来源:开源最前线|2020-10-16 12:05

 目前比较流行的办公应用主要有Excel、WPS、石墨文档等等,今天,猿妹要和大家推荐一款功能强大、配置简单、完全开源的用纯JavaScript编写的前端表格库,对它的评价只有【用它!】

Luckysheet具备了大部分Excel中的常用功能,比如文字与单元格的样式调整与公式的使用等。除此之外还提供了独有的复制时转换格式(比如 json 等)以及其他格式的数据导入导出等,可以说Excel具备的常用功能它也都有了。

此外,因为Luckysheet采用纯JavaScript编写,因此它可以嵌入到任何前端项目或应用程序中,便于实现集成和自动化。不过在图表方面现在只支持了常用的ECharts,其他图表框架需要等待以后陆续支持。

目前,Luckysheet已经在GitHub上标星3.9K,累计分支292(GitHub地址:https://github.com/mengshukeji/Luckysheet/blob/master/README-zh.md)

整体架构

首先我们一起来看看Luckysheet的格式,一个完整的Luckysheet表格文件的数据格式为:luckysheetfile,一个表格文件包含若干个sheet文件,对应excel的sheet0、sheet1等。

一个Luckysheet文件的示例如下,该表格包含3个sheet:luckysheetfile = [ {sheet1设置}, {sheet2设置}, {sheet3设置} ] 相当于excel的3个sheet

文件中的一个sheet的数据luckysheetfile[0]的结构如下:

  1.     "name""Cell"//工作表名称 
  2.     "color"""//工作表颜色 
  3.     "index""0"//工作表索引 
  4.     "status""1"//激活状态 
  5.     "order""0"//工作表的顺序 
  6.     "hide"0,//是否隐藏 
  7.     "row"36//行数 
  8.     "column"18//列数 
  9.     "config": { 
  10.         "merge":{}, //合并单元格 
  11.         "rowlen":{}, //表格行高 
  12.         "columnlen":{}, //表格列宽 
  13.         "rowhidden":{}, //隐藏行 
  14.         "colhidden":{}, //隐藏列 
  15.         "borderInfo":{}, //边框 
  16.     }, 
  17.     "celldata": [], //初始化使用的单元格数据 
  18.     "data": [], //更新和存储使用的单元格数据 
  19.     "scrollLeft"0//左右滚动条位置 
  20.     "scrollTop"315//上下滚动条位置 
  21.     "luckysheet_select_save": [], //选中的区域 
  22.     "luckysheet_conditionformat_save": {},//条件格式 
  23.     "calcChain": [],//公式链 
  24.     "isPivotTable":false,//是否数据透视表 
  25.     "pivotTable":{},//数据透视表设置 
  26.     "filter_select": {},//筛选范围 
  27.     "filter"null,//筛选配置 
  28.     "luckysheet_alternateformat_save": [], //交替颜色 
  29.     "luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色     
  30.     "freezen": {}, //冻结行列 
  31.     "chart": [], //图表配置 
  32.     "visibledatarow": [], //所有行的位置 
  33.     "visibledatacolumn": [], //所有列的位置 
  34.     "ch_width"2322//工作表区域的宽度 
  35.     "rh_height"949//工作表区域的高度 
  36.     "load""1"//已加载过此sheet的标识 

在chrome的console中查看 luckysheet.getluckysheetfile() 可以看到完整设置 [{shee1}, {sheet2}, {sheet3}]

使用方法

第一步,引入依赖,有2种方式:

CDN

  1. <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' /> 
  2.  
  3. <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' /> 
  4.  
  5. <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' /> 
  6.  
  7. <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script> 
  8.  
  9. <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script> 

注意,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,还可以采用本地方式引入

本地引入

npm run build后dist文件夹下的所有文件复制到项目目录,然后通过相对路径引入

  1. <link rel='stylesheet' href='./plugins/css/pluginsCss.css' /> 
  2.  
  3. <link rel='stylesheet' href='./plugins/plugins.css' /> 
  4.  
  5. <link rel='stylesheet' href='./css/luckysheet.css' /> 
  6.  
  7. <script src="./plugins/js/plugin.js"></script> 
  8.  
  9. <script src="./luckysheet.umd.js"></script> 

第二步,指定一个表格容器

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

第三步,创建表格

  1. <script> 
  2.  
  3. $(function () { 
  4.  
  5. //配置项 
  6.  
  7. var options = { 
  8.  
  9. container: 'luckysheet' //luckysheet为容器id 
  10.  
  11.  
  12. luckysheet.create(options) 
  13.  
  14. }) 
  15.  
  16. </script> 

其实LuckysheetDocs的使用方式和Excel差别并不大,就连快捷键也是一样的:

最后附上在线DEMO体验:

【编辑推荐】

  1. 腾讯向开放原子开源基金会捐赠TencentOS tiny、TKEStack两大项目
  2. 用这8种开源工具,机器学习超轻松
  3. 5个趋势推动Gartner 2020年客户服务和支持技术成熟度曲线
  4. 物联网机器人技术在制造和医疗保健中的应用
  5. 分享几个国外编程技术交流网站
【责任编辑:张燕妮 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢
24H热文
一周话题
本月获赞

订阅专栏+更多

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

20人订阅学习

数据中心和VPDN网络建设案例

数据中心和VPDN网络建设案例

漫画+案例
共20章 | 捷哥CCIE

182人订阅学习

搭建数据中心实验Lab

搭建数据中心实验Lab

实验平台Datacenter
共5章 | ITGO(老曾)

112人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微