vue集成Luckyexcel实现在线编辑Excel，可自行导入，也可从服务器端获取 |
您所在的位置：网站首页 › excel在线编辑插件 › vue集成Luckyexcel实现在线编辑Excel，可自行导入，也可从服务器端获取 |
vue集成Luckyexcel实现在线编辑Excel，可自行导入，也可从服务器端获取
|
安装 依赖 npm install luckyexcel在页面中引入 import LuckyExcel from 'luckyexcel'html中 在mounted中注册 var options = { container: 'luckysheet', //luckysheet为容器id title:'', 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了 我是在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 id showinfobar:false, data:exportJson.sheets, title:exportJson.info.name, userInfo:exportJson.info.name.creator }); },也可以采用从服务器获取文件 返回的是文件流格式，需要转成file getFlie(){ //请求接口 获取参数 downloadPDF({"filePath": xxxx-7388ec99358e.xlsx"}).then(res => { //这里需要将获取到的base64 转成 file let 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 id showinfobar: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' }); },实现效果 仅供参考。 |
如果想使用自定义上传文件 可以在HTML中加入upload上传组件（也可以采用其他方式上传）
【本文地址】
今日新闻 |
推荐新闻 |