在线编辑excel的微信小程序（在线编辑excel功能一次完整体验历程，以及可以避免的坑）

行业资讯 11 月前 0 63

excel实现在线编辑功能

1、需求描述

在我们正常的工作需求中会遇到需要我们实现在线便捷excel文档的时候，以前大家大部分是根据onlineoffice的免费api实现在线预览，也可以通过onlineoffice的收费接口进行在线编辑功能，现在我们有了另一个选择，就是根据最近开源的luckysheet组件进行在线编辑，但是由于luckysheet是一个前端项目，所以在此我开发了一个集成luckysheet到vue并且将数据存储到后台服务器数据库的项目，项目仓库位置如下git@

gitee.com:hdzxy/online-excel.git以下是搭建时候需要注意的要点

2、luchksheet集成【资源之家】方式及注意事项

Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。

集成方式一： CDN

集成方式二：本地引入

集成注意事项

1、vue项目中集成需要将Luckysheet引入到index.html中，否则会提示TypeError: luckysheet.create is not a function ，github上问题链接github.com/mengshukeji…

2、本地依赖引入只能在项目根目录，我的项目目录为public根目录下，而且打包后应该为dist目录的根目录一样否则页面会无法显示出sheet窗口

3、如果想要从页面加载外部文件到系统中则需要引入”luckyexcel”依赖，引入位置在package.json文件的dependencies模块中引入

{ “name”: “on【资源之家】line-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-r【资源之家】outer”: “^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”, “v【资源之家】ue-template-compiler”: “^2.6.11”, “webpack”: “^4.0.0” }, “browserslist”: [ “> 1%”, “last 2 versions”, “not dead” ] }

复制代码

3、服务器后端存储注意事项

表格初始化

由于我们需要将文件内容存储到后端服务器的数据库中所以我们需要注意以下几点具体的实现方式大家参考项目代码

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和非loadU【资源之家】rl获取动态数据

配置loadUrl的地址，Luckysheet会通过ajax请求表格数据，默认载入status为1的sheet数据中的所有data，其余的sheet载入除data字段外的所有字段

前端ajax获取json数据，赋值 options.data

var id = this.selected console.log(“id:” + id) this.$axios.post(“/sys/sysFile/edit”, Object.assign({ id: id })).then(res => { this.fileName = res.data【资源之家】.data var options = { container: luckysheet, showinfobar: false, lang: zh } //返回数据赋值 this.fileName = res.data.data.fileName; this.id = res.data.data.id options.data = res.data.data.fileData; options.title = this.fileName this.isMaskShow = false; 【资源之家】 window.luckysheet.destroy(); luckysheet.create(options) })

后台封装数据需要将数据库中读取的数据转化为jsonarray格式否则展示不出文件内容

@PostMapping(“edit”) public Response<SysFileVO> edit(@RequestBodySysFileDTO 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); }

作者：念尘雨

链接：

https://juejin.cn/post/7143930752218955790

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请【资源之家】注明出处。