luckysheet + vue2 实现在线文档的保存(含模板导入)

效果图

1. 静态资源引入
   1. 把LuckySheet项目下下来 源码
      1. git 地址 : luckysheet: Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源
      2. 
   2. npm install 安装项目依赖 、 安装完成后继续npm run build 打包 会生成一个dise文件夹
   3. 把dist里面的文件（除了index.html外）全部复制到vue项目的publec目录下
2. 在public目录下的index.html 引入上面复制过来的资源(如果频繁出现空白页请使用绝对路径)

         <link rel='stylesheet' href='/plugins/css/pluginsCss.css' />
         <link rel='stylesheet' href='/plugins/plugins.css' />
         <link rel='stylesheet' href='/css/luckysheet.css' />
         <link rel='stylesheet' href='/assets/iconfont/iconfont.css' />
         <script src="/plugins/js/plugin.js"></script>
         <script src="/luckysheet.umd.js"></script>

3. 使用LuckySheet(vue 代码: 其中有调用后台接口的可以, 可以先注释掉)

   <template>
     <div class="hello">
       <div style="position: absolute;top:0;">
   
         <input style="font-size:16px;" type="file" @change="uploadExcel" />
         <button @click="getData">获取数据</button>
       </div>
   
       <div
           id="luckysheet"
           style="margin:0px;padding:0px;position:absolute;width:100%;left: 0px;top: 30px;bottom:0px; width: 100%; height: 800px;"
       ></div>
   
   
     </div>
   </template>
   
   <script>
   import LuckyExcel from 'luckyexcel'
   import {workOrderAPI} from "@/api";
   export default {
     name: 'HelloWorld',
     props: {
       msg: String
     },
     data() {
       return {
       }
   
     },
     mounted() {
       this.init();
     },
     methods: {
       getData(){
         // console.log(luckysheet.getAllSheets()[0])
         console.log(JSON.stringify(luckysheet.getAllSheets()[0]))
   
         // console.log("=======")
         // console.log(JSON.stringify(luckysheet.getAllSheets()[0].config))
         // console.log(JSON.stringify(luckysheet.getAllSheets()[0].celldata))
   
   
         const data = luckysheet.getAllSheets()[0];
   
         const param = {
           name: data.name,
           config: data.config,
           celldata: data.celldata,
           dataVerification: data.dataVerification,
           order: data.order,
           visibledatacolumn: data.visibledatacolumn,
           visibledatarow: data.visibledatarow
         }
   
         workOrderAPI.onlineExcel(param).then(res => {
           console.log(res)
         })
   
       },
       init() {
         workOrderAPI.getOnlineExcel().then(res => {
           var options = {
             data:[{}],
             container: 'luckysheet', //luckysheet为容器id
             lang:'zh',
             showGridLines:true,
             allowEdit:true,
             showinfobar: false, // 是否显示顶部信息栏
             showsheetbar: false, // 是否显示底部sheet页按钮
             showstatisticBar: false, // 是否显示底部计数栏
             sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
             userInfo: false, // 右上角的用户信息展示样式
             showstatisticBarConfig: {
               count:false,
               view:false,
               zoom:false,
             },
             showsheetbarConfig: {
               add: false, //新增sheet
               menu: false, //sheet管理菜单
               sheet: false, //sheet页显示
             },
             showtoolbar: true,  // 显示工具栏
             hook: {
               cellMousedown:this.cellMousedown,
             },
             enableAddBackTop:false,
             enableAddRow:false
           }
           console.log("=============================")
           console.log([res.data])
           options.data = [res.data]
   
   
           console.log(options)
           luckysheet.create(options)
         })
   
         console.log("----------------------")
   
   
   
   
       },
       uploadExcel(evt) {
         const files = evt.target.files;
         if (files == null || files.length == 0) {
           alert("No files wait for import");
           return;
         }
   
         let name = files[0].name;
         let suffixArr = name.split("."), suffix = suffixArr[suffixArr.length - 1];
         if (suffix != "xlsx") {
           alert("Currently only supports the import of xlsx files");
           return;
         }
         LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
   
           if (exportJson.sheets == null || exportJson.sheets.length == 0) {
             alert("Failed to read the content of the excel file, currently does not support xls files!");
             return;
           }
           window.luckysheet.destroy();
   
   
   
           window.luckysheet.create({
             container: 'luckysheet', //luckysheet is the container id
             showinfobar: false,
             showtoolbar: false,  // 显示工具栏
             showsheetbarConfig: {
               add: false, //新增sheet
               menu: false, //sheet管理菜单
               sheet: false, //sheet页显示
             },
             lang:'zh',
             data: exportJson.sheets,
             title: exportJson.info.name,
             userInfo: exportJson.info.name.creator
   
           });
         });
       },
   
     }
   }
   </script>
   
   <!-- Add "scoped" attribute to limit CSS to this component only -->
   <style scoped>
   </style>
   

