java - 贾斯珀报告 : wrong positioning of text fields in Internet Explorer

Question

目标:表示一个合并了一些单元格的表格，以便使用 JasperReports(Java 代码，而不是 JasperStudio)在 PDF 和 HTML 中正确呈现该表格。

问题:当我们在Internet Explorer中打开创建的HTML文件时，元素的位置不正确。

更多信息:每一行都放置在 Jasper 设计的详细信息部分中的带 (JRDesignBand) 内。在这两个区域中，我们有不同宽度的文本字段 (JRDesignTextField)。 它在 PDF 中的外观如下(第一个区域中的项目前面带有“R.”，第二个区域中的项目带有“N.”): 一切都按需要呈现。但是，在 HTML 中会发生以下情况(仅在 Internet Explorer 中): 正如我们所看到的，文本字段不再出现在正确的位置，它们似乎被拉伸(stretch)到表格之外。

我正在使用 JasperReports 6.1.0。 编辑: JasperReports 6.2.2 中也会发生同样的情况。

提前感谢您的建议!

编辑

代码: (如果错误没有重现，我建议将默认字体调大。)

    /* Row 1 */
    JRDesignBand band1 = new JRDesignBand();

    JRDesignTextField textField1 = new JRDesignTextField();

    textField1.setX(80);
    textField1.setWidth(45);
    textField1.setStretchWithOverflow(true);

    JRDesignExpression jrExpression1 = new JRDesignExpression();
    jrExpression1.setText("\"A.1.\"");
    textField1.setExpression(jrExpression1);

    JRDesignTextField textField2 = new JRDesignTextField();

    textField2.setX(160);
    textField2.setWidth(45);
    textField2.setStretchWithOverflow(true);

    JRDesignExpression jrExpression2 = new JRDesignExpression();
    jrExpression2.setText("\"A.2. Lorem ipsum dolor sit\"");
    textField2.setExpression(jrExpression2);

    band1.addElement(textField1);
    band1.addElement(textField2);
    ((JRDesignSection) jasperDesign.getDetailSection()).addBand(band1);

    /* Row 2 */
    JRDesignBand band2 = new JRDesignBand();

    JRDesignTextField textField3 = new JRDesignTextField();

    textField3.setX(89);
    textField3.setWidth(331);
    textField3.setStretchWithOverflow(true);

    JRDesignExpression jrExpression3 = new JRDesignExpression();
    jrExpression3
            .setText("\"B.1. Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor \"");
    textField3.setExpression(jrExpression3);

    band2.addElement(textField3);
    ((JRDesignSection) jasperDesign.getDetailSection()).addBand(band2);

Answer 1

在 this thread我发现 IE 中显示表格错误是一个广为人知的问题 - 我的修复基于那里显示的解决方案(投票最多的解决方案 - 不是被接受的解决方案)。

简而言之，最简单的方法是将 table-layout:fixed; 添加到每个 table 标记的 style 属性(HTML 中) 。这可以通过使用 HtmlExporter 类的扩展版本、重写其 exportTable() 方法并在该方法的两行中添加前面提到的修改来完成:

writer.write("<table class=\"jrPage\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"table-layout:fixed; empty-cells: show; width: ");

和

writer.write("<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"table-layout:fixed; empty-cells: show; width: 100%;");