luckysheet做报表模板（Luckysheet-纯前端类似）
luckysheet做报表模板（Luckysheet-纯前端类似）<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>然后我们使用 Luckysheet 创建一个表格：<link rel='stylesheet' href='./plugins/css/pluginsCss.css' /> <link rel='stylesheet' href='./plugins/plugins.css' /> <link rel='stylesheet' href='./css/luckysheet.css
类似于 EXCEL 的电子表格，在各行各业中都会被经常用到；而随着电子化、后台化的不断深入，把电子表格搬到管理后台的 Web 页面中，逐渐成为了更为主流表格使用方式，网页版的电子表格相比于零散的 excel 文件更容易管理、更便捷。Luckysheet，就是一个不错的纯前端的在线电子表格。
Luckysheet，是 mengshukeji 在 Gitee 上开源的前端在线电子表格，仓库位于 https://gitee.com/mengshukeji/Luckysheet，目前版本为 v2.1.13。
Luckysheet 是一款纯前端类似 Excel 的在线表格，其功能强大，包含大量常用电子表格功能；配置简单，最少的配置就能开始上手使用；完全开源，社区驱动，共同来完善你的想法。
Luckysheet 功能特性丰富，包括：
- 格式设置：样式，条件格式，文本对齐及旋转，文本截断、溢出、自动换行，多种数据类型，单元格内多样式
- 单元格：拖拽，下拉填充，多选区，查找和替换，定位，合并单元格，数据验证
- 行和列操作：隐藏、插入、删除行或列，冻结，文本分列
- 操作体验：撤销、重做，复制、粘贴、剪切，快捷键，格式刷，选区拖拽
- 公式和函数：内置公式，远程公式，自定义公式
- 表格操作：筛选，排序
- 增强功能：数据透视表，图表，评论，共享编辑，插入图片，矩阵计算，截图，复制到其他格式，Excel导入及导出等
Lucksheet 需要 Node.js Version >= 6，使用 npm 安装：
# 安装
npm install
npm install gulp -g
# 开发
npm run dev
# 打包
npm run build
要使用 Luckysheet，可以通过 CDN 引入：
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>
也可以在 npm run build 后dist文件夹下的所有文件复制到项目目录，然后通过相对路径引入：
<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>
引入依赖后，首先指定一个表格容器：
<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
然后我们使用 Luckysheet 创建一个表格：
<script>
$(function () {
//配置项
var options = {
container: 'luckysheet' //luckysheet为容器id
}
luckysheet.create(options)
})
</script>
我们就能在前端页面得到一个电子表格：
一个完整的Luckysheet表格文件的数据格式为：luckysheetfile，一个表格文件包含若干个sheet文件，对应excel的sheet0、sheet1等。
一个Luckysheet文件的示例如下，该表格包含3个sheet：luckysheetfile = [ {sheet1设置} {sheet2设置} {sheet3设置} ] 相当于excel的3个sheet。文件中的一个sheet的数据luckysheetfile[0]的结构如下：
{
"name": "Cell" //工作表名称
"color": "" //工作表颜色
"index": "0" //工作表索引
"status": "1" //激活状态
"order": "0" //工作表的顺序
"hide": 0 //是否隐藏
"row": 36 //行数
"column": 18 //列数
"config": {
"merge":{} //合并单元格
"rowlen":{} //表格行高
"columnlen":{} //表格列宽
"rowhidden":{} //隐藏行
"colhidden":{} //隐藏列
"borderInfo":{} //边框
}
"celldata": [] //初始化使用的单元格数据
"data": [] //更新和存储使用的单元格数据
"scrollLeft": 0 //左右滚动条位置
"scrollTop": 315 //上下滚动条位置
"luckysheet_select_save": [] //选中的区域
"luckysheet_conditionformat_save": {} //条件格式
"calcChain": [] //公式链
"ispivotTable":false //是否数据透视表
"pivotTable":{} //数据透视表设置
"filter_select": {} //筛选范围
"filter": null //筛选配置
"luckysheet_alternateformat_save": [] //交替颜色
"luckysheet_alternateformat_save_modelCustom": [] //自定义交替颜色
"freezen": {} //冻结行列
"chart": [] //图表配置
"visibledatarow": [] //所有行的位置
"visibledatacolumn": [] //所有列的位置
"ch_width": 2322 //工作表区域的宽度
"rh_height": 949 //工作表区域的高度
"load": "1" //已加载过此sheet的标识
}
Luckysheet 提供了丰富的配置项，一个简单的配置例子如下：
// 配置项
const options = {
container: 'luckysheet' // 设定DOM容器的id
title: 'Luckysheet Demo' // 设定表格名称
lang: 'zh' // 设定表格语言
// 更多其他设置...
}
// 初始化表格
luckysheet.create(options)
Luckysheet针对常用的数据操作需求，开放了主要功能的API，开发者可以根据需要进行任意对接开发。API 包括单元格操作、行列操作、选区操作等，为开发者提供了最大的灵活性。
总结Luckysheet 作为前端的在线电子表格，其覆盖了类似 Excel 的许多功能，功能强大，包含大量常用电子表格功能；配置简单，最少的配置就能开始上手使用，是一个优秀的电子表格工具。