4. 后台接口

       @PostMapping("/online/excel")
       public Object onlineExcel(@RequestBody OnlineExcelData param){
   
           param.setRow(0);
           param.setColumn(0);
   
           System.out.println("-------");
           System.out.println(param.getDataVerification());
           System.out.println("-------");
   
   
   
           System.out.println(JSONObject.toJSONString(param));
   
           String s = DeflaterUtils.zipString(JSONObject.toJSONString(param));
           System.out.println(s);
           System.out.println("====");
           System.out.println(DeflaterUtils.unzipString(s));
   
           RedisManager.setString("dyz",s,-1);
           return "ok";
       }
   
       @GetMapping("/online/excel")
       public String onlineExcel(){
   
           String dyz = RedisManager.getString("dyz");
   
           String s = DeflaterUtils.unzipString(dyz);
           return s;
       }

5. 实体类

   package com.storm.operation.controller.workorder;
   
   import lombok.Data;
   
   import java.util.List;
   import java.util.Map;
   
   /**
    * @author duyizhou
    * @date 2024/5/30 14:35
    */
   @Data
   public class OnlineExcelData {
       private String name;
       private Map<String,Object> config;
       private Object celldata;
       private Object dataVerification;
       private String order;
       private List<Integer> visibledatacolumn;
       private List<Integer> visibledatarow;
   
       private Integer row;
       private Integer column;
   }
   

6. 压缩工具类

   package com.storm.operation.controller.workorder;
   import java.io.ByteArrayOutputStream;
   import java.util.Base64;
   import java.util.zip.DataFormatException;
   import java.util.zip.Deflater;
   import java.util.zip.Inflater;
   /**
    * @author duyizhou
    * @date 2024/5/30 15:23
    */
   public class DeflaterUtils {
       /**
        * 压缩
        */
       public static String zipString(String unzipString) {
           /**
            *     https://www.yiibai.com/javazip/javazip_deflater.html#article-start
            *     0 ~ 9 压缩等级 低到高
            *     public static final int BEST_COMPRESSION = 9;            最佳压缩的压缩级别。
            *     public static final int BEST_SPEED = 1;                  压缩级别最快的压缩。
            *     public static final int DEFAULT_COMPRESSION = -1;        默认压缩级别。
            *     public static final int DEFAULT_STRATEGY = 0;            默认压缩策略。
            *     public static final int DEFLATED = 8;                    压缩算法的压缩方法(目前唯一支持的压缩方法)。
            *     public static final int FILTERED = 1;                    压缩策略最适用于大部分数值较小且数据分布随机分布的数据。
            *     public static final int FULL_FLUSH = 3;                  压缩刷新模式，用于清除所有待处理的输出并重置拆卸器。
            *     public static final int HUFFMAN_ONLY = 2;                仅用于霍夫曼编码的压缩策略。
            *     public static final int NO_COMPRESSION = 0;              不压缩的压缩级别。
            *     public static final int NO_FLUSH = 0;                    用于实现最佳压缩结果的压缩刷新模式。
            *     public static final int SYNC_FLUSH = 2;                  用于清除所有未决输出的压缩刷新模式; 可能会降低某些压缩算法的压缩率。
            */
   
           //使用指定的压缩级别创建一个新的压缩器。
           Deflater deflater = new Deflater(Deflater.BEST_COMPRESSION);
           //设置压缩输入数据。
           deflater.setInput(unzipString.getBytes());
           //当被调用时，表示压缩应该以输入缓冲区的当前内容结束。
           deflater.finish();
   
           final byte[] bytes = new byte[256];
           ByteArrayOutputStream outputStream = new ByteArrayOutputStream(256);
   
           while (!deflater.finished()) {
               //压缩输入数据并用压缩数据填充指定的缓冲区。
               int length = deflater.deflate(bytes);
               outputStream.write(bytes, 0, length);
           }
           //关闭压缩器并丢弃任何未处理的输入。
           deflater.end();
           return Base64.getEncoder().encodeToString(outputStream.toByteArray());
       }
   
       /**
        * 解压缩
        */
       public static String unzipString(String zipString) {
           byte[] decode = Base64.getDecoder().decode(zipString);
   
           //创建一个新的解压缩器  https://www.yiibai.com/javazip/javazip_inflater.html
   
           Inflater inflater = new Inflater();
           //设置解压缩的输入数据。
           inflater.setInput(decode);
           final byte[] bytes = new byte[256];
           ByteArrayOutputStream outputStream = new ByteArrayOutputStream(256);
           try {
               //finished() 如果已到达压缩数据流的末尾，则返回true。
               while (!inflater.finished()) {
                   //将字节解压缩到指定的缓冲区中。
                   int length = inflater.inflate(bytes);
                   outputStream.write(bytes, 0, length);
               }
           } catch (DataFormatException e) {
               e.printStackTrace();
               return null;
           } finally {
               //关闭解压缩器并丢弃任何未处理的输入。
               inflater.end();
           }
   
           return outputStream.toString();
       }
   }