Excel？再见！国产免费开源在线表格走红，一键引入，太方便了~

来源：程序员Tools

昨天，老鬼给大家推荐的这款小工具，不知道你去用没有，我用了一下，挺有有意思的，把一些隐藏的功能，直观的展现出来，建议去体验一下~

有的同学可能用过不少在线文档编辑器，比如金山文档，腾讯文档，石墨文档，谷歌doc，这些文档要么未开源，要么收费。

那么，有没有一款开源且免费的产品供我们使用呢？是有的，那便是今天的主角——Luckysheet，开源且免费，功能强大，配置简单。

跟往常一样，咱们先来看效果，见下图：

是不是跟咱们平常用的Excel一样，没啥差别~

基本上具备了大部分Excel的功能，比如格式调整，公式使用，图表等等，但是，它还有一些特有的功能，比如：

• 矩阵计算；

• 对选取进行截图；

• 支持复制为json、array、对角线数据、去重等；

• 支持密码、水印、公式等的本地导入导出；

• 支持JPG,PNG,SVG,Pen tool的插入、修改和删除，并且随表格的变动而产生变化；

• 数据验证，单元格内其它特有的样式；

该项目是基于Javascript编写的，主要依赖于Node.js的开发环境。正由于它这一特性，更加方便它集成其它的前端组件，比如Luckyexcel、chartMix等。

接下来，说说它的设计思路。

老鬼也去看了一些代码，说实话老鬼的js水平有限，但还是能看懂一部分，代码结构挺清晰的，感兴趣的同学也可以去读读，见下图：

其实咱们看到的一个完整的Luckysheet文件，就表示一张表格，里面包含了若干个sheet文件，sheet文件里面包含具体的表格数据，见下图

如果你懂点技术的话，可以打开Chrome的Console，输入如下的代码：

luckysheet.getluckysheetfile()

再来看看下面这张图，便一目了然了，见下图

最终，根据用户的操作，组装成之前设计的数据结构来保存起来。思路不难，难得是效果~

如何使用？

1、引入依赖

目前，有两种方案进行引入，具体如下：

1）CDN

这是最快得方案，直接在你的html页面添加如下代码：

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

2）本地引入

需要进行自行构建，把生成的js文件复制到你的项目中，进行引入，如下：

<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、指定表格容器

很简单的，具体代码如下：

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>

3、创建表格

这里，需要通过js来创建一个表格，代码如下：

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

这样，基本上一个表格便可在你指定的页面生成了，是不是很easy，很方便~

目前，该项目在Github上面有5.3k的关注，见下图：

确实是一个不错的项目，老鬼准备后面抽时间也引入到自己公司的项目中，反正经过老鬼推荐过的项目或者工具，基本都会大火，笔芯~

热门推荐：

最后，推荐给大家一个有趣有料的公众号：程序员Tools，该公众号主要为大家分享有趣有料的开发者工具，还有老鬼给你带路，永不迷路~

扫描关注，永不迷路

点击阅读原文，获得更多精彩内容！