使用spreadjs作为核心控件使用教程（2）

时间：2025-02-15 07:42:52

1：spreadjs数据存储方案。

（1）：以json形式保存。（2）：直接保存excel文件

其中方法二已经在官方有个Java的实现方案就不再重复了。

2：以json形式保存的解决方案。

这里我选择为json形式保存是为了后期优化，如果后期性能有问题，可能还需要细化，比如json文件再以拆分为多个sheet，前端点击哪个sheet再加载哪个sheet的数据，修改成功也只需要保存到对应的sheet去，我的环境是excel文件会比较大，excel文件转成文本文件（json）的大小对比为1：8左右，也就是说10M的表格传到后台在传输中这个json字符串就快100M了，可以分分钟把你浏览器搞崩溃，所以必须得前后端进行压缩。

function importAndAdd(json) {
//这里json是spreadjs前端导入的json，我是在前端导入顺便写入到服务器上。
 //var excelIo = new ();
  //  (excelFile, function (json) {
  //  }
//pako  官网：/nodeca/pako   导入dist包下的即可.
    json = ((json), {to: "string"});
    $.ajax({
        url:'/xxxxx/xxxxx',
        type:"post",
        dataType:"json",
        data:{
            workbookObj:json
        },
        success:function (data) {
        
        },
        error:function (resp) {
            alert((resp));
        }
    })
后台：
@RequestMapping(value = "importExcelInfo")
public ServerResponse importExcelInfo(HttpServletRequest request){
    //TODO 查询excel 信息的集合  tomcat需要设置东西
    String excelJson=("workbookObj");
    Integer userId=();
    Long millis=();


    StringBuffer path=new StringBuffer();
    ();
    (userId+"\\");
    (millis+"\\");
    ("path:"+path);
    File filePath = new File(());
    if(!()){
        ();
    }
    try {
        excelJson=(excelJson);
    } catch (Exception e) {
        ();
    }
    (()+".json");
    File file = new File(());
    if(!()){
        try {
            ();
        } catch (IOException e) {
            ();
        }
    }
    try {
        if(excelJson!=null && !"null".equals(excelJson) ){
             ((),excelJson);
        }
    } catch (IOException e) {
        ();
    }

    ();

    //插入和生成文件都要成功。
    if(sqlFlag){
        return    (());
    }else{
        return ();
    }
}

 

GZIPUtils：

public class GZIPUtils {
    /**
     * GZIP压缩
     *
     */
    public static String compress(String str) throws IOException {
        if (null == str || () <= 0) {
            return str;
        }
        // 创建一个新的输出流
        ByteArrayOutputStream out = new ByteArrayOutputStream();
        // 使用默认缓冲区大小创建新的输出流
        GZIPOutputStream gzip = new GZIPOutputStream(out);
        // 将字节写入此输出流
        (("utf-8"));  //因为后台默认字符集有可能是GBK字符集，所以此处需指定一个字符集
        ();
        // 使用指定的 charsetName，通过解码字节将缓冲区内容转换为字符串
        return ("ISO-8859-1");
    }

    // 解压缩
    public static String uncompress(String str) throws IOException {
        if (str == null || () == 0) {
            return str;
        }
        ByteArrayOutputStream out = new ByteArrayOutputStream();
        ByteArrayInputStream in = new ByteArrayInputStream(str
                .getBytes("iso-8859-1"));
        GZIPInputStream gunzip = new GZIPInputStream(in);
        byte[] buffer = new byte[256];
        int n;
        while ((n = (buffer)) >= 0) {
            (buffer, 0, n);
        }
        // toString()使用平台默认编码，也可以显式的指定如toString(&quot;GBK&quot;)
        return ("utf-8");
    }

}
以上就是前端压缩到后台解压将真实的内容写入到服务器中去。下面是读取，读取需要服务端压缩，然后客户端也就是浏览器解压。

核心代码如下：

@RequestMapping(value = "xxxx", produces = "application/text; charset=utf-8")
public String show(HttpServletResponse response){
   
//filepath=BASE_LOCAL_URL+"1111\\1111\\";//注意filepath的内容；
    ("id:"+id+"filepath:"+filepath);
    File file=new File(filepath);
    StringBuffer b=new StringBuffer();
    BufferedReader brname;
    try {
        InputStreamReader read = new InputStreamReader(new FileInputStream(file), "UTF-8");
        BufferedReader bufferedReader = new BufferedReader(read);
        String sname = null;
        while ((sname = ()) != null) {
            // (sname);
            (sname);
        }
    } catch (Exception e1) {
        // TODO Auto-generated catch block
        ("():"+());
        ();

    }
    String jsonText=();
    try {
        String gizpJsonText=(jsonText);
        ("压缩前："+()+"压缩后长度："+());
        return gizpJsonText;
    } catch (IOException e) {
        ();
    }
    return jsonText;
}

 

这里面其实就差一个url，给url赋个值就可以用了。

 

前端解压：

 

$.ajax({
    type: 'post',
    url:"/xxx/xxx",
    async:true,
    data:{},
    dataType:"text",
    success:function(resp){
        if (>0){
            //不为空的excel=导入等方式。
           var json =( resp, { to: 'string' } ); // ungzip
            var spread2 = $("#ss").data("workbook");
            ((json));
 
    },
    error:function(error){}

});

通过对比解压前后可以发现效率有了大大的提升。下面部分将是在spreadjs加上自己的操作，比如右键额外加菜单等等。

 

相关文章