LuckySheet一款在線Excel使用心得

1.LuckySheet簡介

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

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

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

 

 2.基本使用

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

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

 

2.2 在HTML里放置一個div作為Excel容器

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

　

在上面的style里，定義了 position:absolute，目前luckysheet默認會占用全部空間
事實上，在頁面下面放置 保存按鈕，一直無法顯示
目前，我的做法是，把保存按鈕放在頁面上部。

2.3初始化Excel

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

　　

　這樣，一個在線Excel就完成了。

 

　　

LuckySheet只提供前端的操作，數據保存要由開發人員自己實現。

 

2.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頁面，利用 Reque["cnt"] 就可以獲取所有數據，然后保存到數據庫。

 

 

2.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,
                    },

　　

 3.數據緩存

（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}格式 一維數組。實時保存數據量小，但是比較復雜。

 

4. Excel的數據導入和導出

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

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

 

5.生成圖表

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

 

 

 

 本文是我再制作啟明星知識庫 http://demo.dotnetcms.org/kbase  使用luckysheet的一些心得。

 更多詳細介紹，請參考Luckysheet的官網 https://mengshukeji.gitee.io/LuckysheetDocs/zh/guide/。