js动态创建表格(Table行间距,行高),JavaWeb文件下载

案例:

创建动态表格:




    
    演示文档
    


    

动态创建表格1

行数 列数

效果图:

js动态创建表格(Table行间距,行高),JavaWeb文件下载_第1张图片

参考:js如何动态创建表格(两种方法) - 范仁义 - 博客园

项目中创建动态表格:

一、HTML中的代码:

将table展示在这个位置。

二、JS中的代码

2.1 动态表格

///文件下载//
    $(function () {
        downloadlistTable=document.getElementById('downloadlistTable');
        var tab='';
        $.ajax({
            type: "POST",
            //发送请求,查找所有文件,返回结果,展示在表格里面
            url: "/downInfo/getFileListShouYe", 
            dataType: 'json',
            success: function (data) {
                if (data!=null) {
                    for(var i=0;i 30) {
                            tab+='';
                            tab+="";
                        }else {
                            tab+='';
                            tab+="";
                        }
                        tab+='';
                    }
                    tab+='';
                    tab+="";
                    tab+='';
                    tab+='
"+ ""+"  "+data[i].obj.substr(0, 20)+"..."+"" +"
"+ ""+"  "+data[i].obj+"" +"
"+"  "+ "......" +"
'; downloadlistTable.innerHTML=tab; } else { parent.forNotice("Warning", "下载失败,请联系管理员!"); } progressDestroy("abc1"); } }); });

table表格的属性:

1、table表格边框

border="0.1" 设置边框的宽度,设置为“0.1”,基本没有边框。
bordercolor="#FFFFFF" ,边框背景为“白色”。

2、tr行间距

border-collapse属性加上border-spacing属性就可以设置tr行间距

style="border-collapse:separate; border-spacing:0px 5px;" //第一个值为0px,第二个值为5px。

3、设置表格中的行高和列宽

tr style=' height:21pt; ' // 行高

td style=' width:100pt;' // 列宽

参考:Table表格边框线、样式 - 百度文库

           table中设置tr行间距_照物华的博客-CSDN博客_table行间距

           table标签修改tr,td标签的行距 - 老虎死了还有狼 - 博客园

           html tr固定行高列宽,HTML表格固定格式:行高列宽_唐枫燃的博客-CSDN博客

2.1 点击文件名称,下载文件

//文件下载
    function downloadFile(id){
        sweetAlert({
            title: "确定下载文件?",
            text: "",
            type: "warning",
            showCancelButton: true,
            confirmButtonText: '确定',
            confirmButtonClass: 'green',
            cancelButtonText: '取消',
            cancelButtonClass: 'red',
            closeOnConfirm: true
        }, function (isConfirm) {
            if (isConfirm) {
                progressInit("abc1");
                $.ajax({
                    type: "POST",
                    url: "/downInfo/downloadFile",
                    data: {id: id},
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            if(data.obj!=null){
                                window.location.href=encodeURI("/fileUpLoadController/downResult?path="+data.obj);
                            }
                            /*parent.forNotice("Success", data.msg);*/
                        } else {
                            parent.forNotice("Warning", data.msg);
                        }
                        progressDestroy("abc1");
                    }
                });
            }

        })
    }

三、展示效果:

js动态创建表格(Table行间距,行高),JavaWeb文件下载_第2张图片

四、后端代码:

4.1 查询文件列表的Controller层代码

 /**
     * 系统首页获取下载中心文件列表
     */
    @RequestMapping("/getFileListShouYe")
    @ResponseBody
    public List getFileListShouYe() throws Exception {
        List listResult= new ArrayList<>();
        // 查找
        EntityWrapper wrapper = new EntityWrapper<>();
        List downInfo = downInfoService.getAll();
        //类别转中文
        if (downInfo != null && downInfo.size() > 0){
            for (DownInfo df : downInfo) {
                df.setTypeCode(dataDictionaryService.getDictionaryAttributeValue("downInfo_typeCode",df.getTypeCode()));
            }
        }

        for(int i=0;i

4.2  点击文件名称,进行下载,Controller层代码

以“文件流”的方式,返回给前端,前端进行“文件下载”。

/**
     * 文件下载
     */
    @RequestMapping("/downResult")
    @ResponseBody
    public void downResult(HttpServletRequest request, HttpServletResponse response) {
        String filename = "";
        try {
            String path = request.getParameter("path");
            File file = new File(path);
            boolean exists = file.exists();
            if (!exists) {
                throw new Exception("文件不存在!");
            }
            // 获取文件名
            filename = file.getName();
            // 获取文件后缀名
            String ext = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
            // 将文件写入输入流
            FileInputStream fileInputStream = new FileInputStream(file);
            InputStream fis = new BufferedInputStream(fileInputStream);
            byte[] buffer = new byte[fis.available()];
            fis.read(buffer);
            fis.close();
            // 清空response
            response.reset();
            // 设置response的Header
            response.setCharacterEncoding("UTF-8");
            //Content-Disposition的作用:告知浏览器以何种方式显示响应返回的文件,用浏览器打开还是以附件的形式下载到本地保存
            //attachment表示以附件方式下载 inline表示在线打开 "Content-Disposition: inline; filename=文件名.mp3"
            // filename表示文件的默认名称,因为网络传输只支持URL编码的相关支付,因此需要将文件名URL编码后进行传输,前端收到后需要反编码才能获取到真正的名称
            response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(filename, "UTF-8"));
            // 告知浏览器文件的大小
            response.addHeader("Content-Length", "" + file.length());
            OutputStream outputStream = new BufferedOutputStream(response.getOutputStream());
            response.setContentType("application/octet-stream");
            outputStream.write(buffer);
            outputStream.flush();
            auditInfoService.saveAuditInfo(request, "下载中心", filename + "元下载成功", "4", "1", "0");
        } catch (Exception e) {
            auditInfoService.saveAuditInfo(request, "下载中心", filename + "元下载失败", "4", "1", "1");
            e.printStackTrace();
        }
    }

参考:JavaWeb实现文件下载的几种方式_追求卓越583的博客-CSDN博客_javaweb下载文件

你可能感兴趣的:(HTML,JavaScript,js动态创建表格,JavaWeb文件下载)