LuckySheet一款線上Excel使用心得

啟明星工作室發表於2021-10-20

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/

 

相關文章