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：
|
1
2
3
4
5
6
|
<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容器
|
1
2
|
<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
|
1
2
3
4
5
6
7
8
9
|
<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 頁面
|
1
2
3
4
5
6
7
8
|
function save() {
var
data2 = luckysheet.getAllSheets();
var
cnt = JSON.stringify(data2);
$.post(
"xls.aspx"
, {
cnt: cnt <br><br> });
}
|
在 xls.aspx頁面，利用 Reque["cnt"] 就可以獲取所有數據，然后保存到數據庫。
2.5 數據還原
LuckySheet提供了loadUrl屬性，當前端初始化完畢后，luckysheet會調用此屬性加載初始化數據
所以，利用此屬性，可以還原數據庫里保存的數據。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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
|
1
2
3
4
5
6
7
|
<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/。