在线编辑excel文件实现服务器后台存储,及页面还原
excel实现在线编辑功能
1、需求描述
在我们正常的工作需求中会遇到需要我们实现在线便捷excel文档的时候,以前大家大部分是根据onlineoffice的免费api实现在线预览,也可以通过onlineoffice的收费接口进行在线编辑功能,现在我们有了另一个选择,就是根据最近开源的luckysheet组件进行在线编辑,但是由于luckysheet是一个前端项目,所以在此我开发了一个集成luckysheet到vue并且将数据存储到后台服务器数据库的项目,项目仓库位置如下git@gitee.com:hdzxy/online-excel.git以下是搭建时候需要注意的要点
2、luchksheet集成方式及注意事项
Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。
集成方式一: CDN
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>
集成方式二:本地引入
<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>
集成注意事项
1、vue项目中集成需要将Luckysheet引入到index.html中,否则会提示TypeError: luckysheet.create is not a function ,github上问题链接https://github.com/mengshukeji/luckysheet-vue/issues/8
2、本地依赖引入只能在项目根目录,我的项目目录为public根目录下,而且打包后应该为dist目录的根目录一样否则页面会无法显示出sheet窗口
3、如果想要从页面加载外部文件到系统中则需要引入"luckyexcel"依赖,引入位置在package.json文件的dependencies模块中引入
{"name": "online-excel-web","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"},"dependencies": {"axios": "^0.21.1","codemirror": "^5.59.1","core-js": "^3.6.5","element-ui": "^2.15.0","js-yaml": "^4.1.0","mockjs": "^1.1.0","qs": "^6.10.1","vue": "^2.6.11","vue-router": "^3.2.0","vuex": "^3.6.2","yaml": "^2.1.1","luckyexcel": "^1.0.0"},"devDependencies": {"@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-router": "~4.5.0","@vue/cli-plugin-vuex": "~4.5.0","@vue/cli-service": "~4.5.0","mockjs": "^1.1.0","node-sass": "^6.0.1","sass": "^1.26.5","sass-loader": "^10.2.0","vue-template-compiler": "^2.6.11","webpack": "^4.0.0"},"browserslist": ["> 1%","last 2 versions","not dead"]
}
3、服务器后端存储注意事项
表格初始化
<script>$(function () {//配置项var options = {container: 'luckysheet' ,//luckysheet为容器idtitle: 'Luckysheet Demo', // 设定表格名称lang: 'zh' // 设定表格语言}// 初始化表格luckysheet.create(options)})
</script>
由于我们需要将文件内容存储到后端服务器的数据库中所以我们需要注意以下几点具体的实现方式大家参考项目代码
1、我们通过luckysheet.getAllSheets() // 得到表的数据,由于数据内容特别长所以数据字段需要设置为longtext字段否则数据存储失败
2、向后台存储数据的时候需要进行json格式化这样数据保存结果就是json字符串,易于我们进行回显展示
saveExcel() {var objsheet = luckysheet.getAllSheets() // 得到表的数据console.log("luckysheet======" + luckysheet)console.log(this.fileName)console.log(this.id)var fileContent = JSON.stringify(objsheet);this.$axios.post("/sys/sysFile/save", Object.assign({id: this.id,fileName: this.fileName,fileContent: fileContent})).then(res => {console.log("sucess")})}
3、前台回显数据库保存内容的时候我们可以采用loadUrl和非loadUrl获取动态数据
配置loadUrl的地址,Luckysheet会通过ajax请求表格数据,默认载入status为1的sheet数据中的所有data,其余的sheet载入除data字段外的所有字段
前端ajax获取json数据,赋值 options.data
var id = this.selectedconsole.log("id:" + id)this.$axios.post("/sys/sysFile/edit", Object.assign({id: id})).then(res => {this.fileName = res.data.datavar options = {container: 'luckysheet',showinfobar: false,lang: 'zh'}//返回数据赋值this.fileName = res.data.data.fileName;this.id = res.data.data.idoptions.data = res.data.data.fileData;options.title = this.fileNamethis.isMaskShow = false;window.luckysheet.destroy();luckysheet.create(options)})
后台封装数据需要将数据库中读取的数据转化为jsonarray格式否则展示不出文件内容
@PostMapping("edit")public Response<SysFileVO> edit(@RequestBody SysFileDTO sysFileDTO){SysFile sysFile = sysFileService.getById(sysFileDTO.getId());SysFileVO sysFileVO = new SysFileVO();BeanUtils.copyBean(sysFile,sysFileVO);sysFileVO.setFileData(JSONArray.parseArray(sysFile.getFileContent()));return Response.success(sysFileVO);}
在线编辑excel文件实现服务器后台存储,及页面还原相关推荐
- x-data-spreadsheet 在线编辑excel文件,支持导入/导出/上传/读取网络 excel,合并单元格(vue版本)
1. 环境 vue:2.6.10 x-data-spreadsheet:1.1.8 less:4.0.0 less-loader:7.1.0 xlsx:0.15.1 axios:0.18.1 2. 优 ...
- VUE 在线编辑 EXCEL , SPERADJS的使用
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.VUE 在线编辑 EXCEL 功能 二.使用步骤 1.引入库 2.组件制作 前言 spreadjs的使用 提示:以 ...
- springboot+Vue整合Luckysheet,实现在线编辑Excel表格
springboot+Vue整合Luckysheet,实现在线编辑Excel表格 功能:页面嵌入Luckysheet表格组件,能够在线编辑Excel表格,实现表格的读取,保存功能(不支持导出为xls文 ...
- 可以在浏览器中在线编辑office文件的扩展程序汇总
2017年chrome插件推荐八期:可以在浏览器中在线编辑office文件的扩展程序汇总 Chrome插件推荐 2018-02-28 11:37 微软的Office应用软件是目前办公软件中使用 ...
- matlab显示服务器出现意外,Matlab 读取excel文件提示服务器出现意外情况或无法读取问题解决...
1.问题描述: 该错误通常发生在应用函数读取excel文件(后缀xls或xlsx)时. 应用xlsread函数读取提示服务器出现意外情况: 应用importdata读取时提示can't open fi ...
- Vue实现在线编辑excel
目录 luckysheet 1.插件引入 2.声明excel在线预览编辑组件 3.excelJs分解Dom为excel文件流 luckysheet文档地址 exceljs文档地址 前言介 ...
- 【Java】多人协同在线编辑Excel源代码及部署包
1. 背景 在互联网环境中,我们可以使用 腾讯云文档.金山云文档等在线编辑Excel,但内网环境下却一直没有类似的工具,直到开源项目 LuckySheet 横空出世! 以下就是基于 LuckyShee ...
- Vue实现在线编辑excel、导入、导出
文章目录 概要 整体架构流程 小结 概要 Vue实现在线编辑excel.导入.导出 整体架构流程 luckysheet文档地址 exceljs文档地址 1.npm安装依赖 npm i exceljs ...
- Matlab 读取excel文件提示服务器出现意外情况或无法读取问题解决
Matlab 读取excel文件提示服务器出现意外情况或无法读取问题解决 参考文章: (1)Matlab 读取excel文件提示服务器出现意外情况或无法读取问题解决 (2)https://www.cn ...
最新文章
- c语言得到系统的函数,c语言系统函数(C language system function).doc
- tensorflow 测试 cuda 是否安装成功,测试代码环境
- centos内核参数优化
- SQL语句--INSERT INTO SELECT 语句用法示例
- C#微信公众号开发系列教程三(消息体签名及加解密)
- python json unicode_python2下解决json的unicode编码问题
- LeetCode 904. 水果成篮(滑动窗口)
- .net 中使用socket (c#)
- mysql3错误_第3行MYSQL语法错误
- __stdcall __cdecl 引起的程序崩溃
- 数据科学 IPython 笔记本 8.2 Matplotlib 的应用
- 分组(recyclerview嵌套)
- 电脑不香吗?我在手机上装Python我图什么?
- 设计者模式之GOF23命令模式
- 黑马安卓74期Android基础(0)
- python实现一个简单的tftp客户端
- go技术文章梳理(2017)
- 北大中文核心期刊目录(2004年版)工业技术类
- Navicat还原nb3备份文件
- matlab 判断大小写,匹配正则表达式(区分大小写)
热门文章
- 雷军:企业如何渡过寒冬?你需要学会这5招
- 关于华为P10(Android 8.0系统)出现的一个莫名奇妙的ANR
- 回收站清空了怎么恢复?快来get实用方法!
- openssh8.3p1 RPM 升级
- python 爬虫request ssl_Python request SSL证书问题
- 海明码,码距,海明校验码
- acwing 206 石头游戏 矩阵快速幂
- 【CS231n】斯坦福大学李飞飞视觉识别课程笔记(十九):卷积神经网络笔记(下)
- 完全卸载3dmax(以及桌子全家产品)
- JAVA 学习日志 测试抽象类的程序,每天进步/退步一点点,变化很大哦,努力!