Excel？最强国产开源在线表格 Luckysheet 走红GitHub！

阳光穿透心脏的1/2处 2022-12-17 08:42 291阅读 0赞

来源：Python数据科学

目前比较流行的办公应用主要有Excel、WPS、石墨文档等等。

今天，要和大家推荐一款功能强大、配置简单、完全开源的用纯 JavaScript 编写的前端表格库！

![format_png][]

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

![format_png 1][]

![format_png 2][]

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

![format_png 3][]

目前，Luckysheet已经在GitHub上标星**4.2K**，累计分支**292。**

GitHub地址：https://github.com/mengshukeji/Luckysheet/blob/master/README-zh.md

在线文档：https://mengshukeji.gitee.io/luckysheetdocs/zh/

**整体架构**

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

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

![format_png 4][]

文件中的一个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": [], //更新和存储使用的单元格数据
        "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中查看 luckysheet.getluckysheetfile() 可以看到完整设置 \[\{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，还可以采用本地方式引入。

**本地引入**

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

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

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

**第三步，**创建表格

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

![format_png 5][]

**DEMO 体验**

![format_png 6][]

![format_png 7][]

*  **添加好友回复“****进群****”，加入交流群**

![format_png 8][]

![format_png 9][]

好文章，我 在看❤

[format_png]: /images/20221122/ae65613f4b5247dd8993bf1ed189f2ce.png
[format_png 1]: /images/20221122/5d3ae862ae0943b1920105126fa6bbbf.png
[format_png 2]: /images/20221122/67c7ed747e7540e99bea8a80a71d5217.png
[format_png 3]: /images/20221122/5d33e94e9ddf4937be94ef3136549ca5.png
[format_png 4]: /images/20221122/b567c4b962a64e61984acd611781d445.png
[format_png 5]: /images/20221122/4369cafdc2334095893d6ddae6ea8e76.png
[format_png 6]: /images/20221122/3df618703f25474fa0f1e15e47b93a98.png
[format_png 7]: /images/20221122/db74d8853f8840d6934ef76febcfb256.png
[format_png 8]: /images/20221122/e0c0fe0e3cf64ce0a0cbc233003d3a65.png
[format_png 9]: /images/20221122/c380ea792d2c494ba11a605578c95aee.png