乐趣区

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

jiezi

原文：收费开源的高性能 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 包装置形式，咱们能够从源码打包应用。

  1. clone 代码

    git clone https://gitee.com/eigi/x-sheet.git

  2. 进入代码目录，装置依赖

    cd x-sheet
npm i

  3. 打包

    npm run build

  4. 打包之后，咱们能够本人新建一个 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 界面。

模板和案例

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

  1. 一个洽购订单模板

    体验地址 https://lwebapp.com/example/x-sheet-purchase-order.html

  2. 一个出库单模板

    体验地址 https://lwebapp.com/example/x-sheet-outbound-order.html

  3. 一个库存明细模板

    体验地址 https://lwebapp.com/example/x-sheet-inventory-details.html

  4. 一个旅行打算模板

    体验地址 https://lwebapp.com/example/x-sheet-travel-plan.html

  5. 一个我的项目打算模板

    体验地址 https://lwebapp.com/example/x-sheet-project-plan.html

  6. x-sheet 展现 2019 年日历，同样咱们依据这个模板，能够结构更多年份的日历，做一个 DIY 日历

    体验地址 https://lwebapp.com/example/x-sheet-calendar-2019.html

  7. x-sheet 展现 2020 年日历

    体验地址 https://lwebapp.com/example/x-sheet-calendar-2020.html

  8. x-sheet 反对多实例，一个界面展现多个电子表格，能够别离编辑

    体验地址 https://lwebapp.com/example/x-sheet-multi-instance.html

  9. x-sheet 实测 5 万行 25 列的单元格数据，滑动很晦涩

    体验地址 https://lwebapp.com/example/x-sheet-50000-rows-test.html

  10. x-sheet 实测 100 万行 25 列的单元格数据，滑动也很晦涩

    体验地址 https://lwebapp.com/example/x-sheet-1000000-rows-test.html

注意事项

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

体验总结

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

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

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

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

退出移动版