导出到 HTML 时如何使报告大小适应屏幕大小

Question

有没有办法将 HTML 报告的大小指定为百分比，例如 width = "90%"？或者以其他方式确保报表的宽度在导出到 HTML 时占用户屏幕的一定百分比？

我不介意创建额外的模板，或者只将图表导出为图像。

我正在使用 Jasper Reports 版本 6.9.0。

Answer 1

Jasper 报表导出旨在实现像素完美 (printable) 输出，这就是为什么无论浏览器的大小如何，默认情况下大小都将以像素为单位对应于报表的实际宽度 window是。

Jasper 报告 HTMLExporter 为实现此目的创建了一个 table 3 列，第一个空列 width="50%"，第二个列宽度以 px 为报告的宽度，第三个空列再次width="50%"。这将使结果居中并且报告的宽度将等于 jrxml 中指示的宽度。

如果您从 java 导出，您可以覆盖此行为并设置您自己的 html header 和页脚。

例子

HtmlExporter exporter = new HtmlExporter();
exporter.setExporterInput(new SimpleExporterInput(jasperPrint));
exporter.setExporterOutput(new SimpleHtmlExporterOutput("html/my.html"));
SimpleHtmlExporterConfiguration configuration = new SimpleHtmlExporterConfiguration();
configuration.setHtmlHeader(
        "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\r\n" + 
        "<html>\r\n" + 
        "<head>\r\n" + 
        "  <title></title>\r\n" + 
        "  <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"/>\r\n" + 
        "  <style type=\"text/css\">\r\n" + 
        "    a {text-decoration: none}\r\n" + 
        "   .jrPage {width:90% !important}\r\n" +
        "  </style>\r\n" + 
        "</head>\r\n" + 
        "<body text=\"#000000\" link=\"#000000\" alink=\"#000000\" vlink=\"#000000\">\r\n" + 
        "<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\r\n" + 
        "<tr><td width=\"5%\">&nbsp;</td><td align=\"center\">\r\n");

configuration.setHtmlFooter(
        "</td><td width=\"5%\">&nbsp;</td></tr>\r\n" + 
        "</table>\r\n" + 
        "</body>\r\n" + 
        "</html>\r\n");
exporter.setConfiguration(configuration);
exporter.exportReport();

基本上我所做的默认 html header 和页脚的更改是

添加了 .jrPage 样式来覆盖像素宽度，而不是更改为 90% 宽度。
已将两侧列的百分比从 50% 更改为 5%

这将创建一个动态大小的 html，它居中并占据可用 window 大小的 90%。

示例如何在这种情况下自动缩放由图表生成的图像

考虑本题中的jrxmlHow can I export report to PDF/A-1a, PDF/A-1b?

将net.sf.jasperreports.export.html.class添加到图表元素

<pieChart>
  <chart isShowLegend="false">
    <reportElement x="225" y="-670" width="320" height="140" uuid="23bd26a6-04a4-406f-8a1a-5e1b260cb75d">
      <property name="net.sf.jasperreports.export.html.class" value="pieChart"/>
    </reportElement>
....

在HTML中添加一些CSS header

 @media only screen and (min-width : 768px) {
     td.pieChart img {height:300px !important;}
 }
 @media only screen and (min-width :  1224px) {
     td.pieChart img {height:400px !important;}
 }

不过请注意，图片只有 "re-scaled"，因此它将保持原始分辨率。

导出到 HTML 时如何使报告大小适应屏幕大小

How to adapt the report size to screen size when exporting to HTML

java

jasper-reports

export-to-html