通过一个已有的excel文件,在页面上实现一个在线的支持编辑和导出的excel编辑器

一、前景

怎么快速直接通过一个已有的excel文件,在页面上实现一个在线的支持编辑和导出的excel呢

二、具体实现

利用luckysheet和luckyExcel 俩个开源并且很强大的excel库即可快速实现

简介:luckyExcel是一个适配 Luckysheet 的excel导入导出库,可以将excel文件转化为luckySheet能够识别的格式, Luckysheet是一个可以支持配置并生成在线excel的库。

luckysheet:Luckysheet文档 (gitee.io)--具体配置可去官网查看 支持生成多sheet的excel并且支持单元格内容宽高等一系列excel设置,是一个富文本编辑器

具体代码:

1 luckysheet 快速生成一个在线excel

其中最重要的是data配置 称之为 工作表配置 Array<>

一项代表生成一个sheet页--储存着单元格等一系列内容

进行了如上配置后 进行初始化操作 咱就可以得到一个在线的自定义excel编辑器

效果如下

如果手动进行data的传入,这样耗时是非常多的 所以我们可以采用下面的方法 将一份excel数据转化为luckysheet能识别的data

2 excel文件转化为luckysheet格式--luckyexcel

利用上述代码 我们可以自己导入一个excel二进制,转化为luckysheet形式的data--上述excel效果就是这样生成的-----

痛点:官方转化存在一个bug,不能将excel的数据校验同步出来目前,需要修改底层方法--或者我们手动通过 setDataVerificatio方法 或者 直接在excel上设置数据验证

小提示:

(1) 咱针对一份excel 导出的data我们是可以保存为静态json的 并不需要每次都导入

(2) 咱对excel如果需要进行单元格宽度加宽等变更操作时,操作完我们可以直接从组件中获取最新的data进行json的替换 $0.__vue__--下次初始化就是最新的了

3 在线填写完的excel导出到本地生成excel文件--excelJS--exceljs文档

采用原因:功能巨强大,excel的功能基本都支持自定义,而且具有中文文档--以下已如何设置单元格信息作为举例

主要逻辑就是将excel数据先导出,基于数据进行自定义的转换

重点:导出的虚拟excel此时的单元格坐标 比数据单元格坐标少1(数据为数组,索引从0开始)--要一一对应

相关推荐
sleeppingfrog4 分钟前
konva实现canvas画图基础版本
前端·javascript·css
jingling5557 分钟前
Mark3D | 用 Mars3D 实现一个炫酷的三维地图
前端·javascript·3d·前端框架·html
这是个栗子10 分钟前
【前端知识点总结】请求/响应拦截器的介绍
前端·拦截器
Y‍waiX‍‍‮‪‎⁠‌‫‎‌‫‬11 分钟前
【npm】从零到一基于Vite+vue3制作自己的Vue3项目基础的npm包并发布npm
前端·npm·node.js
专注VB编程开发20年13 分钟前
vb.net宿主程序通过统一接口直接调用,命名空间要一致
服务器·前端·.net
2503_9284115614 分钟前
12.18 中后台项目-权限管理
前端·javascript·数据库
Y‍waiX‍‍‮‪‎⁠‌‫‎‌‫‬14 分钟前
NRM-NPM的镜像源管理工具使用方法
前端·npm·node.js
未来之窗软件服务5 小时前
一体化系统(九)智慧社区综合报表——东方仙盟练气期
大数据·前端·仙盟创梦ide·东方仙盟·东方仙盟一体化
陈天伟教授8 小时前
人工智能训练师认证教程(2)Python os入门教程
前端·数据库·python
信看9 小时前
NMEA-GNSS-RTK 定位html小工具
前端·javascript·html