关于javascript:最强国产开源电子表格Luckysheet强势登顶Github-trending第一名

8次阅读

共计 1891 个字符,预计需要花费 5 分钟才能阅读完成。

背景

当初 web 技术蓬勃发展,办公利用特地是 excel 都搬到了线上,比拟风行的有腾讯文档,金山文档,石墨文档,google doc,属于企业服务。然而小型企业或者团队,如果想本人搭建一套在线表格零碎呢?有没有开源的计划?

经笔者考察,一些表格具备绝对简略的性能,只能显示数据和过滤器性能,或者某些表格反对多种单元格款式,然而此类性能须要付费。比拟闻名有 spreadjs,handsontable,这两个插件有显著的毛病,spreadjs 增值性能免费太贵,handsontable 二次开发坑很多。

介绍

“ 咱们信心制作一个性能最丰盛,配置和应用最简略的开源电子表格 -Luckysheet,为企业报表平台和数据分析平台提供反对,并建设一个数据分析社区。具体来说,咱们提供了一个相似于 excel 的在线编辑表格,其中蕴含单元格款式,公式,过滤,解冻和其余性能。咱们根本反对 excel 的罕用性能,数据分析,显示和编辑的需要。” –Luckysheet 作者

更不便的是,Luckysheet 是用纯 JavaScript 编写的前端表格库,能够嵌入到任何前端我的项目或应用程序中,加强原有的零碎性能,而无需应用 excel 或其余简单的软件进行数据处理。这使咱们的数据处理、剖析、显示和存储能够由一个零碎实现,而无需切换平台,不切换零碎,便于集成和齐全自动化。

体验

官网链接:

  • Github
  • 在线 DEMO

个性

简略列举几个次要的性能

  1. 表格设置, 包含解冻行列、合并单元格、筛选、排序、查问、条件格局、批注;
  2. 反对数据分析性能包含透视表、分列、矩阵操作、内置 385 个计算函数;
  3. 反对一键截图、复制为 json 数据、共享编辑、excel 与 luckysheet 之间数据的复制粘贴.
  4. 加强性能如 excel 导入、插入图片、数据验证、行内款式
  5. 反对挪动端查看
  6. 等等。。。

关上在线 DEMO 体验下,速度也很快, 操作下来和 excel 基本一致

近期 Luckysheet 更新了一个亮点性能,反对 xlsx 格局 excel 导入,导出也正在开发中。

excel 导入 Demo

性能及架构

这里展现几个外围性能,看起来的确很弱小,能够看到作者是很用心在做的,也在踊跃保护。更多细节能够在官网看到。

应用

上面带着大家跟着教程本地跑一跑看.

环境

Node.js Version >= 6

装置

npm install
npm install gulp -g

开发

开发

npm run dev

打包

npm run build

用法

第一步

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

第二步

指定一个表格容器

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

总结

目前开源电子表格,这个应该是最弱小的了,外围性能根本可能满足我的项目须要,然而应该是还有很多细节须要补充,文档还在进一步欠缺中,进一步期待吧。

正文完
 0