CODEWITHSUNDEEP
htmljasper-reportsexport-to-pdf
User00
User00

Reputation: 121

font-size rendering issue with HTML component

I am facing a problem with the text font-size of my pdf report while rendering an embeded html component such as :

my Java code :

StringBuilder htmlBody = new StringBuilder("");
htmlBody.append("<p class=\"m\">").append(mainSkillCategory.getName()).append("</p>\n");
for(SubSkillCategory subSkillCat : mainSkillCategory.getSubSkillCategories()){
    htmlBody.append("<p class=\"c\">").append(subSkillCat.getName()).append("</p>\n");
    for(Skill skill : subSkillCat.getSkills()){
        htmlBody.append("<p class=\"s\">").append(skill.getName()).append("</p>\n");
    }
}
StringBuilder html = new StringBuilder("");
html.append("<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01//EN\">\n");
html.append("<html>\n");
html.append("<head>\n");
html.append("    <title>Sample of html based report</title>\n");
html.append("    <style type=\"text/css\">\n");
html.append("        p.m {\n");
html.append("              font-size: 12px;\n");
html.append("              font-family: \"Calibri\";\n");
html.append("              padding: 0pt 0pt 0pt 1cm;\n");
html.append("              font-weight: bold;\n");
html.append("              margin: 1pt 0pt 1pt 0pt;\n");
html.append("        }\n");
html.append("\n");
html.append("        p.c {\n");
html.append("              font-size: 12px;\n");
html.append("              font-family: \"Calibri\";\n");
html.append("              padding: 0pt 0pt 0pt 2cm;\n");
html.append("              font-weight: bold;\n");
html.append("              margin: 1pt 0pt 1pt 0pt;\n");
html.append("        }\n");
html.append("\n");
html.append("        p.s {\n");
html.append("              font-size: 12px;\n");
html.append("              font-family: \"Calibri\";\n");
html.append("              font-weight: normal;\n");
html.append("              padding: 0pt 0pt 0pt 3cm;\n");
html.append("              margin: 0pt 0pt 0pt 0pt;\n");
html.append("        }\n");
html.append("\n");
html.append("    </style>\n");
html.append("</head>\n");
html.append("\n");
html.append("<body>\n");
html.append(htmlBody.toString());                                                                                                                                                                                                                                                                           html.append("</body>\n");
html.append("</html>");
params.put("htmlCode", html.toString());

.jrxml template :

<?xml version="1.0" encoding="UTF-8"?>
<jasperReport xmlns="http://jasperreports.sourceforge.net/jasperreports" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://jasperreports.sourceforge.net/jasperreports http://jasperreports.sourceforge.net/xsd/jasperreport.xsd" name="Html component" pageWidth="595" pageHeight="842" columnWidth="200" leftMargin="20" rightMargin="20" topMargin="20" bottomMargin="20">    
    <style name="backgroundStyle" mode="Opaque" backcolor="green"/>
    <parameter name="htmlCode" class="java.lang.String"/>
    <title>
        <band height="200">
            <componentElement>
                <reportElement style="backgroundStyle" x="0" y="0" width="550" height="200"/>
                <hc:html xmlns:hc="http://jasperreports.sourceforge.net/htmlcomponent" xsi:schemaLocation="http://jasperreports.sourceforge.net/htmlcomponent http://jasperreports.sourceforge.net/xsd/htmlcomponent.xsd" scaleType="RetainShape" horizontalAlign="Left" verticalAlign="Top">                   
                    <hc:htmlContentExpression><![CDATA[$P{htmlCode}]]></hc:htmlContentExpression>
                </hc:html>
            </componentElement>
        </band>
    </title>
</jasperReport>

if I proceed to report generation with JasperExportManager.exportReportToHtmlFile() the output is: html output

However, if I proceed with JasperExportManager.exportReportToPdfStream(), I get: pdf output

It might be hard to tell the difference from the joined screenshots, but it seems that the font-size of the generated pdf report which is specified within the CSS classes (i.e. p.m, p.c, p.s) is way bigger than what it actually should be (i.e. 12).

Someone here might have faced this problem before. Any help will be more than welcome.

Upvotes: 1

Views: 4135

Answers (2)

Andreas Covidiot
Andreas Covidiot

Reputation: 4765

(what we found out (JSS 6.3.2) :)

The HTML component has properties that allow to adjust the scaling stuff. Try Properties View -> HTML Properties -> Scale Type -> [Clip] e.g..

(and some broader picture for clarity:)

But this only applies to Java (default in Preview tab) or PDF rendering :

scale type Java differences (<- Java Preview or PDF rendered) enter image description here (<- Design tab)

the right float number column shows the effects of Scale Type (and Horizontal Align: Right, where the 9966.26 shows the standard font size desired for output):

Retain Shape
Clip
Fill Frame
Real Height
Real Size

switching to the HTML rendering has no effect (and thus must be dealt with some HTML-based styling of an enclosing (maybe fixed-width/height) div or similar):

enter image description here

(older/outdated solution:)

Under certain circumstances (if you know the number of lines returned in the html element) it is possible by setting the html element height proportionally to the number of text lines returned.

E.g. if you text size equals 15px and you get the following 2-liner (not too long so it won't be automagically shrunk)

some sample broken
text

then setting the html element height to 30px would render the appropriate size. This means of course, that either you know the number of lines at design time (it is fixed) or you would have to set it dynamically using the Java API for the report.

Upvotes: 0

Narcis
Narcis

Reputation: 2521

The htmlcomponent inside JasperReports is still in an experimental state(it is separated from the core library, inside a sample) and, most likely, will remain that way.

That is because its output is unpredictable in non-HTML formats where an image is created. That image could overflow and the engine could not decide where to break it.

For small HTML you may be fine with it, but the default image producer is based on Java's default JEditorPane which has limited CSS support.

You could go around that and try setting a more CSS friendly image producer(with CSS 2.1 support) with this property:

net.sf.jasperreports.html.printelement.factory = net.sf.jasperreports.engine.util.FlyingSaucerHtmlPrintElementFactory

and see if there is any improvement. Because the output of this component is an image after all, switching to different scale types may help in preserving the original shape of the content.

Please keep in mind that setting the above mentioned property in a version of JasperReports greater than 6.2.2 will break the non-HTML export for reports using this component. This is going to be fixed in an upcoming release.

Upvotes: 1

Related Questions