excel操作の页面下载一个excel模版

本文介绍了一个关于编制数导入的功能实现方案,包括前端使用MOY框架进行页面设计及交互处理,后端采用SSM框架配合Dubbo、Redis等组件完成数据处理流程。详细展示了从下载模板、文件上传到数据验证及导入的全过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先前也做过下载和导入,也在先前的博客中写过,不过技术总在更新,现在发现一个也挺好用,页面效果,后台操作也很方便的方法。
项目框架说明:

  • 前端用的是模块化框架MOY

moy 是基于模型框架 kero 和 UI 框架 neoui 实现的应用框架,是一种前端集成解决方案,为企业级应用开发而生。
github地址:https://github.com/iuap-design/tinper-moy

  • 后台是ssm框架整合doubbo,redis,rabbitmq等。集成maven

1.页面效果

这里写图片描述
对应html部分:

<div class="asset-import person-import common-import">
    <div class="modal" id="importModal" role="dialog" aria-labelledby="importModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h4>导入编制数</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" data-bind="click:events.close">×</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div id="myCarousel" class="carousel slide" data-interval="false">
                        <div class="carousel-inner">
                            <div class="item active">
                                <div class="import-second">
                                    <div class="second-up">
                                        <span class="pull-left">请下载模板:</span>
                                        <div class="pull-left person-download person-red">
                                            <span>编制数导入模板(点击下载)</span>
                                            <div class="down-progress">
                                                <i class="fa fa-check"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="second-down clearfix margin-left-0">
                                        <span class="pull-left">请选择要导入的文件:</span>
                                        <input type="file" onchange="importf(this)" id="importInput"/>
                                    </div>
                                </div>

                                <div class="modal-btn">
                                    <button href="#myCarousel"  data-bind="click:events.importData" class="modal-button1 modal-sure">确定导入</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

对应的页面js:
1.绑定下载动作

         /*编制数点击下载,下载进度条*/
        $('.person-download').on('click', function () {
            if ($(this).hasClass('person-red')) {
                $(this).removeClass('person-red').addClass('person-green');
                $(this).find('.down-progress').show();
                $(this).find('span').hide();
                $(this).find('.down-progress').animate({width: '170px'}, 800, function () {
                    setTimeout(function () {
                        var form=$("<form>");//定义一个form表单
                        form.attr("style","display:none");
                        form.attr("target","");
                        form.attr("method","get");
                        form.attr("action", ctrlBathPath+'/downloadTemplate');
                        $("body").append(form);//将表单放置在web中
                        form.submit();//表单提交
                        $('.person-download span').text('编制数导入模板(已下载)').show();
                        $('.down-progress').hide();
                    }, 500);
                });
            }
        });

2.浏览文件和解析

/*导入初始化弹出框*/
            importFunInit: function() {
                $('#importModal').modal('show')
            },
            /*解析上传的Excel数据,并把数据放到model中。*/
            resolveExcel:function(arrs) {
                viewModel.importDataTable.clear();
                if(!arrs || arrs.length < 2) {
                    return false;
                }
                var length = arrs.length;
                var datas = [];
                var date=new Date;
                var year=date.getFullYear(); 
                for(var i = 1; i < length; i++) {
                    /*i=1 对应第一行为标题*/
                    var data = {};
                    data.assetTypeCode=arrs[i][0] || '';
                    data.allocationNum=arrs[i][1] || '';
                    data.orgId = orgId;
                    data.budgetYear=year;
                    datas.push(data);
                }
                viewModel.importDataTable.setSimpleData(datas);
            },

            /*校验上传的数据*/
            validateImportData:function(datas) {
                if(!datas || datas.length == 0) {
                    u.showMessage({msg: "请选择上传文件",msgType: "warning"});
                    return false
                }

                return true
            },

3.导入动作

 /*上传数据*/
            importData:function() {
                var datas = viewModel.importDataTable.getSimpleData()
                if(viewModel.events.validateImportData(datas)) {
                    if(importFlag) {
                        importFlag = false;
                    }
                    $.ajax({
                        type : 'POST',
                        url : ctrlBathPath+'/importData',
                        data: JSON.stringify(datas),
                        dataType : 'json',
                        m_meta: m_meta,
                        contentType:'application/json',
                        success:function(result){
                            if(result.flag == 'SUCCESS'){
                                u.showMessage({msg: result.errorMsg,msgType: "success"});
                                $('#importModal').modal('hide');
                                viewModel.events.selectAllocationCompanys();
                            } else {
                                u.showMessage({msg:result.errorMsg, msgType:"error"});
                            }
                        },
                        complete:function(){
                            importFlag = true
                            viewModel.importDataTable.setSimpleData([]);
                            $("#importInput").val("");
                        }
                    })
                }
            },

