spreadJs导入、Java保存到数据库

下载并引用spreadJs

定义全局变量,初始化表格控件 var $this = this;this.spread_obj;

$this.spread_obj = new GC.Spread.Sheets.Workbook(document.getElementById('xxx'));

function fn_import() {
        var lay = layer.open({
            type: 5,
            title: '导入文件',
            closeBtn: true,
            area: ['350px', 'auto'],
            btn: ['保存', '取消'],
            btnAlign: 'c',
            scrollbar: false,
            moveType: 1,
            content: ' <input type="file" id="fileDemo" class="input"',
            success: function(e, index) {
 
            },
            yes: function(index, layero) {
                var files = $('#fileDemo').val();
                var suffix = files.substring(files.lastIndexOf(".") + 1, files.length);
                if (suffix == "xls" || suffix == "xlsx") {
                    var excelFile = document.getElementById('fileDemo').files[0];
                    var tempSpread = $this.spread_obj;
                    var excelIO = new GC.Spread.Excel.IO();
                    excelIO.open(excelFile, function(json) {
                        tempSpread.fromJSON(
                            json, {
                                ignoreFormula: false,
                                ignoreStyle: false,
                                frozenColumnsAsRowHeaders: false,
                                frozenRowsAsColumnHeaders: false
                            }
                        );
                        layer.close(lay);
                    }, function(e) {
                        // process error
                        console.log(e);
                    });
                } else {
                    layer.msg("请选择excel文件！");
                }
            }
        });
 
    }

function fn_save_add(callback) {
var template_property = escape(
            JSON.stringify(
                $this.spread_obj.toJSON({
                    //includeBindingSource: true,
                    ignoreStyle: false,
                    ignoreFormula: false,
                    rowHeadersAsFrozenColumns: false,
                    columnHeadersAsFrozenRows: false
                })
            )
        );
$.ajax({
            type: "POST",
            url: panchina.spreadjs.common.url() + "/system/api/template/v1/addTemplate",
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(template_property),
            xhrFields: {
                withCredentials: true
            },
            success: function(result) {
                layer.close(index);
                if (result.code == 200) {
                    layer.msg("保存成功", {
                        time: 2000,
                        icon: 1
                    });
                } else {
                    console.log(result);
                    if (result.message) {
                        layer.msg("保存失败：" + result.message, {
                            time: 4000,
                            icon: 2
                        });
                    } else {
                        layer.msg("保存失败：" + result.msg, {
                            time: 4000,
                            icon: 2
                        });
                    }
                }
            },
            error: function(xhr, msg, ex) {}
        });
}

//controller文件
 
//保存新增调查表模板数据
    @PostMapping("/v1/addTemplate")
    @ApiOperation(value = "保存新增调查表模板数据")
    public ApiResult addTemplate(@RequestBody QuestionaryTemplateVO query) {
        return templateService.addTemplate(query);
    }
//service文件
 
@Override
    @Transactional(rollbackFor = Exception.class)
    public ApiResult addTemplate(QuestionaryTemplateVO query) {
        //模板编号不能重复
        Long existId = questionaryTemplateMapperExt.getTemplateByTemplateCode(query.getTemplate().getCode());
        if (existId != null) {
            return ApiResult.error("模板编码已存在");
        }
        Map map = new HashMap();
        try {
            query.getData().setId(PrimaryKeyUtil.getPrimaryKeyId());
            query.getData().setTemplateId(query.getTemplate().getId());
            //模板数据解码
            query.getData().setTemplateData(ConvertFormUtil.unescape(query.getData().getTemplateData()));
            questionaryTemplateDataMapper.insert(query.getData());
            map.put("templateId", query.getTemplate().getId());
 
        } catch (InvalidSystemClockException e) {
            throw new CustomException(400, "主键生成异常");
        }
        return ApiResult.ok(map);
    }
 
//util文件
public class ConvertFormUtil {
 
    //存在中文乱码问题
    public static String ConvertForm(String convertStr) {
        String str = convertStr.replaceAll("%(?![0-9a-fA-F]{2})", "%25");
        return URLDecoder.decode(str);
    }
 
    public static String unescape(String src) {
        StringBuffer tmp = new StringBuffer();
        tmp.ensureCapacity(src.length());
        int lastPos = 0, pos = 0;
        char ch;
        while (lastPos < src.length()) {
            pos = src.indexOf("%", lastPos);
            if (pos == lastPos) {
                if (src.charAt(pos + 1) == 'u') {
                    ch = (char) Integer.parseInt(src
                            .substring(pos + 2, pos + 6), 16);
                    tmp.append(ch);
                    lastPos = pos + 6;
                } else {
                    ch = (char) Integer.parseInt(src
                            .substring(pos + 1, pos + 3), 16);
                    tmp.append(ch);
                    lastPos = pos + 3;
                }
            } else {
                if (pos == -1) {
                    tmp.append(src.substring(lastPos));
                    lastPos = src.length();
                } else {
                    tmp.append(src.substring(lastPos, pos));
                    lastPos = pos;
                }
            }
        }
        return tmp.toString();
    }
}

注：MySQL根据配置文件会限制Server接受的数据包大小。有时候插入、更新或查询时数据包的大小，会受 max_allowed_packet 参数限制，导致操作失败。

show VARIABLES like '%max_allowed_packet%';查看

set global max_allowed_packet = 20*1024*1024*10 ;修改