乐趣区

关于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 包装置形式,咱们能够从源码打包应用。

  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 入门体验

退出移动版