安装 依赖

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为容器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了

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

<el-upload
    name="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 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'
           });
       },

实现效果

仅供参考。