e-sheet web版excel

334 阅读2分钟

e-sheet

引言

之前对web版excel很感兴趣,所以自己打算开发一个简单的excel,初始时使用了konvas来构建canvas,但发现性能问题后,便去除了第三方库使用自己封装的方法提高性能,ui方面借鉴了阿里云文档,图标放在了本地。

Git

github.com/lyqgit/e-sh…

安装

npm

npm i e-sheet

使用

// es

import eSheet from 'e-sheet'
import 'e-sheet/dist/css/index.css'

const excel = new eSheet('#elt',{
    width:1200,
    height:800
})


// umd

<script lang="javascript" src="dist/e-sheet.umd.js"></script>
<script lang="javascript" src="dist/dist/css/index.css"></script>

const excel = new eSheet('#elt',{
    width:1200,
    height:800
})

预览

example1.jpg

应用

  • 支持修改单元格文字内容、大小、颜色、背景图、字体粗细、字体倾斜,文字内容垂直对齐和水平对齐
  • 支持拖拽单个或多个单元格
  • 支持拖拽拉长单元格的宽度或高度
  • 支持双击对应表头,适配单元格的内容宽度
  • 支持添加行和列
  • 支持合并和拆分单元格
  • 支持复制和粘贴内容,经测试可以与阿里云文档和wps复制粘贴交互,样式方面会有所欠缺
  • 撤销和重做正在开发中,没有支持所有的操作

问题

服务端使用rust实现,由于从来没做过多人协同,所以后端服务只是简单实现了推送单元格内容和展示正在操作单元格的用户,如果有多人同一时间操作一个单元格,则会由最新的一个提交覆盖前面的内容,这块需要在后面研究一下多人协同的算法,web版excel更多注重性能问题,现阶段比使用konvas库渲染的页面流畅很多,如果时间充裕会探索一下在大量表格数量和内容的情况下实现更高的性能。

总结

通过开发本项目,了解了更多关于web版excel的知识,通过性能优化,提高了页面流畅度,excel还有非常多的功能,本项目实现了一些常用的功能,后续会继续开发

其他项目

  • salvo-admin 使用了ruoyi-vue3前端和数据库设计,后端使用rust实现的后台管理
  • web_proxy 使用hyper库开发的一个简单的代理服务,如果项目启动需要很多时间,可以在本地启动一个代理服务,在切换不同的网络环境时直接重启代理服务修改目标源,代理返回时注入跨域头,会直接允许跨域