导出为HTML时如何使报表大小适应屏幕大小
[英]How to adapt the report size to screen size when exporting to HTML
问题描述
Is there a way to specify the size of the HTML report as percentages, like width = "90%" ? 
有没有一种方法可以将HTML报告的大小指定为百分比，例如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? 还是以其他方式确保当导出为HTML时，报告的宽度占用户屏幕的一定比例？
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. 我正在使用Jasper Reports版本6.9.0。
1 个解决方案
解决方案1
2 已采纳 2019-09-11 15:11:12
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报表导出旨在实现像素完美（可打印）的输出，这就是为什么默认情况下，无论浏览器窗口的大小如何，大小都将以像素为单位与报告的实际宽度相对应。
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%" . Jasper报告HTMLExporter要实现此目的，将创建一个包含3列的表，第一个空列width="50%" ，第二个列宽度px作为报告的宽度，第三个空列再次width="50%" 。 This will center the result and the width of the report will equal the width indicated in jrxml. 这将使结果居中，并且报告的宽度将等于jrxml中指示的宽度。
If you export from java you can override this behaviour and set your own html header and footer. 如果从Java导出，则可以覆盖此行为并设置自己的html页眉和页脚。
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%\"> </td><td align=\"center\">\r\n");
configuration.setHtmlFooter(
"</td><td width=\"5%\"> </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 基本上我对默认html页眉和页脚的更改是
Added
.jrPagestyle to override the pixel width and instead change to 90% width.添加了.jrPage样式以覆盖像素宽度，而是更改为90％宽度。Changed % of the two side columns from
50%to5%将两侧列的50%从50%更改为5%
This will create a dynamically sized html that is centered and takes 90% of available window size. 这将创建一个动态调整大小的html，该html居中并占据可用窗口大小的90％。
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? 考虑此问题中的jrxml 如何将报告导出到PDF / A-1a，PDF / A-1b？
Add
net.sf.jasperreports.export.html.classto the chart element将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> ....Add some CSS in HTML header
在HTML标头中添加一些CSS @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. 但是请注意，图像只是“重新缩放”的，因此它将保持其原始分辨率。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.