原文:免费开源的高性能JavaScript电子表格:X-Sheet入门体验背景

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

介绍

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

在线体验地址:

可以从gitee上拉到最新代码到本地看看,这是一个标准的es6现代化工程,自定义webpack打包金山表单怎么导出excel表格,运行后还有代码分析,其中还有好几个案例可以参考。

功能列表

我们先看看README上的功能说明

金山表单怎么导出excel表格_金山表格如何导出_金山表单数据导出

使用

那么如何启动一个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文件,引入打包后的源码使用



    
        
        X-XWorkSheet
        
        
            * {
                padding: 0;
                margin: 0;
            }
    
            html, body {
                height: 100%;
                display: block;
            }
        
        
    
    
        
          const dome = document.getElementById('demo');
          const xSheet = new XSheet(demo);
        
    

或者直接进入源代码的example目录金山表单怎么导出excel表格,直接用浏览器打开里面的.html文件就能看到官方给的丰富的本地模板和案例了,都是支持在线编辑的excel界面。

模板和案例

以下截图就展示了官方给出的案例

一个采购订单模板

体验地址

一个出库单模板

体验地址

一个库存明细模板

体验地址

一个旅行计划模板

体验地址

金山表单数据导出_金山表格如何导出_金山表单怎么导出excel表格

一个项目计划模板

体验地址

x-sheet展示2019年日历,同样我们根据这个模板,可以构造更多年份的日历,做一个DIY日历

体验地址

x-sheet展示2020年日历

体验地址

x-sheet支持多实例,一个界面展示多个电子表格,可以分别编辑

体验地址

x-sheet实测5万行25列的单元格数据,滑动很流畅

体验地址

x-sheet实测100万行25列的单元格数据,滑动也很流畅

体验地址

注意事项x-sheet支持Modern browsers(chrome, firefox)x-sheet现在的开源协议是 MOZILLA PUBLIC LICENSE体验总结

大致体验了下x-sheet,可以说可圈可点

当然也有些不足,比如不支持协同,快捷键支持不完善等,小编体验x-sheet时,x-sheet还处于开发阶段,所以难免有些bug存在,如果要在生产使用,需要自己多做测试。这是一款国人开发的开源免费的电子表格,希望大家多多给予支持,也欢迎踊跃提交issue和PR交流探讨,希望作者能添加更多功能,继续维护好这个表格插件。

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

限 时 特 惠: 本站每日持续更新海量各大内部创业教程,加站长微信免费获取积分,会员只需38元,全站资源免费下载 点击查看详情
站 长 微 信: thumbxmw