vue集成Luckyexcel实现在线编辑Excel，可自行导入，也可从服务器端获取

安装依赖

npm install luckyexcel

在页面中引入

import LuckyExcel from 'luckyexcel'

html中

<div id="luckysheet" style="margin:0px;padding:0px;width:100%;height:100%;"></div>

在mounted中注册

var options = {container: 'luckysheet', //luckysheet为容器idtitle:'',lang:'zh',showinfobar:false,data:[{"name": "Cell", //工作表名称"color": "", //工作表颜色"index": 0, //工作表索引"status": 1, //激活状态"order": 0, //工作表的下标"hide": 0,//是否隐藏"row": 36, //行数"column": 18, //列数"defaultRowHeight": 19, //自定义行高"defaultColWidth": 73, //自定义列宽"celldata": [{"r":0,"c":0,"v":{"v":1232,"ct":{"fa":"General","t":"n"},}},{"r":0,"c":1,"v":{"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1,"v":2,"ct":{"fa":"General","t":"n"},"m":"2"}},{"r":0,"c":2,"v":{"fc":"rgb(51, 51, 51)","ht":1,"vt":1,"v":3,"ct":{"fa":"General","t":"n"},"m":"3"}},{"r":0,"c":3,"v":{"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1,"v":0,"ct":{"fa":"General","t":"n"},"m":"0","f":"=Formula!D3+Formula!D4"}},{"r":0,"c":4,"v":{"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":0,"c":5,"v":{"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},{"r":0,"c":6,"v":{"bl":0,"it":0,"ff":0,"fs":11,"fc":"rgb(51, 51, 51)","ht":1,"vt":1}},], //初始化使用的单元格数据"config": {"merge": {}, //合并单元格"rowlen":{}, //表格行高"columnlen":{}, //表格列宽"rowhidden":{}, //隐藏行"colhidden":{}, //隐藏列"borderInfo":{}, //边框"authority":{}, //工作表保护},},{"name": "Sheet2","color": "","index": 1,"status": 0,"order": 1,"celldata": [],"config": {}},{"name": "Sheet3","color": "","index": 2,"status": 0,"order": 2,"celldata": [],"config": {},}]}luckysheet.create(options)

就能看见一个在线编辑的Excel了

如果想使用自定义上传文件
可以在HTML中加入upload上传组件（也可以采用其他方式上传）

<el-uploadname="file"ref="upload"action=" ":limit="1":file-list="fileList":before-upload="beforeUpload"><el-button slot="trigger" size="small" type="primary">选取文件</el-button></el-upload>

我是在beforeupload方法中拿到file文件，然后传入luckyexcel封装好的方法中，只能是xlsx格式文件

beforeUpload(file) {console.log('file',file);let suffix = this.getSuffix(file.name);if (suffix !== "xlsx" ) {this.$message.error("文件格式只能是.xlsx");return false;}luckysheet.destroy(); // 先销毁当前容器LuckyExcel.transformExcelToLucky(file, function(exportJson,luckysheetfile) {if (exportJson.sheets == null || exportJson.sheets.length == 0) {this.$message.warning("读取excel文件内容失败，目前不支持xls文件!");return;}luckysheet.create({container: 'luckysheet', //luckysheet is the container idshowinfobar:false,data:exportJson.sheets,title:exportJson.info.name,userInfo:exportJson.info.name.creator});},

也可以采用从服务器获取文件返回的是文件流格式，需要转成file

getFlie(){//请求接口  获取参数downloadPDF({"filePath": xxxx-7388ec99358e.xlsx"}).then(res => {//这里需要将获取到的base64 转成 filelet filetext = this.changefile(res.data,'spling.xlsx')console.log(filetext)//主要功能代码luckysheet.destroy(); // 先销毁当前容器LuckyExcel.transformExcelToLucky(filetext, function(exportJson,luckysheetfile) {if (exportJson.sheets == null || exportJson.sheets.length == 0) {this.$message.warning("读取excel文件内容失败，目前不支持xls文件!");return;}luckysheet.create({container: 'luckysheet', //luckysheet is the container idshowinfobar:false,data:exportJson.sheets,title:exportJson.info.name,userInfo:exportJson.info.name.creator});});})},

转file的方法

 changefile(dataurl, filename){var bstr = window.atob(dataurl);var n = bstr.length;var u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type:'application/vnd.ms-excel'});},

实现效果

仅供参考。

vue集成Luckyexcel实现在线编辑Excel，可自行导入，也可从服务器端获取相关推荐

springboot+Vue整合Luckysheet，实现在线编辑Excel表格
springboot+Vue整合Luckysheet,实现在线编辑Excel表格功能:页面嵌入Luckysheet表格组件,能够在线编辑Excel表格,实现表格的读取,保存功能(不支持导出为xls文 ...
Vue实现在线编辑excel、导入、导出
文章目录概要整体架构流程小结概要 Vue实现在线编辑excel.导入.导出整体架构流程 luckysheet文档地址 exceljs文档地址 1.npm安装依赖 npm i exceljs ...
vue 在线编辑excel表格（原生和使用组件的两种方式）
vue 在线编辑excel表格(原生和使用组件的两种方式) top表头和left表头格式的表格 <template><div>& ...
VUE 在线编辑 EXCEL , SPERADJS的使用
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.VUE 在线编辑 EXCEL 功能二.使用步骤 1.引入库 2.组件制作前言 spreadjs的使用提示:以 ...
Vue实现在线编辑excel
目录 luckysheet 1.插件引入 2.声明excel在线预览编辑组件 3.excelJs分解Dom为excel文件流 luckysheet文档地址 exceljs文档地址前言介 ...
【Java】多人协同在线编辑Excel源代码及部署包
1. 背景在互联网环境中,我们可以使用腾讯云文档.金山云文档等在线编辑Excel,但内网环境下却一直没有类似的工具,直到开源项目 LuckySheet 横空出世! 以下就是基于 LuckyShee ...
html excel 在线编辑,利用js实现在线编辑excel表格代码
特效描述:利用js实现在线编辑 excel 表格代码.利用js实现在线编辑excel表格代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 function load(){ x ...
Vue+springboot集成PageOffice实现在线编辑Word、excel文档
说明: PageOffice是一款在线的office编辑软件,帮助Web应用系统或Web网站实现用户在线编辑Word.Excel.PowerPoint文档.可以完美实现在线公文流转,领导批阅,盖章.可 ...
Vue+SpringBoot 集成 PageOffice 实现在线编辑Word、excel文档
说明: PageOffice是一款在线的office编辑软件,帮助Web应用系统或Web网站实现用户在线编辑Word.Excel.PowerPoint文档.可以完美实现在线公文流转,领导批阅,盖章.可 ...

vue集成Luckyexcel实现在线编辑Excel，可自行导入，也可从服务器端获取

vue集成Luckyexcel实现在线编辑Excel，可自行导入，也可从服务器端获取相关推荐

最新文章

热门文章