Thứ Hai, 16 tháng 4, 2012

Link external CSS file to Jasper HTML Report

Today I am going to explain about how to link a CSS file to an html report generated using Japer report. First let me explain the advantages of having an external CSS file for the html report.
The important advantage is that we can change the look and feel of the html report easily using a CSS file. In default the html report will look exactly same as the iReport design. For example if we design a report with white background in the iReport then both HTML and PDF reports will have a white background report. But using this new technique we can change the background and other properties of the html report without changing the iReport, so that the PDF report will look similar to iReport design and the HTML report will look based on the CSS properties we set in the CSS file.
When we have all the properties in a CSS file we can link the CSS file to all the report which needs to have same properties. As we are using a single CSS file to set the property it is easy to change the property in a single file and it will reflect in all the reports.
In default Jasper Report will create the html as below with background color as white text and link color as black.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">a {text-decoration: none}</style>
</head>
<body text="#000000" link="#000000" alink="#000000" vlink="#000000">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td width="50%">&nbsp;</td><td align="center">
<REPORT CONTENTS>
</td><td width="50%">&nbsp;</td></tr>
</table>
</body>
</html>
When we add a HTML_HEADER property to the JRHtmlExporter using the class JRHtmlExporterParameter the default header generated by the Jasper will be replaced fully by the new header added by the Java code. The new header is not appended to the existing default header. So when we create a new header it will be overwrite the default header marked in blue color above. The same for the footer contents also
You need to add the property to the JRHtmlExporter class as given below
(1) JRHtmlExporter exporter = new JRHtmlExporter();
(2) exporter.setParameter(JRHtmlExporterParameter.HTML_HEADER, "<html><head><title></title><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"/><style type=\"text/css\">a {text-decoration: none}</style></head><body text=\"#000000\" link=\"#000000\" alink=\"#000000\" vlink=\"#000000\"><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td width=\"50%\">&nbsp;</td><td align=\"center\"><link rel=\"stylesheet\" type=\"text/css\" href=\"css/jasper.css\" /><center>");
(3) exporter.exportReport();
In the code the first line is to instantiate the JRHtmlExporter.
The second line is the code to set the external CSS file. In this line I added the entire default header also in the HTML_HEADER property and the link tag to link the external CSS file marked in red color.
The line 3 is to export or generate the html report.
HTML_HEADER is a string and you have to set the whole header at the same time. If you add the header contents one by one to the HTML_HEADER then the HTML_HEADER will have only the last value set to you.
For example if we have the below two lines and when the html report is generated the report's header will only have the font tag and not the center tag.
exporter.setParameter(JRHtmlExporterParameter.HTML_HEADER, "<center>");
exporter.setParameter(JRHtmlExporterParameter.HTML_HEADER, "<font color=\"#FF0000\">");
So to add both tags to the header we need to set both center and font tag in the same setParameter method as below
exporter.setParameter(JRHtmlExporterParameter.HTML_HEADER, "<center><font color=\"#FF0000\">");
 
Source: http://jesusjoseph.com/2011/08/link-external-css-file-jasper-html-report/ 

Không có nhận xét nào:

Đăng nhận xét