LuckySheet一款線上Excel使用心得

啟明星工作室發表於2021-10-20
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的官網。

 

相關文章