x-sheet入门指南 sheet

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

x-sheet入门指南 sheet

文章插图
介绍首先放上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上的功能说明
  • 撤销 & 反撤销
  • 格式刷
  • 清空格式
  • 文本格式
  • 字体设置
  • 字体大小
  • 字体加粗
  • 斜体字
  • 下划线
  • 删除线
  • 【x-sheet入门指南 sheet】文字颜色
  • 单元格颜色
  • 单元格边框
  • 字体倾斜
  • 边框倾斜
  • 背景倾斜
  • 合并单元格
  • 水平对齐
  • 自动换行
    x-sheet入门指南 sheet

    文章插图
  • 冻结单元格
  • 单元格函数 (处理中)
  • 行高和列宽设置
  • 复制, 剪切, 粘贴 (处理中)
  • 自动填充
  • 插入行, 列 (处理中)
  • 删除行, 列 (处理中)
  • 隐藏行, 列 (处理中)
  • 支持多个sheet表
  • 打印 (处理中)
  • 数据验证 (处理中)
  • 导出XLSX
  • 导入XLSX (处理中)
  • 导出CVS (处理中)
  • 导入CVS (处理中)
  • 导入图片 (处理中)
  • 数据筛选 (处理中)
使用那么如何启动一个x-sheet demo呢?由于现在x-sheet还处在开发阶段 , 暂未提供npm包安装方式 , 我们可以从源码打包使用 。
  1. clone代码
git clone https://gitee.com/eigi/x-sheet.git
  1. 进入代码目录,安装依赖
cd x-sheetnpm i
  1. 打包
npm run build