美图齐众专注资阳网站设计 资阳网站制作 资阳网站建设
资阳网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

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

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

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

使用方法

第一步，引入依赖，有2种方式：

CDN

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.  
    10.

注意，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.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.  
    10.

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

第三步，创建表格

 
 
 
 
      
  
  
  
  1.  
    2.

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

最后附上在线DEMO体验：


当前名称：再见Excel！超强国产开源在线表格Luckysheet走红GitHub
网页网址：http://www.zsjierui.cn/article/djiejdp.html

其他资讯