1、背景

現在web技術蓬勃發展，辦公應用特別是excel都搬到了線上，比較流行的有騰訊文檔，金山文檔，石墨文檔，google doc，這些都屬于企業服務。但是小型企業或者團隊，如果想自己搭建一套在線表格系統呢？有沒有開源的方案？

當然是有的，一些表格具有相對簡單的功能，只能顯示數據和過濾器功能，或者某些表格支持多種單元格樣式，但是此類功能需要付費。比較出名有spreadjs，handsontable，這兩個插件有明顯的缺點，spreadjs增值功能收費太貴，handsontable二次開發坑很多。

Luckysheet ，是一款國產的純JS實現的類似excel的在線表格，功能強大、配置簡單、完全開源。

Luckysheet是用純Javascript編寫的前端表格庫，可以嵌入到任何前端項目或應用程序中，增強原有的系統功能，而無需使用excel或其他復雜的軟件進行數據處理。

這使我們的數據處理、分析、顯示和存儲可以由一個系統完成，而無需切換平臺，不切換系統，便于集成和完全自動化。

2、介紹

“我們決心制作一個功能最豐富，配置和使用最簡單的開源電子表格-Luckysheet，為企業報表平臺和數據分析平臺提供支持，并建立一個數據分析社區。具體來說，我們提供了一個類似于excel的在線編輯表格，其中包含單元格樣式，公式，過濾，凍結和其他功能。我們基本支持excel的常用功能，數據分析，顯示和編輯的需求。” —Luckysheet作者

Luckysheet ，是一款國產的純JS實現的類似excel的在線表格，功能強大、配置簡單、完全開源。

開源地址：https://gitee.com/mengshukeji/Luckysheet

在線文檔：https://mengshukeji.github.io/LuckysheetDocs/zh/guide

在線演示：https://mengshukeji.gitee.io/luckysheetdemo

3、基本使用

要使用LuckySheet，有2種方式，可以從官網下載JS，然后引入本地頁面，也可以引入CDN。

3.1 引入JS

<link rel='stylesheet' href='./plugins/CSS/pluginsCss.css' /><link rel='stylesheet' href='./plugins/plugins.css' /><link rel='stylesheet' href='./css/luckysheet.css' /><link rel='stylesheet' href='./assets/iconfont/iconfont.css' /><script src="./plugins/js/plugin.js"></script><script src="./luckysheet.umd.js"></script>

3.2 置放Excel容器

<div id="luckysheet"></div>

3.3 初始化Excel

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

這樣，一個在線Excel就完成了。LuckySheet只提供前端的操作，數據保存要由開發人員自己實現。

3.4 數據保存

數據保存分為兩種，一種是：實時保存，一種是“全部保存”。實時保存比較復雜，現在介紹一種簡單的全部保存方法。

LuckySheet提供了一個 luckysheet.getAllSheets() 方法，調用此方法，Luckysheet系統會把所有數據一股腦的傳遞給你，
你可以再頁面的OnClick的保存事件里保存這些數據，然后利用Jquery的Post方法，接收數據寫入數據庫。

下面代碼演示了把Luckysheet POST到 xls.aspx 頁面

function save() { var data2 = luckysheet.getAllSheets(); var cnt = JSON.stringify(data2); $.post("xls.aspx", { cnt: cnt }); }

在 xls.aspx頁面，利用 Request[“cnt”] 就可以獲取所有數據，然后保存到數據庫。

3.5 數據還原

LuckySheet提供了loadUrl屬性，當前端初始化完畢后，luckysheet會調用此屬性加載初始化數據。所以，利用此屬性，可以還原數據庫里保存的數據。

var options = { container: 'luckysheet', lang: 'zh', showinfobar: false, row: 20, column: 15, plugins: ['chart'], showstatisticBar: false, loadUrl: 'data.aspx?id=11', //還原數據URL showsheetbar: false, showsheetbarConfig: { add: false, menu: false, }

4、數據緩存

（1） Luckysheet允許在本地加載Luckysheet需要的JS,CSS等，但是這些JS、CSS比較大，為此，可以利用link的prefetch預加載CSS,JS。

<link rel="prefetch" href="../javascript/luckysheet/plugins/css/pluginsCss.css" /> <link rel="prefetch" href="../javascript/luckysheet/plugins/plugins.css" /> <link rel="prefetch" href="../javascript/luckysheet/css/luckysheet.css" /> <link rel="prefetch" href="../javascript/luckysheet/assets/iconfont/iconfont.css" /> <link rel="prefetch" href="../javascript/luckysheet/plugins/js/plugin.js" /> <link rel="prefetch" href="../javascript/luckysheet/luckysheet.umd.js" />

（2）Luckysheet在插入圖片時，圖片會議Base64格式存儲，所以，最終保存的數據可能非常大。

（3）需要理解Excel的一些簡單概念：一個Excel是由多個Sheet組成，而一個Sheet是由多個Cell組成，而每個單元格都會包括 r，c，v（r:單元格的行 row、c：單元格的列 column、 v：單元格的值 value），在使用實時保存時， 二維數組數據轉化成 {r, c, v}格式 一維數組。實時保存數據量小，但是比較復雜。

5、導入導出

LuckySheet提供了一個LuckyExcel，他支持Excel的導入和導出。

演示：https://mengshukeji.gitee.io/luckyexceldemo

6、生成圖表

Luckysheet可以使用Echart生成圖表組件（餅形圖，柱狀圖，曲線圖等）。