layui纯前端 js导出excle

最新推荐文章于 2022-10-27 10:58:55 发布

qq_57398284

最新推荐文章于 2022-10-27 10:58:55 发布

阅读量297

点赞数

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/qq_57398284/article/details/123669331

版权

js部分

  window.examine = function () {
            //使用ajax请求获取所有数据
            $.ajax({
                url: MODULE_PATH+ "/examine"
                ,
                type: 'get',
                data: {
                    type: 1
                },
                async: false,
                dataType: 'json',
                success: function (res) {
                    let t1 = '<th colspan=5>一、已报到及新生入学资格初步审查情况</th>'
                    let c1 = '<tr style="width: 200px">'+
                                '<td >'+'录取新生人数'+'</td>'+
                                '<td>'+res.e[0].lqrs+'</td>'+
                                '<td>'+'已报道新生人数'+'</td>'+
                                '<td colspan="2">'+res.e[0].ybd+'</td>'+
                            '</tr>'+
                        '<tr>'+
                            '<td>'+'保留入学资格人数'+'</td>'+
                            '<td>'+res.e[0].blxj+'</td>'+
                            '<td>'+'恢复入学资格人数'+'</td>'+
                            '<td colspan="2">'+res.e[0].hfxj+'</td>'+
                        '</tr>'
                    let t2 =
                        '<tr>'+
                            '<td>'+'序号'+'</td>'+
                            '<td>'+'班级'+'</td>'+
                            '<td>'+'姓名'+'</td>'+
                            '<td>'+'未通过原因'+'</td>'+
                            '<td>'+'处理意见'+'</td>'+
                        '</tr>'
                    let c2 = ""
                    for (let i = 0; i < res.y.length ; i++) {
                         c2+='<tr>'+
                                 '<td>'+i+'</td>'+
                                 '<td>'+res.y[i].studentName+'</td>'+
                                 '<td>'+res.y[i].studentName+'</td>'+
                                 '<td>'+res.y[i].notPassA+','+res.y[i].notPassB+','+res.y[i].notPassC+'</td>'+
                                 '<td>'+'</td>'+
                             '</tr>'
                    }
                    let t3 = '<tr><th colspan="5">二、未注册学生情况</th></tr>' +
                        '<tr>'+
                            '<td>'+'序号'+'</td>'+
                            '<td>'+'班级'+'</td>'+
                            '<td>'+'姓名'+'</td>'+
                            '<td>'+'联系方式'+'</td>'+
                            '<td>'+'备注原因'+'</td>'+
                        '</tr>'
                    let c3 = ""
                    for (let i = 0; i < res.n.length ; i++) {
                        c3+='<tr>'+
                                '<td>'+i+'</td>'+
                                '<td>'+ res.n[i].className+'</td>'+
                                '<td>'+ res.n[i].studentName+'</td>'+
                                '<td>'+res.n[i].mobile+'</td>'+
                                '<td>'+res.n[i].remark+'</td>'+
                            '</tr>'

                    }
                    let table = t1+c1+t2+c2+t3+c3
                    const worksheet = 'Sheet1'
                    const uri = 'data:application/vnd.ms-excel;base64,';
                    // 下载的表格模板数据
                    const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
                    xmlns:x="urn:schemas-microsoft-com:office:excel"
                    xmlns="http://www.w3.org/TR/REC-html40">
                    <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
                    <x:Name>${worksheet}</x:Name>
                    <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
                    </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
                     <style> table tr td  {text-align: center;}</style>
                    </head><body><table>${table}</table></body></html>`;
                    // 下载模板
                    // window.location.href = uri + base64(template);
                    var a = document.createElement("a");
                    a.download = "学生审核情况";
                    a.href = uri + base64(template);
                    document.body.appendChild(a);
                    a.click();
                }
            });
        }
        // 输出base64编码
        const base64 = s => window.btoa(unescape(encodeURIComponent(s)))

controller

    @ResponseBody
    @GetMapping("/examine")
    public Map<String,List<StudentExamineDto>> examine(){
        LoginUser loginUser = LoginUser.me();
        SysUser user = sysUserService.getById(loginUser.getId());
        String deptId = user.getDeptId().toString();
        Map<String, List<StudentExamineDto>> hashMap = new HashMap<>();
        StudentExamineDto examineDto = studentService.queryPreliminaryExaminationStatus(deptId);
        ArrayList<StudentExamineDto> list = new ArrayList<>();
        list.add(examineDto);
        hashMap.put("e",list);
//        已注册 未通过
        List<StudentExamineDto> y = studentService.queryRegisteredNotPass(deptId);
        hashMap.put("y",y);
//        未注册
        List<StudentExamineDto> n = studentService.queryNotRegisterStudent(deptId);
        n.forEach(studentExamineDto -> {
            if (null==studentExamineDto.getMobile()){
                studentExamineDto.setMobile("");
            }
            if (null == studentExamineDto.getRemark()){
                studentExamineDto.setRemark("");
            }
        });
        hashMap.put("n",n);
        return hashMap;
    }

service和mapper就不看了都是些业务逻辑

主要思路就是html标签+json数据的拼接组合

最后那几行代码和变量改改就行