一款纯前端类似excel的在线表格Luckysheet

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一款纯前端类似excel的在线表格——Luckysheet。

项目介绍

Luckysheet是一款纯前端类似excel的在线表格，支持excel基本功能，仅需简单的配置即可使用，目前已经完全开放源代码。

Luckysheet的功能特性

格式设置

样式 (修改字体样式，字号，颜色或者其他通用的样式)
条件格式 (突出显示所关注的单元格或单元格区域；强调异常值；使用数据栏、色阶和图标集（与数据中的特定变体对应）3直观地显示数据)
文本对齐及旋转
支持文本的截断、溢出、自动换行
数据类型货币, 百分比, 数字, 日期Custom (和excel保持一致，例如：##,###0.00 , ##,###0.00_);Red, ($* ##,###0.00);(…($* “-“);(@), 08-05 PM 01:30MM-dd AM/PM hh:mm )
单元格内多样式 (Alt+Enter单元格内换行、上标、下标、单元格内可定义每个文字的不同样式)

单元格

拖拽选取来修改单元格 (对选区进行操作，可以拖动四边来移动选区，也可以在右下角对选区进行下拉填充操作)
选区下拉填充 (对于一个1,2,3,4,5的序列，将会按照间隔为1进行下拉填充，而对2,4,6,8将会以2作为间隔。支持等差数列，等比数列，日期，周，天，月，年，中文数字填充)
自动填充选项 (下拉填充后，会出现填充选项的菜单，支持选择复制，序列，仅格式，只填充格式，天，月，年的选择)
多选区操作 (可以按住Ctrl键进行单元格多选操作，支持多选区的复制粘贴)
查找和替换 (对内容进行查找替换，支持正则表达式，整词，大小写敏感)
定位 (可以根据单元格的数据类型进行自动定位并选中，选中后可以批量进行格式等操作)
合并单元格
数据验证(表单功能) (支持Checkbox, drop-down list, datePicker)

行列操作

隐藏，插入，删除行或列
冻结行或列 (支持冻结首行和首列，冻结到选区，冻结调节杆可以进行拖动操作)
文本分列 (可以把文本根据不同符号进行拆分，和excel的分列功能类似)
筛选 (支持颜色、数字、字符、日期的筛选)
排序 (同时加入多个字段进行排序)

操作体验

撤销/重做
复制/粘贴/剪切操作 (支持Luckysheet到excel和excel到Luckysheet带格式的互相拷贝)
快捷键支持 (快捷键操作保持与excel一致，如果有不同或者缺失请反馈给我们)
格式刷 (与google sheet类似)
任意选区拖拽 (选择单元格，输入公式，插入图表，会与选区相关，可以通过任意拖动和放大缩小选区来改变与之关联的参数)

内置公式

数学 (SUMIFS, AVERAGEIFS, SUMIF, SUM, etc.)
文本 (CONCATENATE, REGEXMATCH, MID)
日期 (DATEVALUE, DATEDIF, NOW, WEEKDAY, etc.)
财务 (PV, FV, IRR, NPV, etc.)
逻辑 (IF, AND, OR, IFERROR, etc.)
查找和引用 (VLOOKUP, HLOOkUP, INDIRECT, OFFSET, etc.)
动态数组 (Excel2019新函数，SORT,FILTER,UNIQUE,RANDARRAY,SEQUENCE)

图表

支持的图表类型 (目前折线图、柱状图、面积图、条形图、饼图可以使用，散点图、雷达图、仪表盘、漏斗图正在接入，其他图表正在陆续开发中，请大家给予建议)
关于图表插件 (图表使用了一个中间插件ChartMix (opens new window)(MIT协议): 目前支持ECharts，正在逐步接入Highcharts、阿里G2、amCharts、googleChart、chart.js)
Sparklines小图 (以公式的形式进行设置和展示，目前支持：折线图、面积图、柱状图、累积图、条形图、离散图、三态图、饼图、箱线图等)

简单使用

引入依赖,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>

引入依赖,本地引入

<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>

创建一个表格

<script>
    $(function () {
        //配置项
        var options = {
            container: 'luckysheet' //luckysheet为容器id
        }
        luckysheet.create(options)
    })
</script>