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

7次阅读

共计 2528 个字符，预计需要花费 7 分钟才能阅读完成。

随着互联网技术特地是网页利用的倒退，咱们对在线文档、轻利用的需要越来越高，很多小伙伴都曾经习惯云办公，在线协同办公了，罕用的就是腾讯文档、金山文档、石墨文档、飞书等，国外次要就是 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-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 界面。

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

一个洽购订单模板

体验地址 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 交换探讨，心愿作者能增加更多功能，持续保护好这个表格插件。

正文完