springboot+Vue整合Luckysheet，實現在線編輯Excel表格

功能：頁面嵌入Luckysheet表格組件，能夠在線編輯Excel表格，實現表格的讀取，保存功能（不支持導出為xls文件，只能在線編輯）；
效果：

luckysheet： Luckysheet（https://github.com/mengshukeji/Luckysheet）是一款輕量的在線Excel渲染框架，易集成使用。支持二次開發。

Vue代碼：

<div id="luckysheet" style="position:relative;width:100%;height:96%;right: 0px;top: 0px;"></div>

mounted() {
  this.init();
},
methods:{
init() {
     
          const options = {
            container: 'luckysheet', // 設定DOM容器的id
            column: 30, //空表格默認的列數量
            row: 30, //空表格默認的行數據量
            // title:"title001",
            lang: 'zh', // 設定表格語言
            allowEdit: true,//作用：是否允許前台編輯
            // allowUpdate: true,
            allowCopy: true, //是否允許拷貝
            showtoolbar: true, //是否第二列顯示工具欄
            showinfobar: true, //是否顯示頂部名稱欄
            showsheetbar: true, //是否顯示底部表格名稱區域
            showstatisticBar: true, //是否顯示底部計數欄
            pointEdit: false, //是否是編輯器插入表格模式
            pointEditUpdate: null, //編輯器表格更新函數
            //data: [],    //這里是表格的數據 若要展示數據
            functionButton: '<button id="" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;">下載</button> <button id="" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">分享</button> <button id="luckysheet-share-btn-title" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">秀數據</button>'  //
          }
           // 初始化表格
          luckysheet.create(options) //  此處的luckysheet為上面div容器的id

        }
      })
      // 配置項
    }

用到的Api：

luckysheet.getAllSheets()  //獲取表格的全部配置與內容   為json數組格式。實現思路：將此json數組轉為json字符串，儲存到后台（保存），需要時從后台獲取json字符串，轉為json數組。再放到options中的data，即可渲染此數據到表格中（讀取）。