目前比較流行的辦公應(yīng)用主要有Excel、WPS、石墨文檔等等，今天，猿妹要和大家推薦一款功能強(qiáng)大、配置簡(jiǎn)單、完全開(kāi)源的用純JavaScript編寫(xiě)的前端表格庫(kù)，對(duì)它的評(píng)價(jià)只有【用它!】

Luckysheet具備了大部分Excel中的常用功能，比如文字與單元格的樣式調(diào)整與公式的使用等。除此之外還提供了獨(dú)有的復(fù)制時(shí)轉(zhuǎn)換格式(比如 json 等)以及其他格式的數(shù)據(jù)導(dǎo)入導(dǎo)出等，可以說(shuō)Excel具備的常用功能它也都有了。

此外，因?yàn)長(zhǎng)uckysheet采用純JavaScript編寫(xiě)，因此它可以嵌入到任何前端項(xiàng)目或應(yīng)用程序中，便于實(shí)現(xiàn)集成和自動(dòng)化。不過(guò)在圖表方面現(xiàn)在只支持了常用的ECharts，其他圖表框架需要等待以后陸續(xù)支持。

目前，Luckysheet已經(jīng)在GitHub上標(biāo)星3.9K，累計(jì)分支292(GitHub地址：

https://github.com/mengshukeji/Luckysheet/blob/master/README-zh.md)

整體架構(gòu)

首先我們一起來(lái)看看Luckysheet的格式，一個(gè)完整的Luckysheet表格文件的數(shù)據(jù)格式為：luckysheetfile，一個(gè)表格文件包含若干個(gè)sheet文件，對(duì)應(yīng)excel的sheet0、sheet1等。

一個(gè)Luckysheet文件的示例如下，該表格包含3個(gè)sheet：luckysheetfile = [ {sheet1設(shè)置}, {sheet2設(shè)置}, {sheet3設(shè)置} ] 相當(dāng)于excel的3個(gè)sheet

文件中的一個(gè)sheet的數(shù)據(jù)luckysheetfile[0]的結(jié)構(gòu)如下：

{ 
    "name": "Cell", //工作表名稱 
    "color": "", //工作表顏色 
    "index": "0", //工作表索引 
    "status": "1", //激活狀態(tài) 
    "order": "0", //工作表的順序 
    "hide": 0,//是否隱藏 
    "row": 36, //行數(shù) 
    "column": 18, //列數(shù) 
    "config": { 
        "merge":{}, //合并單元格 
        "rowlen":{}, //表格行高 
        "columnlen":{}, //表格列寬 
        "rowhidden":{}, //隱藏行 
        "colhidden":{}, //隱藏列 
        "borderInfo":{}, //邊框 
    }, 
    "celldata": [], //初始化使用的單元格數(shù)據(jù) 
    "data": [], //更新和存儲(chǔ)使用的單元格數(shù)據(jù) 
    "scrollLeft": 0, //左右滾動(dòng)條位置 
    "scrollTop": 315, //上下滾動(dòng)條位置 
    "luckysheet_select_save": [], //選中的區(qū)域 
    "luckysheet_conditionformat_save": {},//條件格式 
    "calcChain": [],//公式鏈 
    "isPivotTable":false,//是否數(shù)據(jù)透視表 
    "pivotTable":{},//數(shù)據(jù)透視表設(shè)置 
    "filter_select": {},//篩選范圍 
    "filter": null,//篩選配置 
    "luckysheet_alternateformat_save": [], //交替顏色 
    "luckysheet_alternateformat_save_modelCustom": [], //自定義交替顏色     
    "freezen": {}, //凍結(jié)行列 
    "chart": [], //圖表配置 
    "visibledatarow": [], //所有行的位置 
    "visibledatacolumn": [], //所有列的位置 
    "ch_width": 2322, //工作表區(qū)域的寬度 
    "rh_height": 949, //工作表區(qū)域的高度 
    "load": "1", //已加載過(guò)此sheet的標(biāo)識(shí) 
} 

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

使用方法

第一步，引入依賴，有2種方式：

CDN

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' /> 
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' /> 
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' /> 
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script> 

注意，https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js這個(gè)路徑會(huì)拉取到最新的luckysheet代碼，想要指定luckysheet版本，請(qǐng)?jiān)趌uckysheet后面加上版本號(hào)，如：https://cdn.jsdelivr.net/npm/luckysheet@2.0.0/dist/luckysheet.umd.js

如果不方便訪問(wèn) jsdelivr.net，還可以采用本地方式引入

本地引入

npm run build后dist文件夾下的所有文件復(fù)制到項(xiàng)目目錄，然后通過(guò)相對(duì)路徑引入

<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> 

第二步，指定一個(gè)表格容器

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

第三步，創(chuàng)建表格

<script> 
    $(function () { 
        //配置項(xiàng) 
        var options = { 
            container: 'luckysheet' //luckysheet為容器id 
        } 
        luckysheet.create(options) 
    }) 
</script> 

其實(shí)LuckysheetDocs的使用方式和Excel差別并不大，就連快捷鍵也是一樣的：