功能强大的纯前端 Excel 在线表格： Luckysheet

原创

mb5fe1900cd6223 2020-12-24 19:50:17 ©著作权

文章标签 java 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者mb5fe1900cd6223的原创作品，请联系作者获取转载授权，否则将追究法律责任

【导语】：Luckysheet是一款类似excel的在线表格，纯前端，功能强大、配置简单、完全开源，几行代码就能展现出一个功能完备的在线表格。

简介

Luckysheet是一款类似excel的纯前端在线表格，只需要引入js和css文件即可使用。Luckysheet保持了和excel一致的操作体验，样式、快捷键、函数等，都与excel的操作方式一致，用户没有额外的学习成本。Luckysheet目前还在持续的迭代演进中，已经实现的功能包括：

1.格式设置。包括字体、字号、颜色、文本对齐、自动换行以及excel支持的各种数据类型 2.单元格。拖拽选取、下拉填充、自动填充、查找替换、合并单元格等。 3.行列。隐藏、插入、删除、冻结。 4.操作。撤销、复制、粘贴、剪切、快捷键、格式刷、筛选排序、批注、共享编辑。 5.函数。内置常见公式，并支持自定义公式。 6.图表。目前支持折线图、柱状图、面积图、条形图、饼图，支持插入图片。

简单使用

项目源码： https://github.com/mengshukeji/Luckysheet 在线demo： https://mengshukeji.github.io/LuckysheetDemo 用户手册： https://mengshukeji.github.io/LuckysheetDocs/

简单尝试一下使用，由于是纯前端，使用起来非常方便，使用CDN引入相关的库，甚至都不需要在自己的环境中安装额外的的东西，新建html页面，引入库，创建方法，就是这么简单。

本地引入库文件：

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

以下是我按照以上步骤操作的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <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>
  </head>
  <body>
    <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
  </body>
  <script>
      $(function () {
          //配置项
          var options = {
              container: 'luckysheet' //luckysheet为容器id
          }
          luckysheet.create(options)
      })
</script>
</html>

效果如下：