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

badbishop :

Is there a way to specify the size of the HTML report as percentages, like width = "90%"? Or to ensure in some other way, that the report's width, when exported to HTML, is a certain percentage of the user's screen?

I don't mind creating an extra template, or just export only a chart as an image.

I'm using Jasper Reports Version 6.9.0.

Petter Friberg :

Jasper report export aims for pixel perfect (printable) output, that's why by default the size will correspond in pixel to the actual width of your report no matter what size of the browser window is.

Jasper reports HTMLExporter to achieve this creates a table with 3 columns, first empty column width="50%", second column width in px as width of your report and third empty column again with width="50%". This will center the result and the width of the report will equal the width indicated in jrxml.

If you export from java you can override this behaviour and set your own html header and footer.

Example

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();

Basically the change from default html header and footer that I made is

Added .jrPage style to override the pixel width and instead change to 90% width.
Changed % of the two side columns from 50% to 5%

This will create a dynamically sized html that is centered and takes 90% of available window size.

Example how to automatically scale image in this case generated by a chart

Considering the jrxml in this question How can I export report to PDF/A-1a, PDF/A-1b?

Add net.sf.jasperreports.export.html.class to the chart element

<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>
....

Add some CSS in HTML 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;}
 }

Do note however that the image is only "re-scaled" hence it will keep it's original resolution.