标签：luckysheet 表格 excel 保存 JS Luckysheet href plugins css
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/。
标签：luckysheet,表格,excel,保存,JS,Luckysheet,href,plugins,css 来源： https://www.cnblogs.com/Leo_wl/p/15779859.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。