How do I export HTML content into PDF using JasperReports
, I have a parameter which carries value of the type HTML, and I have to export the same to a pdf file, where the pdf has to parse the html content
Html – Export html content to pdf using JasperReports
export-to-pdfhtmljasper-reports
Related Solutions
2015 update: the flexbox approach
There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.
Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.
(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.
To check current support you can also see here: http://caniuse.com/#feat=flexbox
Working example
With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.
html,
body {
height: 100%;
margin: 0;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<p>
<b>content</b>
(fills remaining space)
</p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>
In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.
Basics
For controlling "cellpadding" in CSS, you can simply use padding
on table cells. E.g. for 10px of "cellpadding":
td {
padding: 10px;
}
For "cellspacing", you can apply the border-spacing
CSS property to your table. E.g. for 10px of "cellspacing":
table {
border-spacing: 10px;
border-collapse: separate;
}
This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".
Issues in IE ≤ 7
This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse
property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0"
) then border-collapse:collapse
should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing
HTML attribute on the table element.
In short: for non-Internet Explorer 5-7 browsers, border-spacing
handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse
.
table {
border-spacing: 0;
border-collapse: collapse;
}
Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.
Best Answer
For showing html code in report we can use htmlcomponent developed by Jaspersoft (as I understnd after looking at source code the author is Narcis Marcu).
This component has a lot of limitations and cannot assist you in every case for any html page of any complexity. Anyway, the below is explains how to use this component.
This component can be easily added to the report with help of iReport 5.6.0. At last versions of Jaspersoft Studio (JSS) this component was removed from the palette for some reasons.
The Html component in iReport:
Using JSS
If you are using the JSS there is no reason to be upset - the support of Html component is still present in Studio. You can find the htmlcomponent.jar in folder like this:
Jaspersoft Studio-6.3.1.final\configuration\org.eclipse.osgi\38\0\.cp\lib\
.We can use Generic component in JSS for using all functionality of Html component.
For doing this we should set at least couple properties of Generic component:
Generic Type Name should be:
htmlelement
Generic Type Namespace should be:
http://jasperreports.sourceforge.net/jasperreports/html
We can operate with this properties of Html component:
It JSS this properties can be set with help of Advanced tab of component's Properties:
At iReport its much easier to set the same properties:
As I mentioned before the JSS still has the htmlcomponent support. If you have jrxml file with htmlcomponent you can see all properties in JSS in the same way as at iReport.
Sample of using htmlcomponent component
We can show this simple html page at pdf report with help of JRPdfExporter.
The html page:
We will try to use htmlcomponent with help of wrapper (native component) for HTML component and with help of Generic component.
The html code will be passed via report's parameter (
htmlCode
in samples)Using native htmlcomponent component.
The jrxml file:
Using Generic component.
The jrxml file:
In both cases we can use the same Java code:
For valid working (report compiling) we should add htmlcomponent.jar to the classpath!
Output result
The output result for both cases will be the same:
More info:
jasperreports-6.x\demo\samples\htmlcomponent
folderjasperreports-6.x\demo\samples\genericelement