免费开源的高性能JavaScript电子表格:X-Sheet入门体验
免费开源的高性能JavaScript电子表格:X-Sheet入门体验免费开源的高性能javascript电子表格 x-sheet,在线excel编辑器,丰富的单元格样式,富文本,边框倾斜,合并单元格,冻结,撤销重做,格式刷等核心功能,还支持导入导出xlsx文件,多实例,支持大数据量。https://lwebapp.com/zh/post/x-sheet-tutorial
背景
随着互联网技术特别是网页应用的发展,我们对在线文档、轻应用的需求越来越高,很多小伙伴都已经习惯云办公,在线协同办公了,常用的就是腾讯文档、金山文档、石墨文档、飞书等,国外主要就是Google Sheet,最近小编发现了一款国人开发高性能前端javascript电子表格,受启发于Google Sheet,使用HTML5 canvas渲染。接下来,小编分享下入门体验。
介绍
首先放上x-sheet官方开源地址
x-sheet: 高性能 Web JavaScript Canvas 电子表格
GitHub - eiji-th/x-sheet
在线体验地址:
在线excel编辑器x-sheet
可以从gitee上拉到最新代码到本地看看,这是一个标准的es6现代化工程,自定义webpack打包,运行后还有代码分析,其中还有好几个案例可以参考。
功能列表
我们先看看README上的功能说明
- 撤销 & 反撤销
- 格式刷
- 清空格式
- 文本格式
- 字体设置
- 字体大小
- 字体加粗
- 斜体字
- 下划线
- 删除线
- 文字颜色
- 单元格颜色
- 单元格边框
- 字体倾斜
- 边框倾斜
- 背景倾斜
- 合并单元格
- 水平对齐
- 自动换行
- 冻结单元格
- 单元格函数 (处理中)
- 行高和列宽设置
- 复制, 剪切, 粘贴 (处理中)
- 自动填充
- 插入行, 列 (处理中)
- 删除行, 列 (处理中)
- 隐藏行, 列 (处理中)
- 支持多个sheet表
- 打印 (处理中)
- 数据验证 (处理中)
- 导出XLSX
- 导入XLSX (处理中)
- 导出CVS (处理中)
- 导入CVS (处理中)
- 导入图片 (处理中)
- 数据筛选 (处理中)
使用
那么如何启动一个x-sheet demo呢?由于现在x-sheet还处在开发阶段,暂未提供npm包安装方式,我们可以从源码打包使用。
- clone代码
git clone https://gitee.com/eigi/x-sheet.git
- 进入代码目录,安装依赖
cd x-sheet
npm i
- 打包
npm run build
- 打包之后,我们可以自己新建一个html文件,引入打包后的源码使用
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>X-XWorkSheet</title><link href="XSheet.css" rel="stylesheet"><style>* {padding: 0;margin: 0;}html, body {height: 100%;display: block;}</style><script src="XSheet.js" type="text/javascript"></script></head><body id="demo"><script>const dome = document.getElementById('demo');const xSheet = new XSheet(demo);</script></body>
</html>
或者直接进入源代码的example
目录,直接用浏览器打开里面的.html
文件就能看到官方给的丰富的本地模板和案例了,都是支持在线编辑的excel界面。
模板和案例
以下截图就展示了官方给出的案例
一个采购订单模板
体验地址 x-sheet 采购订货单模板
一个出库单模板
体验地址 x-sheet 出库单模板
一个库存明细模板
体验地址 x-sheet 库存明细模板
一个旅行计划模板
体验地址 x-sheet 旅行时间表模板
一个项目计划模板
体验地址 x-sheet 项目时间表模板
x-sheet展示2019年日历,同样我们根据这个模板,可以构造更多年份的日历,做一个DIY日历
体验地址 x-sheet 2019日历模板
x-sheet展示2020年日历
体验地址 x-sheet 2020日历模板
x-sheet支持多实例,一个界面展示多个电子表格,可以分别编辑
体验地址 x-sheet 多实例
x-sheet实测5万行25列的单元格数据,滑动很流畅
体验地址 x-sheet 5万行数据测试
x-sheet实测100万行25列的单元格数据,滑动也很流畅
体验地址 x-sheet 100万行数据测试
注意事项
- x-sheet支持Modern browsers(chrome, firefox)
- x-sheet现在的开源协议是 MOZILLA PUBLIC LICENSE
体验总结
大致体验了下x-sheet,可以说可圈可点
- 功能上,丰富的单元格样式,富文本,边框倾斜,合并单元格,冻结,撤销重做,格式刷等核心功能,还支持导入导出xlsx文件,多实例,支持大数据量
- 界面上,风格类似Google Sheet,清爽舒适,操作体验非常棒
- 轻量,代码模块拆分清晰,二次开发可扩展性好
当然也有些不足,比如不支持协同,快捷键支持不完善等,小编体验x-sheet时,x-sheet还处于开发阶段,所以难免有些bug存在,如果要在生产使用,需要自己多做测试。这是一款国人开发的开源免费的电子表格,希望大家多多给予支持,也欢迎踊跃提交issue和PR交流探讨,希望作者能添加更多功能,继续维护好这个表格插件。
免费开源的高性能JavaScript电子表格:X-Sheet入门体验相关推荐
- 盘点那些免费开源、无比精致的图标库,无论是设计还是开发,都很好用
之前分享过很多好看精致的图标库,这对日常设计和开发工作,都很方便,欢迎大家尝试. css.gg 详细介绍:https://www.thosefree.com/css-gg 一套漂亮的纯 CSS 实现的 ...
- PhotoSwipe简介-专为移动触摸设备设计的相册/画廊.兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品
官方介绍 PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产 ...
- 开源顺顺表格excel电子表格控件免费下载
顺顺表格开源版是基于Web的类似于微软Excel的网页电子表格控件,是一款Javascript电子表格控件.顺顺表格开源版的源代码开放,可以用于Web报表设计器,Web电子表格编辑器,中国特色的电子表 ...
- node-xlsx - 简单几行代码处理导入、导出 excel 表格数据,免费开源的 javascript 工具库
最近开发的项目上需要把数据导出为 xlsx 文档,找了一圈,发现 node-xlsx 简单好用,分享给各位. 关于 node-xlsx 在 web 开发中,管理后台生成 excel 报表并且下载,一个 ...
- react滑动切换tab动画效果_Swiper - 免费开源、功能强大的触摸滑动js特效插件
简单配置就能实现手机.PC 网页中滑动.焦点轮播图.tab 切换和触摸导航等大部分功能. js 滑动特效插件 Swiper 是一款纯 javascript 打造的滑动特效插件,主要用对移动端 web ...
- 高性能javascript 文件加载阻塞
高性能javascript javascript脚本执行过程中会中断页面加载,直到脚本执行完毕,此操作阻塞了页面加载,造成性能问题. 脚本位置和加载顺序: 如果将脚本放在head内,那么再脚本执行 ...
- pc端js获取当前经纬度_Swiper 免费开源、功能强大的触摸滑动 js 特效插件
简单配置就能实现手机.PC 网页中滑动.焦点轮播图.tab 切换和触摸导航等大部分功能. js 滑动特效插件 Swiper 是一款纯javascript 打造的滑动特效插件,主要用对移动端web 开发 ...
- Croppic – 免费开源的 jQuery 图片裁剪插件
Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要.只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能.因为使用了 HTML5 FormData 对 ...
- python免费开源工具推荐_年薪200万的程序员,推荐这10大Python免费开源工具!
原标题:年薪200万的程序员,推荐这10大Python免费开源工具! 毫无疑问,Python是最流行的语言之一,其成功的原因之一是它为科学计算提供了广泛的报道. 在这里,我们仔细研究用于机器学习和数据 ...
- 免费开源低代码拖拽开发_资料来源:面向开源开发人员的免费代码搜索工具
免费开源低代码拖拽开发 开源代码的金矿可供程序员使用,但是选择正确的库并了解如何使用它可能很棘手. Sourcegraph创建了一个搜索引擎和代码浏览器,以帮助开发人员找到更好的代码并更快地构建软件. ...
最新文章
- 前端小技巧-定位的活学活用之仿淘宝列表
- “非”天才女程序员的人生
- multiselect多选下拉框
- 北大保送、硕博连读!《西游记》红孩儿扮演者现成中科院博士!
- 作者:李涛,男,南京邮电大学计算机学院、软件学院院长,南京邮电大学大数据研究院院长。...
- 华视读卡器多浏览器插件_翻遍Chrome商店,这9款插件值得安装
- Python chardet
- Android Sunflower 带您玩转 Jetpack
- [ERROR] The distro “Ubuntu“ has running processes and can‘t be operated. “wsl -t <name>“ ......
- python-计算字符个数
- Bulldog靶机渗透
- cad批量打印_CAD批量打印
- 基于51单片机步进电机控速正反转proteus仿真
- 简答题软件测试的过程是什么,软件测试简答题库
- A股:未来至少翻10倍的“医药龙头股”,就这5只(附名单)
- 基于联邦学习的多源异构数据融合算法 Multi-Source Heterogeneous Data Fusion Based on Federated Learning
- 【C#食谱】【面食】菜单4:List
- html5设计九宫格页面,Html5响应式设计实现九宫格,html5响应九宫格
- 今日头条2018春季校园招聘研发岗位笔试编程题 - 题解
- 移植蜂鸟E203内核至达芬奇pro35T【集创芯来RISC-V杯】(一)
热门文章
- python 指定dns服务器,python实现dns解析
- 终结者2免费教程_如何在模拟器上玩(匹配的还是手机服)_适用最新客户端
- Windows 下使用 Mingw32-make 来执行 Makefile示例
- CentOS安装Mingw32
- 【Python】LDA模型中文文本主题提取丨可视化工具pyLDAvis的使用
- Sketch79 mac专业矢量绘图设计
- mt4虚拟服务器账户无效,mt4为什么会有无效账户 无效账户解决方法
- COMSOL:案列应用实操教学---光电
- lisp6 暖通cad_AutoCAD超强小工具(ARKtools)说明
- 基于ssm的超市进销存管理系统