首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

再见Excel!最强国产开源在线表格Luckysheet走红GitHub

目前比较流行的办公应用主要有Excel、WPS、石墨文档等等,今天和大家推荐一款功能强大、配置简单、完全开源的用纯JavaScript编写的前端表格库,对它的评价只有【用它!】

Luckysheet具备了大部分Excel中的常用功能,比如文字与单元格的样式调整与公式的使用等。除此之外还提供了独有的复制时转换格式(比如 json 等)以及其他格式的数据导入导出等,可以说Excel具备的常用功能它也都有了。

此外,因为Luckysheet采用纯JavaScript编写,因此它可以嵌入到任何前端项目或应用程序中,便于实现集成和自动化。不过在图表方面现在只支持了常用的ECharts,其他图表框架需要等待以后陆续支持。

目前,Luckysheet已经在GitHub上标星7.4K,累计分支292(GitHub地址:https://github.com/mengshukeji/Luckysheet/blob/master/README-zh.md)

整体架构

首先我们一起来看看Luckysheet的格式,一个完整的Luckysheet表格文件的数据格式为:luckysheetfile,一个表格文件包含若干个sheet文件,对应excel的sheet0、sheet1等。

一个Luckysheet文件的示例如下,该表格包含3个sheet:luckysheetfile = [ , , ] 相当于excel的3个sheet

文件中的一个sheet的数据luckysheetfile[0]的结构如下:

在chrome的console中查看 luckysheet.getluckysheetfile() 可以看到完整设置 [, , ]

使用方法

第一步,引入依赖,有2种方式:

CDN

注意,https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js这个路径会拉取到最新的luckysheet代码,想要指定luckysheet版本,请在luckysheet后面加上版本号,如:https://cdn.jsdelivr.net/npm/luckysheet@2.0.0/dist/luckysheet.umd.js

如果不方便访问 jsdelivr.net,还可以采用本地方式引入

本地引入

npm run build后dist文件夹下的所有文件复制到项目目录,然后通过相对路径引入

第二步,指定一个表格容器

第三步,创建表格

其实LuckysheetDocs的使用方式和Excel差别并不大,就连快捷键也是一样的:

最后附上在线DEMO体验:

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20210302A0B9W800?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券