Vue实现在线编辑excel

目录

luckysheet

1.插件引入

2.声明excel在线预览编辑组件

3.excelJs分解Dom为excel文件流

Vue实现在线编辑excel_第1张图片

luckysheet文档地址

exceljs文档地址


前言介绍:原先平台没有要求在线编辑excel功能,excel文件是表单新增记录展现表格信息的一条记录信息,用于展示excel文件名称,支持下载功能,后续可能是客户嫌弃文件下载网速过慢,所以要求支持在线预览和编辑功能。项目周会讨论时提到这个需求,我当时的第一反应是这个功能前端来做的话,从18年开始网上生态情况,开源插件很少,功能支持完善较好的似乎都是收费的,所以当时会议就说明,实现这个功能就两种情况,公司对这个项目平台能不能支持收费插件,不能的话只能做网上找开源做阉割版。后续讨论,对这个功能采取使用不收费的插件。

Vue实现在线编辑excel_第2张图片 _,那能怎么办,作为开发那就是搬轮子造轮子呗,网上文档查询一波,发现2021了关于这方面的技术方案和开源插件都友好很多,_点进来的小伙伴如果公司支持收费插件的话,可以试试这几个方案

wpsJs、石墨文档、腾讯文档、__spreedJs


luckysheet

官方示例项目地址 :Luckysheet: ??Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。

这里后面我就直接贴代码了,因为前言时说了,在线编辑预览是新增功能,所以花费时间和改动地方越少越好,原先excel文件导出功能是后台java根据模板接口返回文件流,然后前端转换二进制Blob数据对象导出的,这里功能接入就前端做下改动,没要求后端跟着同步照着luckysheet官方给出的方案做在线编辑功能。

1.插件引入

Vue引入luckysheet,index.html头部标签head中引入


    
    
    
    
    

然后package.json中添加两项依赖

"exceljs": "^4.2.0",
"luckyexcel": "^1.0.0",

2.声明excel在线预览编辑组件




                    
                    

你可能感兴趣的:(前端,html,vue.js,前端,javascript)