类似于 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 引入：

也可以在 npm run build 后dist文件夹下的所有文件复制到项目目录，然后通过相对路径引入：

引入依赖后，首先指定一个表格容器：

然后我们使用 Luckysheet 创建一个表格：

我们就能在前端页面得到一个电子表格：

一个完整的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 的许多功能，功能强大，包含大量常用电子表格功能；配置简单，最少的配置就能开始上手使用，是一个优秀的电子表格工具。

王剑编程网

分享专业编程知识与实战技巧

Luckysheet - 纯前端类似 Excel 的在线电子表格

简介

使用

总结