关于javascript:高性能javascript开源在线excelxsheet初体验

原文：收费开源的高性能JavaScript电子表格：X-Sheet入门体验

背景

随着互联网技术特地是网页利用的倒退，咱们对在线文档、轻利用的需要越来越高，很多小伙伴都曾经习惯云办公，在线协同办公了，罕用的就是腾讯文档、金山文档、石墨文档、飞书等，国外次要就是Google Sheet，最近小编发现了一款国人开发高性能前端javascript电子表格,受启发于Google Sheet，应用HTML5 canvas渲染。接下来，小编分享下入门体验。

介绍

首先放上x-sheet官网开源地址

https://gitee.com/eigi/x-sheet
https://github.com/eiji-th/x-sheet

在线体验地址：

https://lwebapp.com/example/x-sheet.html

能够从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-sheetnpm 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界面。

模板和案例

以下截图就展现了官网给出的案例

一个洽购订单模板
体验地址 https://lwebapp.com/example/x-sheet-purchase-order.html
一个出库单模板
体验地址 https://lwebapp.com/example/x-sheet-outbound-order.html
一个库存明细模板
体验地址 https://lwebapp.com/example/x-sheet-inventory-details.html
一个旅行打算模板
体验地址 https://lwebapp.com/example/x-sheet-travel-plan.html
一个我的项目打算模板
体验地址 https://lwebapp.com/example/x-sheet-project-plan.html
x-sheet展现2019年日历，同样咱们依据这个模板，能够结构更多年份的日历，做一个DIY日历
体验地址 https://lwebapp.com/example/x-sheet-calendar-2019.html
x-sheet展现2020年日历
体验地址 https://lwebapp.com/example/x-sheet-calendar-2020.html
x-sheet反对多实例，一个界面展现多个电子表格，能够别离编辑
体验地址 https://lwebapp.com/example/x-sheet-multi-instance.html
x-sheet实测5万行25列的单元格数据，滑动很晦涩
体验地址 https://lwebapp.com/example/x-sheet-50000-rows-test.html
x-sheet实测100万行25列的单元格数据，滑动也很晦涩
体验地址 https://lwebapp.com/example/x-sheet-1000000-rows-test.html

注意事项

x-sheet反对Modern browsers(chrome, firefox)
x-sheet当初的开源协定是 MOZILLA PUBLIC LICENSE

体验总结

大抵体验了下x-sheet，能够说可圈可点

性能上，丰盛的单元格款式，富文本，边框歪斜，合并单元格，解冻，撤销重做，格局刷等外围性能，还反对导入导出xlsx文件，多实例，反对大数据量
界面上，格调相似Google Sheet，清新舒服，操作体验十分棒
轻量，代码模块拆分清晰，二次开发可扩展性好

当然也有些有余，比方不反对协同，快捷键反对不欠缺等，小编体验x-sheet时，x-sheet还处于开发阶段，所以不免有些bug存在，如果要在生产应用，须要本人多做测试。这是一款国人开发的开源收费的电子表格，心愿大家多多给予反对，也欢送踊跃提交issue和PR交换探讨，心愿作者能增加更多功能，持续保护好这个表格插件。