JasperReports：Internet Explorer中文本字段的错误定位(JasperReports: wrong positioning of text fields in Interne

JasperReports：Internet Explorer中文本字段的错误定位(JasperReports: wrong positioning of text fields in Internet Explorer)

目标：表示合并了一些单元格的表格，以便使用JasperReports（Java代码，而不是JasperStudio）以PDF和HTML格式正确呈现。

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

更多信息：每行都放在Jasper设计细节部分的一个波段（JRDesignBand）内。 在这两个波段中，我们有不同宽度的文本字段（JRDesignTextField）。 以下是它在PDF中的显示方式（第一个乐队中的项目前面加上“R”，第二个乐队中的项目前面加上“N”。）： 一切都按照需要呈现。 但是，以下情况发生在HTML中（仅在Internet Explorer中）： 正如我们所看到的，文本字段不再出现在正确的位置，它们似乎在桌子外面伸展。

我正在使用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);

The goal: represent a table with some cells merged, so that it will be rendered correctly both in PDF and HTML, using JasperReports (Java code, not JasperStudio).

The problem: when we open the created HTML file in Internet Explorer, the positions of elements are incorrect.

More information: each row is placed inside a band (JRDesignBand) in the detail section of a Jasper design. Within those two bands we have text fields (JRDesignTextField) with different widths. Here is how it looks in the PDF (items in the first band are prepended with "R.", those in the second band with "N."): Everything is rendered as desired. However, the following happens in HTML (only in Internet Explorer): As we can see, text fields no longer appear in correct positions, they seem to be stretched outside the table.

I'm using JasperReports 6.1.0. Edit: Same happens in JasperReports 6.2.2.

I'm grateful in advance for your suggestions!

Edit

The code: (If the error is not being reproduced, I suggest making the default font bigger.)

/* 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);

最满意答案

在这个帖子中，我发现IE中一个众所周知的问题是显示错误的表 - 我根据那里显示的解决方案（最多投票的一个 - 不是接受的解决方案）。

简而言之，最简单的方法是添加table-layout:fixed; to style每个table标记的属性（用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%;");

In this thread I've found out that it is a widely-known issue in IE to display tables wrong - and I based my fix on the solution shown there (the most up-voted one - not the accepted one).

In short, the easiest way is to add table-layout:fixed; to style attribute of each table tag (in HTML). This can be done by using an extended version of the HtmlExporter class, overriding its exportTable() method and adding the previously mentioned modification in two lines of that method:

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

and

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