后台controller层:

 /**
     * 编制数模版下载
     * @param request
     * @param response
     */
    @RequestMapping(value = "/downloadTemplate", method = RequestMethod.GET)
    @ResponseBody
    public void downloadTemplate(HttpServletRequest request, HttpServletResponse response) {
        OutputStream out = null;
        try {
            String fileName = "编制数导入模板.xls";
            // 设置文件MIME类型
            response.setContentType("application/ms-excel");//application/octet-stream
            // 设置Content-Disposition
            response.setHeader("Content-Disposition", "attachment;filename=" + new String(fileName.getBytes("gb2312"), "ISO-8859-1"));
            out = response.getOutputStream();
            generateTemplate(out);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (out != null) {
                    out.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
    /**
     * 生成导入模板:我这个模版就两列--"编码","a数量"
     * @param out 
     * @throws IOException 
     */
    public void generateTemplate(OutputStream out) throws IOException {
        HSSFWorkbook wb = new HSSFWorkbook();
        HSSFSheet sheet = wb.createSheet("a数");
        HSSFRow row = sheet.createRow(0);
        HSSFCellStyle style = wb.createCellStyle();
        style.setAlignment(HSSFCellStyle.ALIGN_CENTER);
        //标题
        String[] titles = {"编码","数量"};

        for(int i = 0; i < titles.length; i++) {
            HSSFCell cell = row.createCell(i);
            if(cell.getCellType() != -1) {
                cell.setCellType(HSSFCell.CELL_TYPE_STRING);
            }

            HSSFCellStyle cellStyle = wb.createCellStyle();
            HSSFDataFormat format = wb.createDataFormat();
            cellStyle.setDataFormat(format.getFormat("@"));
            cell.setCellStyle(cellStyle);
            cell.setCellValue(titles[i]);
            cell.setCellType(HSSFCell.CELL_TYPE_STRING);
        }

        wb.write(out);
        out.flush();
        out.close();
    }


     /**
     * 导入数据
     * @param list
     * @return
     */
    @RequestMapping(value="/importData", method={RequestMethod.POST})
    @ResponseBody
    public Map<String, Object> importData(@RequestBody List<AllocationCompany> list) {
        Map<String, Object> map = new HashMap<String, Object>();
        Map<String, Object> validateMap = new HashMap<String, Object>();
        try {
            validateMap = validateImportParam(list);//参数校验
        } catch (Exception e) {
            logger.error("编制数导入数据校验时出现异常:", e);
            map.put("flag", RESULTFLAGS.ERROR.toString());
            map.put("errorMsg", "参数校验出现异常,请检查数据是否正确!");
            return map;
        }
        if(validateMap == null) {
            map.put("flag", RESULTFLAGS.ERROR.toString());
            map.put("errorMsg", "参数校验出现异常,请检查数据是否正确");
            return map;
        } 
        String flag =  (String) validateMap.get("flag");
        if("SUCCESS".equals(flag)) {
            /*全部校验成功,才执行。如果在有的成功,有的失败的情况下执行了校验通过的部分,这样不利于导入人员区分那些执行过了,那些没执行过。*/
            @SuppressWarnings("unchecked")
            List<AllocationCompany> importList = (List<AllocationCompany>) validateMap.get("importList");
            try {
                allocationCompanyService.batchInsert(importList);
            } catch (Exception e) {
                logger.error("编制数往数据库插入数据时出现异常,", e);
                map.put("flag", RESULTFLAGS.ERROR.toString());
                map.put("errorMsg", "往数据库插入数据时出现异常!");
                return map;
            }
            map.put("flag", RESULTFLAGS.SUCCESS.toString());
            map.put("errorMsg", "导入成功,共导入[" + importList.size() + "]条数据");
            return map;
        }else{
            /*有一个校验失败,则返回错误提示,不在执行*/
            return validateMap;
        }
    }

对应校验的方法:
/**
     * 导入参数校验
     * @param list
     */
    private Map<String, Object> validateImportParam(List<AllocationCompany> list) throws Exception{
        Map<String, Object> map = new HashMap<String, Object>();
        if(list == null || list.size() == 0) {
            map.put("flag", RESULTFLAGS.ERROR.toString());
            map.put("errorMsg", "导入数据为空,请重新上传导入模板");
            return map;
        }
        。。。
        return map;
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

万米高空

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值