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