精华内容
下载资源
问答
  • 页面放了一个下载按钮,点击下载后,可以正常请求下载的接口,而且也成功响应,但是文件不会从浏览器页面下载下来。 <div> <button onclick="down()">下载Excel</button> </div> ...

    请求成功,响应二进制数据,但是页面不下载

    页面放了一个下载按钮,点击下载后,可以正常请求下载的接口,而且也成功响应,但是文件不会从浏览器页面下载下来。

     <div>
         <button onclick="down()">下载Excel</button>
     </div>
    
     function download() {
         $.ajax({
             type: 'GET',
             url: '/download',
             success: function (data) {
                 layer.msg(data.message)
             }
         });
     }
    

    原因是发送Ajax请求后,后端响应的是二进制数据,jQuery的Ajax只能接收JSON等数据。

    在这里插入图片描述
    在这里插入图片描述

    解决办法:

    1、最简单的办法,在新的标签页请求接口,在请求接口上自己拼接参数

    function download() {
        window.open("/download");
    }
    

    2、创建一个form表单,提交表单的方式下载

    function download() {
        var studentName = 1;
        var form = document.createElement('form');
        form.id = 'form';
        form.name = 'form';
        //把这个form放在body里面
        document.body.appendChild(form);
        //给form里面创建一个input框,隐藏掉,来存参数
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'studentName';
        input.value = studentName;
        //把input放在form里面
        form.appendChild(input);
        form.method = "GET" //请求方式
        form.action = '/download';
        form.submit();
        //删掉form
        document.body.removeChild(form)
    }
    

    ——完——

    EasyExcel官方文档

    示例:

    @RestController
    public class StudentController {
    
        @RequestMapping("/download")
        public JsonResult download(HttpServletResponse response) throws IOException {
            //文件名需要这样写,不能在setHeader直接写中文名,否则下载的文件名字为空,只有后缀
            String fileName = new String("学生表.xlsx".getBytes(), StandardCharsets.ISO_8859_1);
            response.setContentType("application/vnd.ms-excel");
            response.setCharacterEncoding("utf8");
            response.setHeader("Content-disposition", "attachment;filename=" + fileName );
            EasyExcel.write(response.getOutputStream(), Student.class)
                    .sheet("sheet")
                    .doWrite(getStudentList());
            return new JsonResult().setCode(1).setMessage("下载成功!").setData(null);
        }
    
        private List getStudentList() {
            ArrayList<Student> students = new ArrayList<>();
            for (int i = 0; i < 1000; i++) {
                Student student = new Student(i, "名字" + i, i, new Date());
                students.add(student);
            }
            return students;
        }
    }
    

    Student类(Excel行对象)

    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class Student {
        @ExcelProperty("学号")
        private Integer id;
        @ExcelProperty("姓名")
        private String name;
        @ExcelProperty("年龄")
        private Integer age;
        @ExcelProperty("出生日期")
        private Date birthday;
    }
    
    展开全文
  • 固定表格布局的各浏览器对与表格宽度计算算法不同。 造成的影响 1. 内容溢出 列的宽度不够容纳其内容时,IE6 IE7 IE8(Q) 会将溢出的内容隐藏,而其他浏览器则会根据单元格的 'overflow' 属性决定是否隐藏溢出...

    问题描述

    固定表格布局下的各浏览器对与表格宽度计算算法不同。

    造成的影响

    1. 内容溢出

    列的宽度不够容纳其内容时,IE6 IE7 IE8(Q) 会将溢出的内容隐藏,而其他浏览器则会根据单元格的 'overflow' 属性决定是否隐藏溢出内容,这时候溢出单元格的内容有可能与其他单元格的文字重叠。

    2. 列的实际宽度不是设定宽度

    有浏览器对于 TABLE 元素均是将宽度作用于 'border-box',但是对于 TD 元素的宽度的作用范围在不同浏览器中却产生了差异,而 IE(Q) Chrome Safari 中的处理更接近标准,即单元格与表格一样,其宽度均作用于 border-box 。

    由于单元格边白的影响,当我们为一组列设定宽度后,其实际运行效果不一定与设定宽度相符。这有可能造成一系列的问题,如内容溢出、内容折行等。这时应尽量避免设置单元格的 'padding',若需要单元格内容需要留有空白,可以为其添加子元素 DIV,为 DIV 元素设置 margin 达到相同的效果。

    受影响的浏览器

    所有浏览器 

    问题分析

    1. 表格的宽度算法table-layout介绍

    CSS2 中的 'table-layout' 属性定义了两种不同的表格宽度计算方式,根据 W3C CSS2.1 规范第 17.5.3 节中的描述, 'table-layout' 属性值有 'auto' 与 'fixed',对应两种不同的计算方法,'auto'为缺省值。

    • “auto”(自动算法)适用于任何表格布局,CSS规范并没有明确规定用户端在表格布局时必须遵守何种算法,此种算法反映了传统HTML表格的特征,每列的宽度是由各列单元格中没有折行的最宽的内容设定的,自动算法有时会较慢,因为它需要在下载完整个表格并访问表格中所有的内容后才能决定表格的最终布局。
    • 'fixed'(固定布局算法)适用于固定表格布局,这是一种快速算法,表格的水平布局不依赖于单元格的内容,而只依赖于表格的宽度,列的宽度以及边框或单元格的间隔。使用固定布局算法,用户端在下载完第一行后就可以开始表格布局,后续行的单元格不影响列宽。

    1.1. 固定布局算法概述

    CSS 规范中对 'table-layout:fixed' 这种固定布局算法有更具体的描述,这种算法下,表格的宽度应显式的由 'width' 属性指定。如果其 width 为 auto,则代表将使用自动算法('table-layout:auto')对表格布局。

    在固定表格布局算法中,各列的宽度也有规定:

    1. 若列元素的宽度不为auto,则该列的宽度即为该指定值;
    2. 如果单元格扩展到若干个列(rowspan属性),宽度将在列内平分;
    3. 其它列平均分配剩下的表格水平空间(减去边框或单元格间隔)。

    所以,表格的实际宽度是 TABLE 元素的 'width' 设定宽度和各列宽(加上单元格间隔或边框)之和的较大值。若表格比各列之和更宽,则多余的空间(或宽度)将被分配到所有列中。

    上述内容仅规定了最一般情况下对于 'table-layout:fixed' 时表格宽度计算所应遵循的基本规范。而对于列宽设定为百分数及像素单位时,单元格包含边白(padding),或者 TABLE 元素设置了 cellpadding 及 cellspacing 属性时等复杂情况,规范并没有明确说明浏览器端应该遵循的一些基本算法。下面将就这些较复杂的情况分析各浏览器对固定布局算法的表格、单元格宽度的计算。

    由于在 IE6(SQ) IE7(SQ) IE8(Q) 中TD元素内容溢出 BUG,所以为了简化情况,下面的测试样例只讨论算法的差别,不再对 IE 的 BUG 进行截图。各浏览器对于计算后的宽度为小数时,由于精度不同带来的 1px 的差异不再进行分别讨论。

    2. 各浏览器对于固定布局下的表格宽度计算算法差异

    由于 W3C 规范中并没有明确说明宽度算法,各浏览器根据各自的理解进行宽度计算,而浏览器之间出现差异主要体现在表格元素设置的宽度与单元格设置的宽度之和不符时,各浏览器的算法差异。

    测试代码中均在 TD 元素内加了一层 DIV 元素,目的是通过 TD 与 DIV 背景色区分出 TD 元素的实际可用宽度,即 TD 内可以容纳内容的实际宽度。

    2.1. 宽度设定为百分比

    2.1.1. 算法分类

    <table style="width:200px; table-layout:fixed; background:darkkhaki;" cellpadding="0" cellspacing="0">   <tr>    <td style="width:10%; background:plum;"> <!-- 【TD1】  -->     <div style="background:pink;">AAA</div>    </td>    <td style="width:30%; background:dodgerblue; padding-left:50px;"> <!-- 【TD2】 -->     <div style="background:lightblue;">BBB</div>    </td>    <td style="width:60%; background:crimson;"> <!-- 【TD3】 -->     <div style="background:gold;">CCC</div>    </td>   </tr>  </table>  

    这段代码在各浏览器环境中的表现如下:

    IE6 IE7 IE8(Q)运行效果截图
    IE8(S) Chrome Safari Opera运行效果截图
    Firefox运行效果截图

    从上面截图中可以明显看出,Firefox与其他浏览器对于单元格设置了padding后的算法不同,而IE6/7及IE8混杂模式与Chrome的区别仅仅是对于TD元素中的内容溢出后浏览器是否隐藏溢出的内容。W3C CSS2.1规范第17.5.2.1节 中有明确的规定:

    In this manner, the user agent can begin to lay out the table once the entire first row has been received. Cells in subsequent rows do not affect column widths. Any cell that has content that overflows uses the 'overflow' property to determine whether to clip the overflow content.

    上面规范中说明:如果单元格内容有溢出,经根据 'overflow' 属性确定是否剪裁溢出的内容。默认的 'overflow' 属性值为 'visible',在本例中浏览器应该保持内容的默认 'overflow' 属性,但由于 'table-layout:fixed' 下 TD 元素宽度无法被其内容撑开,所以会发生内容溢出后与其他单元格内容重叠的现象。而在 IE6 IE7 IE8(Q) 中,浏览器的处理是错误的。

    通过各浏览器的开发人员工具可以测得:
     

    • 在 IE Chrome Safari Opera 中,三个列的实际宽度分别为:20px、60px、120px,即它们的百分比宽度乘以TABLE元素的列的可用宽度(由于 TABLE 没有边框,且 cellpadding 与cellspacing 均为0,所以这时的 TABLE 元素的设置宽度等于其列的可用宽度),即10% * 200px、30% * 200px、60% * 200px,【TD3】的 'padding' 属性并没有影响到所有 TD 元素的宽度计算;
    • 在 Firefox 中,三个TD元素的实际宽度变为:15px、95px、90px,它们的宽度计算遵循如下算法:
      • 列的可用内容宽度之和 = 表格的可用宽度 - 列的左右边白之和 - 列的左右边框之和 - 单元格间距之和
      • 列的实际宽度 = 列的可用内容宽度之和 * 列的百分比宽度 + 列的 padding
    • 所以列的可用宽度之和 = 200px - 50px = 150px,则【TD1】宽度为10% * 150px = 15px,【TD2】实际宽度为30% * 150px + 50px = 95px,【TD3】宽度为60% * 150px = 90px。

    2.1.2. 加入边框、边白、及边距

    <table style="width:200px; table-layout:fixed; background:darkkhaki; border:1px solid black" cellpadding="5" cellspacing="5">   <tr>    <td style="width:10%; background:plum;"> <!-- 【TD1】 -->     <div style="background:pink;">AAA</div>    </td>    <td style="width:30%; background:dodgerblue; padding-left:20px;"> <!--【TD2】-->     <div style="background:lightblue;">BBB</div>    </td>    <td style="width:60%; background:crimson; padding-right:20px;"> <!--【TD3】 -->     <div style="background:gold;">CCC</div>    </td>   </tr>  </table>     

    这段代码在各浏览器环境中的表现如下:

    IE6 IE7 IE8 Chrome Safari Opera运行效果截图
    Firefox运行效果截图

    在增加了边框、cellpadding、cellspacing 后,与上面的情况类似,同样是 Firefox 中的算法与其他浏览器不同。

    在这里当单元格设置了 'padding' 后,如 'padding-left:20px' ,且 TABLE 元素有 'cellpadding' 属性,如 cellpadding="5",这时候该单元格实际的左补白为 CSS 的 padding-left 而不再是cellpadding 属性,即 'padding-left' 为 '20px'。

    TABLE 元素的内容宽度为200px - 1px - 1px = 198px,即TABLE设置的宽度减去左右边框所占的宽度,因为在所有浏览器下TABLE的宽度都是作用于 border-box,且与文档模式无关。由于 border="1"、cellpadding="5"、cellspacing="5",所以这时的TABLE元素的列的可用宽度为198px - 4 * 5px = 178px,即TABLE元素的内容宽度减去由 cellspacing 属性带来的4个水平方向的单元格间距。列的可用内容宽度为178px - 5px - 5px - 20px - 5px - 5px - 20px = 118px,即列的可用宽度再减去各列左右边框及边白占去的宽度。

    IE Chrome Safari Opera中,【td1】的实际宽度为10% * 178px = 18px,其可用内容宽度为18px - 5px - 5px = 8px,即减去由单元格边白带来的2个5px;【td2】的实际宽度为30% * 178px = 54px,其可用内容宽度为54px - 20px - 5px = 29px,【td3】的实际宽度为60% * 178px = 106px,其可用内容宽度为106px - 5px - 20px = 81px。

    在 Firefox 中,【td1】的可用宽度为10% * 118px = 12px,其实际宽度为12px + 5px + 5px = 22px,即加上由单元格边白带来的2个5px;【td2】的可用宽度为30% * 118px = 35px,其实际宽度为35px + 20px + 5px = 60px;【td1】的可用宽度为60% * 118px = 71px,其实际宽度为71px + 5px + 20px = 96px。

    2.1.3. 列的宽度之和小于 TABLE 的总宽度

    <table style="width:200px; table-layout:fixed; background:darkkhaki; border:5px solid black" cellpadding="5" cellspacing="5">   <tr>    <td style="width:10%; background:plum;"> <!--【TD1】-->     <div style="background:pink;">AAA</div>    </td>    <td style="width:20%; background:dodgerblue; padding-left:20px;"> <!-- 【TD2】-->     <div style="background:lightblue;">BBB</div>    </td>    <td style="width:30%; background:crimson; padding-right:20px;"> <!--【TD3】-->     <div style="background:gold;">CCC</div>    </td>   </tr>  </table>  

    这段代码在各浏览器环境中的表现如下:

    IE6 IE7 IE8 Chrome Safari Opera运行效果截图
    Firefox运行效果截图

    三个列的宽度之和仅为60%,这时各浏览器均是将剩余的40%根据这三列的宽度的比例大小进行分配。如上例中,【td1】的实际宽度百分比为10% / 60% = 16.667%;【td2】的实际宽度百分比为20% / 60% = 33.333%;【td3】的实际宽度百分比为 30% / 60% = 50%。而对于各列的实际渲染宽度计算则遵循上面 2.1.2 中的规律。

    <table style="width:200px; table-layout:fixed; background:darkkhaki; border:5px solid black" cellpadding="5" cellspacing="5">   <tr>    <td style="width:20%; background:plum;"> <!--【TD1】-->     <div style="background:pink;">AAA</div>    </td>    <td style="width:40%; background:dodgerblue; padding-left:20px;"><!--【TD2】-->     <div style="background:lightblue;">BBB</div>    </td>    <td style="width:120%; background:crimson; padding-right:20px;"> <!--【TD3】-->     <div style="background:gold;">CCC</div>    </td>   </tr>  </table>  

    这段代码在各浏览器环境中的表现如下:

    IE6 IE7 IE8 Opera运行效果截图
    Chrome Safari运行效果截图
    Firefox运行效果截图

    三个列的宽度之和达到了180%,超出了TABLE自身宽度100%,且第三列【td3】的宽度已经超出了100%,这时各浏览器对于列宽分配出现的不同:
     

    • 在 IE、Opera 下,浏览器没有重新调整【td1】和【td2】的百分比列宽,而是直接将超过100%的【td3】的列宽进行裁切,直接将其裁至40%,即100% - 【td1】百分比列宽 - 【td2】百分比列宽;
    • 在 Chrome Safari Firefox 下,浏览器对各列的百分比宽度进行了重新调整,与上面 2.1.3 中的情况类似,【td1】的实际宽度百分比为20% / 180% = 11.111%;【td2】的实际宽度百分比为40% / 180% = 22.222%;【td3】的实际宽度百分比为120% / 180% = 66.667%。

    而对于各列的实际渲染宽度计算则同样遵循上面3.2.1.2中的规律。

    针对 IE Opera 下的特殊情况,再看一组测试代码:

    <table style="width:200px; table-layout:fixed; background:darkkhaki; border:5px solid black" cellpadding="5" cellspacing="5">   <tr>    <td style="width:110%; background:plum;"> <!--【TD1】-->     <div style="background:pink;">AAA</div>    </td>    <td style="width:120%; background:dodgerblue; padding-left:20px;"> <!-- 【TD2】-->     <div style="background:lightblue;">BBB</div>    </td>    <td style="width:130%; background:crimson; padding-right:20px;"> <!-- 【TD3】-->     <div style="background:gold;">CCC</div>    </td>   </tr>  </table>  

    这段代码在各浏览器环境中的表现如下:

    IE6 IE7 IE8 Opera运行效果截图
    Chrome Safari运行效果截图
    Firefox运行效果截图

    可以看到,IE 和 Opera 中,【td1】宽度直接被裁切至100%,而其他两列宽度均变成了0。

    2.2. 宽度设定为像素

    在单元格无边框、边白、边距,各列宽度之和更好等于 TABLE 宽度时,各浏览器处理一致,下面讨论其中任何一个条件发生变化迫使浏览器对列宽重新计算时的情况。

    2.2.1. 无边框、边白、边距,各列宽度之和小于 TABLE 宽度

    <table style="width:200px; table-layout:fixed; background:darkkhaki;" cellpadding="0" cellspacing="0">   <tr>    <td style="width:10px; background:plum;"> <!-- 【TD1】-->     <div style="background:pink;">AAA</div>    </td>    <td style="width:20px; background:dodgerblue;"> <!-- 【TD2】-->     <div style="background:lightblue;">BBB</div>    </td>    <td style="width:30px; background:crimson;"> <!-- 【TD3】-->     <div style="background:gold;">CCC</div>    </td>   </tr>  </table>  

    这段代码在各浏览器环境中的表现如下:

    IE6 IE7(Q) IE8(Q) Opera运行效果截图
    IE7(S)运行效果截图
    IE8(S) Firefox Chrome Safari运行效果截图

    各浏览器对于无边框、边白、边距,且各列宽度之和小于 TABLE 宽度时,均会对各列宽度进行调整,调整算法均为:该列宽度 / 各列宽度之和 * 表格宽度,即对于【td1】则是10px / 60px * 200px = 34px。

    但此时 IE 对于 TD 元素内的 DIV 元素的宽度计算有差异,DIV 元素为 TD 元素内的唯一子元素,且没设置宽度,即 'width:auto',对块级元素来说其宽度应该撑满其父元素的内容区域的宽度:

    • 在 IE6 IE7(Q) IE8(Q) 中,DIV的实际宽度为其内容宽度表格列宽度调整前其父元素TD设置宽度这两个值之中的较大者
    • 在 IE7(S) 中,DIV的实际宽度恒为表格列宽度调整前其父元素TD设置宽度
    • 在 IE8(S) Firefox Chrome Safari Opera中,DIV 的实际宽度即列宽度调整后的其父元素TD的宽度

    下面只讨论宽度算法的差异,不再就 IE 中TD元素的特殊现象进行讨论。

    2.2.2. 无边框、边白、边距,各列宽度之和大于TABLE宽度

    <table style="width:200px; table-layout:fixed; background:darkkhaki;" cellpadding="0" cellspacing="0">   <tr>    <td style="width:50px; background:plum;"><!--【TD1】-->     <div style="background:pink;">AAA</div>    </td>    <td style="width:100px; background:dodgerblue;"> <!-- 【TD2】-->     <div style="background:lightblue;">BBB</div>    </td>    <td style="width:150px; background:crimson;"> <!--【TD3】-->     <div style="background:gold;">CCC</div>    </td>   </tr>  </table>  

    这段代码在各浏览器环境中的表现如下:

    所有浏览器运行效果截图

    各浏览器结果一样,对于无边框、边白、边距,且各列宽度之和大于 TABLE 宽度时,不会对各列宽度进行调整,各列宽度维持其设置的宽度,TABLE 元素原有的设置宽度无效,表格被各列撑大。

    2.2.3. 算法分类,列的宽度与边框、边白、单元格间距之和小于TABLE宽度

    <style>   td {border: 5px solid black;}  </style>  <table style="width:200px; table-layout:fixed; background:darkkhaki; border:5px solid black" cellpadding="5" cellspacing="5">   <tr>    <td style="width:10px; background:plum;"> <!--【TD1】-->     <div style="background:pink;">AAA</div>    </td>    <td style="width:20px; background:dodgerblue; padding-left:20px;"> <--【TD2】-->     <div style="background:lightblue;">BBB</div>    </td>    <td style="width:30px; background:crimson; padding-right:20px;"> <!--【TD3】-->     <div style="background:gold;">CCC</div>    </td>   </tr>  </table>  

    这段代码在各浏览器环境中的表现如下:

    IE6(S) IE7(S) IE8(S) Firefox Opera运行效果截图
    IE6(Q) IE7(Q) IE8(Q) Chrome Safari运行效果截图

    增加了单元格的border、边白、边距后,浏览器直接出现了宽度算法差异。

      • 在 IE(S)、Firefox(SQ)、Opera(SQ) 中,三个列的实际宽度分别为:34px、62px、74px。它们的宽度算法遵循如下公式:
         
        • TABLE的可用宽度 = TABLE width - TABLE border - cellspacing之和
        • 各列的宽度之和 = 各列的宽度设定值 + 各列单元格的 padding + 各列的 border
        • 列的实际宽度 = ( 列的设定宽度 + 单元格左右 padding + 单元格左右 border 宽度 ) / 各列的宽度之和 * TABLE 的可用宽度

    所以,TABLE 的可用宽度为200px - 2 * 5px - 4 * 5px = 170px,各列的宽度之和为10px + 20px + 30px + 5px + 5px + 20px + 5px + 5px + 20px + 5px + 5px + 5px + 5px + 5px + 5px = 150px,则【td1】的实际宽度为( 10px + 2 * 5px + 2 * 5px ) / 150px * 170px = 34px;【td2】的实际宽度为( 20px + 20px + 5px + 2 * 5px ) / 150px * 170px = 62px;【td3】的实际宽度为( 30px + 5px + 20px + 2 * 5px ) / 150px * 170px = 74px。

    • 在 Chrome Safari 中,三个列的实际宽度分别为:29px、56px、85px。它们的宽度算法遵循如下公式:
       
      • TABLE的可用宽度 = TABLE总宽度 - TABLE border - cellspacing之和
      • 列的实际宽度 = 列的设定宽度 / 各列设定宽度之和 * TABLE的可用宽度
    • 所以,TABLE的可用宽度为200px - 2 * 5px - 4 * 5px = 170px,各列设定宽度之和 = 10px + 20px + 30px = 60px。则【td1】的实际宽度为10px / 60px * 170px = 29px;【td2】的实际宽度为20px / 60px * 170px = 56px;【td3】的实际宽度为30px / 60px * 170px = 85px。

    2.2.4. 列的宽度与边框、边白、单元格间距之和大于 TABLE 宽度

    <style>   td {border: 5px solid black;}  </style>  <table style="width:200px; table-layout:fixed; background:darkkhaki; border:5px solid black" cellpadding="5" cellspacing="5">   <tr>    <td style="width:50px; background:plum;"> <!--【TD1】-->     <div style="background:pink;">AAA</div>    </td>    <td style="width:80px; background:dodgerblue; padding-left:2px;"> <!--【TD2】-->     <div style="background:lightblue;">BBB</div>    </td>    <td style="width:150px; background:crimson; padding-right:20px;"><!--【TD3】-->     <div style="background:gold;">CCC</div>    </td>   </tr>  </table>  

    这段代码在各浏览器环境中的表现如下:

    IE6(S) IE7(S) IE8(S) Firefox Opera运行效果截图
    IE6(Q) IE7(Q) IE8(Q) Chrome Safari运行效果截图

    这种情况下,TABLE 出现了两种不同的宽度。

    • 在 IE(S) Firefox Opera 中,三个列的实际宽度分别为:70px、97px、185px,而内容宽度分别为:50px、80px、150px。在各列的宽度与其 'border' 'padding' 'cellspacing' 之和大于表格的内容宽度时,列的设定宽度直接作用于TD元素的content-box,其 'padding' 'border' 及 cellspacing 则一次加到设定的宽度上,表格的设定宽度这时不再生效,表格被撑大。
    • 此现象触发条件:
       IE(Q) Chrome Safari 中,三个列的实际宽度分别为:50px、80px、150px,而内容宽度分别为:30px、63px、115px。在各列的设定宽度之和大于表格的内容宽度(= 表格的设定宽度 - 表格边框 - 单元格间距)时,列的设定宽度直接作用于 TD 元素的border-box,其padding、border被包含在设定宽度内,而cellspacing则加到设定的宽度之外,表格的设定宽度此时也不再生效,表格被撑大,但撑大幅度小于 Firefox。

     

    解决方案

    在 'table-layout:fixed' 这种固定布局算法下的表格中,可以为表格最后一列不设置宽度,尽量消除由算法差异带来的列的宽度差异。

    如果内容溢出,可以为溢出的单元格设置 'overflow:hidden'。

    转载请注明来自: http://www.caodong.net/Article/948.html

    展开全文
  • 今天在做一个控件的过程中,遇到一些问题,在此总结。 控件的功能是实现类似windows任务管理器的cpu使用率现实功能,并提供一些用户...但是在google chrome运行上面源码,发现,表格无法显示出来,但在IE,fi

    今天在做一个控件的过程中,遇到一些问题,在此总结下。


    控件的功能是实现类似windows任务管理器的cpu使用率现实功能,并提供一些用户自定义控件高度义,标题等接口。以便适用于不通的用户场景和页面。控件基于空的table实现,html静态源码大致是这样的:

    <table border="0" cellspacing="1" cellpadding="0" style="background-color: #fff;width:40px;" id="proBar1Tbl">
    <tbody id="proBar1Tbody">
    <tr class="proempty"><td></td><td></td></tr>
    <tr class="profill"><td></td><td></td></tr>
    <tr class="profill"><td></td><td></td></tr>

    ......
    </tbody>
    </table>

    但是在google chrome下运行上面源码,发现,表格无法显示出来,但在IE,firefox等下显示正常。最后发现,只要在其中一行的一个td中添加style="display:block;",就可以正常显示了。修改后如下:

    <table border="0" cellspacing="1" cellpadding="0" style="background-color: #fff;width:40px;" id="proBar1Tbl">
    <tbody id="proBar1Tbody">
    <tr class="proempty"><td style="display:block;"></td><td></td></tr>
    <tr class="proempty"><td></td><td></td></tr>
    ......略

    通过上面修改虽然能显示了,但是没达到想要的效果,虽然设置了cellspacing=“1”,但是发现在google chrome下运行还是有问题,列间间隙没显示出来,但在IE,firefox等下可以。最后通过摸索,发现需要设置cellpadding="1"才能在googlechrome下显示列间距。

    总结:

    1.在google chrome下,要想显示内容空白的table,需要在td中添加style="display:block;";
    2.在google chrome下,需要同时添加cellspacing="1" cellpadding="1"属性,才能显示行间距和列间距

    ~~

    展开全文
  • Java:导出word,浏览器下载

    千次阅读 2018-10-22 15:48:39
    浏览器下载代码 import com.xjl.student.model.Person; import com.xjl.student.util.WordUtil; import org.apache.commons.lang.time.DateFormatUtils; import org.springframework.util.ResourceUtils; import ...

    WordUtil类

    import com.lowagie.text.*;
    import com.lowagie.text.Font;
    import com.lowagie.text.Image;
    import com.lowagie.text.pdf.BaseFont;
    import com.lowagie.text.rtf.RtfWriter2;
    import com.xjl.student.model.Person;
    import org.apache.commons.lang.time.DateFormatUtils;
    import org.springframework.util.ResourceUtils;
    
    import java.awt.*;
    import java.io.File;
    import java.io.FileNotFoundException;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.util.ArrayList;
    import java.util.Date;
    import java.util.List;
    
    /**
     * 报告导出
     */
    public class WordUtil {
    
        /**
         * 导出word
         * @param filepath
         * @throws Exception
         */
        public void exportWord(String filepath, List<Person> list) throws Exception {
            // 创建word文档,并设置纸张的大小
            Document document = new Document(PageSize.A4);
            try {
                //建立一个书写器(Writer)与document对象关联,通过书写器(Writer)可以将文档写入到磁盘中
                RtfWriter2.getInstance(document, new FileOutputStream(filepath));
                document.open();
                // 设置字体
                BaseFont font = BaseFont.createFont(BaseFont.HELVETICA, BaseFont.WINANSI, BaseFont.NOT_EMBEDDED);
                // 主标题字体风格
                Font titleFont = new Font(font, 24, Font.BOLD);
                // 副标题字体风格
                Font subTitleFont = new Font(font, 16, Font.BOLD);
                // 正文字体风格
                Font contextFont = new Font(font, 12, Font.NORMAL);
    
                Paragraph title = new Paragraph("测试报告导出");
                // 设置标题格式对齐方式
                title.setAlignment(Element.ALIGN_CENTER);
                title.setFont(titleFont);
                document.add(title);
    
                // 获取数据
    //            List<Person> list = getStudentData();
    
                Paragraph title1 = new Paragraph("一、学生信息表");
                // 设置标题格式对齐方式
                title1.setAlignment(Element.ALIGN_LEFT);
                title1.setFont(subTitleFont);
                document.add(title1);
    
                // 创建有三列的表格
                Table table = new Table(3);
                table.setBorderWidth(1);
                table.setBorderColor(Color.BLACK);
                table.setPadding(0);
                table.setSpacing(0);
    
                // 添加表头,合并单元格
                Cell cell = new Cell("报告导出");
                cell.setHeader(true);
                // 设置表格为三列
                cell.setColspan(3);
                // 设置表格为一行
                cell.setRowspan(1);
                table.addCell(cell);
                // 表头结束
                table.endHeaders();
    
                table.addCell("学号");
                table.addCell("姓名");
                table.addCell("年龄");
                // 将数据加入表中
                insertData(table, list);
                document.add(table);
                //******************************************
                Paragraph title2 = new Paragraph("二、iText介绍");
                // 设置标题格式对齐方式
                title2.setAlignment(Element.ALIGN_LEFT);
                title2.setFont(subTitleFont);
                document.add(title2);
                String contextString = "iText是一个能够快速产生PDF文件的java类库。iText的java类对于那些要产生包含文本,表格,图形的只读文档是很有用的。它的类库尤其与java Servlet有很好的给合。使用iText与PDF能够使你正确的控制Servlet的输出。";
                Paragraph context = new Paragraph(contextString);
                // 正文格式左对齐
                context.setAlignment(Element.ALIGN_LEFT);
                context.setFont(contextFont);
                // 离上一段落(标题)空的行数
                context.setSpacingBefore(5);
                // 设置第一行空的列数
                context.setFirstLineIndent(20);
                document.add(context);
                //**************添加图片****************************
                Paragraph title3 = new Paragraph("三、图片");
                // 设置标题格式对齐方式
                title3.setAlignment(Element.ALIGN_LEFT);
                title3.setFont(subTitleFont);
                document.add(title3);
                Image img = Image.getInstance("D:/app/OnePiece.jpg");
                img.setAbsolutePosition(10, 10);
                // 设置图片显示位置
                img.setAlignment(Image.ALIGN_CENTER);
                // 表示显示的大小为原尺寸的20%
                img.scalePercent(20);
                document.add(img);
                //*******************表二***********************
                Paragraph title4 = new Paragraph("四、学生信息表");
                // 设置标题格式对齐方式
                title4.setAlignment(Element.ALIGN_LEFT);
                title4.setFont(subTitleFont);
                document.add(title4);
                // 创建有三列的表格
                Table table2 = new Table(3);
                table2.setBorderWidth(1);
                table2.setBorderColor(Color.BLACK);
                table2.setPadding(0);
                table2.setSpacing(0);
                // 添加表头
                table2.addCell("学号");
                table2.addCell("姓名");
                table2.addCell("年龄");
    
                // 将数据加入表中
                insertData(table2, list);
    
                document.add(table2);
    
                document.close();
                System.out.println("word已经导出到:" + filepath);
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            } catch (DocumentException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    
        /**
         * 增加数据到表中
         * @param table
         * @param list
         * @throws Exception
         */
        private void insertData(Table table, List<Person> list) throws Exception {
            for (int i = 0; i < list.size(); i++) {
                Person stu = list.get(i);
                // 创建单元格,并设置各个列中实际数据的值
                Cell cell = new Cell();
                // 设置表格为三列
                cell.setColspan(3);
                // 设置表格行数
                cell.setRowspan(list.size());
                // 添加数据
                table.addCell("id:"+ stu.getId());
                table.addCell("name:" + stu.getName());
                table.addCell("age:"+ stu.getAge());
            }
        }
    
        /**
         * 创造数据
         * @return
         */
        private static List<Person> getStudentData() {
            List<Person> list = new ArrayList<Person>();
            for (int i = 1; i <= 3; i++) {
                Person stu = new Person();
                stu.setId(i);
                stu.setName("学生_"+i);
                stu.setAge(10+i);
                list.add(stu);
            }
            return list;
        }
    
        public static void main(String[] args) throws Exception {
            WordUtil wordDemo = new WordUtil();
            String nameString = DateFormatUtils.format(new Date(), "yyMMdd_HHmmss");
            String filepath = "D:/app/Test_" + nameString + ".doc";
            List<Person> list = getStudentData();
            wordDemo.exportWord(filepath, list);
        }
    }
    

    Person类

    import lombok.Data;
    @Data
    public class Person {
        private int id;
        private String name;
        private int age;
    }
    

    浏览器下载代码

    import com.xjl.student.model.Person;
    import com.xjl.student.util.WordUtil;
    import org.apache.commons.lang.time.DateFormatUtils;
    import org.springframework.util.ResourceUtils;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RestController;
    
    import javax.servlet.http.HttpServletResponse;
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.IOException;
    import java.io.OutputStream;
    import java.net.URLEncoder;
    import java.util.ArrayList;
    import java.util.Date;
    import java.util.List;
    
    /**
     * exportWord
     * http://localhost:10086/exportCase/exportWord
     */
    @RestController
    @RequestMapping("/exportCase")
    public class ExportWordController {
        @RequestMapping(value = "exportWord",method = RequestMethod.GET)
        public void exportExcel(HttpServletResponse response) throws Exception {
            String dateTime = DateFormatUtils.format(new Date(), "yyMMdd_HHmmss");
            String filepath = "/app/ExportWord_" + dateTime + ".doc";
            WordUtil wordUtil = new WordUtil();
            List<Person> list = getStudentData();
            wordUtil.exportWord(filepath, list);
            OutputStream output = null;
            try {
                //清空缓存
                response.reset();
                // 定义浏览器响应表头,并定义下载名
                String fileName = URLEncoder.encode("ExportWord_"+dateTime+".doc", "UTF-8");
                response.setHeader("Content-disposition", "attachment;filename="+fileName);
                //定义下载的类型,标明是word文件
                response.setContentType("application/msword;charset=UTF-8");
                //把创建好的word写入到输出流
    
                FileInputStream inputStream = new FileInputStream(filepath);
                byte[] buffer = new byte[inputStream.available()];
    
                inputStream.read(buffer);
    
                output = response.getOutputStream();
                output.write(buffer);
    
                //随手关门
                output.close();
            }catch (IOException e){
                e.printStackTrace();
            }
        }
    
        //造假数据
        private static List<Person> getStudentData() {
            List<Person> list = new ArrayList<Person>();
            for (int i = 1; i <= 3; i++) {
                Person stu = new Person();
                stu.setId(i);
                stu.setName("学生_"+i);
                stu.setAge(10+i);
                list.add(stu);
            }
            return list;
        }
    }
    

    注:
    (1)pom:iText2.1.7、iText-rtf2.1.7、itextpdf5.4.3、itext-asian5.2.0
    (2)上述未用到数据库,但可自行查询数据再放入list中即可
    (3)浏览器下载地址IP、端口自行查询
    (4)效果图如下:
    在这里插入图片描述

    展开全文
  • 浏览器百分百没问题 百分之80就多出来一列空白的 大佬们遇到过这样的问题嘛 请指教小弟~~~ 表头代码如下:
  • 消除网页内容与浏览器边界的空白 &lt;style type="text/css"&gt; *{ padding:0px; margin:0px; } &lt;/style&gt; &lt;body&gt; &lt;!---&gt; &lt;/body&gt;
  • 缩小浏览器窗口右边出现空白

    千次阅读 2017-04-28 13:53:39
    布局做好的页面不会因为缩小浏览器窗口而右边出现空白? [“发现现在缩小窗口,底部出现进度条,滑动至右边,就出现空白”]这个问题是个十分常见且容易忽略的bug。 原因是因为出现空白的元素设置了宽度100...
  • JS前端实现表格下载的方法

    千次阅读 2016-08-04 14:49:03
    JS实现前端下载的方法很简单,JS本身支持对浏览器对象模型的各种方法,下载过程分为两步:1.处理数据,将下载数据转成string的形式;2.将要下载的数据传输给JS浏览器window的当前页面的url,并设置好文件格式和编码...
  • 之前遇到一个问题:就是做下载excel表格功能时,不知道怎么把后端返回的文件流转化成表格数据,上网看了很多方法,可能自己没有找对吧,确实可以实现下载,但是下载表格内容是乱码,个人感觉应该是实现下载函数...
  • //调用下面的方法输出到浏览器下载 OutputClient(bytes, filename); worksheet.Dispose(); package.Dispose(); } 点击"导出excel"按钮后,页面跳转至exportExcel.aspx页面,后通过浏览器下载至本地
  • el-table, flex,缩放浏览器, 宽度自适应
  • 程序内部将不会判断是否为表格,m_WebView为0将返回。 el_table_GetinnerHTML //表格_取源码,请注意!!程序内部将不会判断是否为表格,m_WebView为0将返回。 el_GetID //元素_取ID,m_WebView为0将返回。 el...
  • 前端post请求下载excel表格

    千次阅读 2018-12-10 16:24:35
    1.post的方法里要加responseType: 'arraybuffer'参数,不然下载的excel会乱码 2.使用{type: "application/vnd.ms-excel"}的写法,可以保存为xls格式的excel文件(兼容老版本)。而使用“application/vnd....
  • 浏览器兼容之polyfill[阅后即瞎]

    千次阅读 2018-12-01 10:57:02
    我们入门JavaScript的时候都写过polyfill: 比如手写一个弹窗, 手动模拟实现一个表格, 这些魔力的对象都是浏览器原生支持的, 虽然当我成为JS专家之后再也没造过轮子, 但是最近才发现我们之前写的那么多轮子其实都叫...
  • 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
  • IE9 奇葩的表格空白单元格问题

    千次阅读 2014-07-28 16:48:02
    在FF和Chrome浏览器
  • 程序内部将不会判断是否为表格,m_WebView为0将返回。 el_table_GetinnerHTML //表格_取源码,请注意!!程序内部将不会判断是否为表格,m_WebView为0将返回。 el_GetID //元素_取ID,m_WebView为0将返回。 el...
  • 前台请求后台下载文件 后台方法 //防止下载时文件名乱码 try { String encode = URLEncoder.encode(&quot;电子档案利用登记表.xls&quot;, &quot;UTF-8&quot;); //把要下载的文件转成字节数组...
  • 浏览器网页操作 EXCEL 示例

    千次阅读 2020-03-31 23:14:45
    在网页中利用第三方 JavaScript 插件——SheetJS,可以在浏览器中对 excel 文件进行轻量级操作,实现 excel 文件导入网页,网页表格保存为 excel 文件功能。复杂的表格样式设置需要付费的 VIP 版插件,但普通版本的...
  • HTML表格间距怎么设置

    千次阅读 2021-06-18 12:44:25
    1 回答2021-05-06 浏览:24 分类:其他问题回答:1、CSS法可以在标签中设置margin属性,即:style="margin:5px 0 5px 0;...还可以在表格后敲回车换行,产生(2)空表格。插入一个1行1列的表格,设置单...
  • jqgrid表格最右侧出一截问题

    千次阅读 2019-06-25 19:24:58
    只要随意伸缩以下浏览器宽度就恢复正常。花了一个下午都没搞明白。 暂时使用初始宽度给0,然后延迟重渲染一遍的方式,消除了这个空白。 setTimeout(function () { $('.contentView').css('width','100%'); ...
  • 浏览器兼容问题一直是一个难缠的问题,你开始想成为一名程序员,到深入学习,最开始什么都会懂,到开始写代码.你研究页面到最后的面试. 你经常能听到这个2个问题? 1.你是如何处理浏览器兼容问题的. 2.什么是响应...
  • 在1024*768或者800*600的分辨率可以自动调整成适用于该客户端分辨率的大小。第一种方法:做一个网页解决问题(长了点)如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的网页变得...
  • 本文介绍一些主流开源浏览器(Open source browser)框架,只统计还在更新的开源浏览器,比较出名的有Chromium,Mozilla Firefox、Brave、GNOME Web等等,帮助大家方便选择什么浏览器进行GUI开发。有些浏览器对系统...
  • 在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox也会偶遇)浏览器中的图片元素img出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。  1、将图片转换为块级对象  设置img为...
  • 最全整理浏览器兼容性问题与解决方案

    万次阅读 多人点赞 2019-08-06 17:01:24
    在大多数情况,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。  在学习浏览器兼容性...
  • 浏览器自动填充表单的解决方式

    万次阅读 2018-04-18 21:33:51
    以前在做项目的时候遇到过这个问题,当时年少太轻狂,没有想过是为什么会发生这样的问题,只觉得作为一个用户,每次在登录网站的时候很有用,很便捷,甚至觉得这个... 首先,在浏览器有点击过记住密码的操作的前...
  • 利用VS中的asp.net编写网页时,用Gridview来绑定数据,在本地运行正常,...但是在360浏览器中就显示出问题了:表头(第一行)后面接着显示出空白的边框(第二行)。我怀疑是浏览器兼容性的问题,请问这个怎么修改???
  • 浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工作原理,我们将看到,你在地址栏输入google.com到你看到google主页过程中都发生了什么。 将讨论的浏览器 今天,有五种主流浏览器——IE、Firefox、...
  • 这个表格有漂亮的样式,可以隔行换色,单元格可以高亮显示,可以添加一行表格,删除本行,还可以排序,表格中有下拉框、checkbox等空间,挺好的功能。 但是要在IE8上运行,其他浏览器是不支持的,文件为.html格式,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 64,089
精华内容 25,635
关键字:

从浏览器下下载的表格是空的