Jump to content

HTML component with external JavaScript File - HTML Export fails on Server (but not in Ireport or iOS)


Recommended Posts


I wanted to chart data with the Google Chart API. I created a HTML-Componente containing the the full HTML code inclusive the <script type='text/javascript' src='https://www.google.com/jsapi'> tag.
The HTML Export works fine in iReport, but the HTML Component remains empty when called  on jasperserver. There is no error message.
(btw: when called from iOS 7.0.1 with my iphone the page is displayed correctly.)  I tried with different browsers, but always the same thing.

Can anyone help?

Please find attached the JRXML

This is the JRXML code:

 <?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="HtmlComponentReport"              pageWidth="595"              pageHeight="842"              columnWidth="515"              leftMargin="40"              rightMargin="40"              topMargin="50"              bottomMargin="50"              uuid="b4ad5fd2-ee36-4fc4-a326-5600945b4633">    <property name="ireport.zoom" value="1.0"/>    <property name="ireport.x" value="0"/>    <property name="ireport.y" value="0"/>    <parameter name="JRProjectID" class="java.lang.Integer">        <defaultValueExpression>            <![CDATA[integer.valueOf(287)]]>        </defaultValueExpression>    </parameter>    <parameter name="chart" class="java.lang.String" isForPrompting="false">        <defaultValueExpression>            <![CDATA["<!DOCTYPE html><html><head><script type=text/javascript' src='https://www.google.com/jsapi'></script><script type='text/javascript'>google.load('visualization', '1.0', {'packages':['corechart]}); google.setOnLoadCallback(drawChart);function drawChart() {var data = new google.visualization.DataTable();data.addColumn('string', 'Topping');data.addColumn('number', 'Slices');data.addRows('Mushrooms', 3],['Onions', 1],['Olives', 1],['Zucchini', 1],['Pepperoni', 2);var options = {'title':'How Much Pizza I Ate Last Night', 'width':400,'height':300};var chart = new google.visualization.PieChart(document.getElementById('chart_div'));chart.draw(data, options);}</script></head><body><div id=chart_div' style='width:400; height:300'></div></body></html&gt]]>        </defaultValueExpression>    </parameter>    <queryString>        <![CDATA[select 1 as dummy]]>    </queryString>    <field name="dummy" class="java.lang.Integer"/>    <title>        <band height="502">            <componentElement>                <reportElement uuid="13361114-deb3-40d4-be5d-913b157ba7d3" x="0" y="0" width="515" height="472" backcolor="#ADD8E6"/>                <hc:html xmlns:hc="http://jasperreports.sourceforge.net/htmlcomponent"                         xsi:schemaLocation="http://jasperreports.sourceforge.net/htmlcomponent http://jasperreports.sourceforge.net/xsd/htmlcomponent.xsd"                         scaleType="FillFrame" horizontalAlign="Left" verticalAlign="Top">                    <hc:htmlContentExpression>                        <![CDATA[$P{chart}]]>                    </hc:htmlContentExpression>                </hc:html>            </componentElement>        </band>    </title></jasperReport>[/code]


Thanks for your help!


Link to comment
Share on other sites

  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

The HTML component an experimental component, so it is not in the normal Jasoer Server Distribution, so you will need to copy the iReport JAR to the WEB_INF/lib folder of JRS.

The JAR you need is jasperreports-htmlcomponent-5.x.x.jar where 5.x.x is the current version number, you can find this in <JaspersoftiReport-install-path>ireportmodulesext   
and paste it to <tomcat>webappsjasperserver-proWEB_INFlib  folder of jasperserver
Link to comment
Share on other sites

Hello Marianol,


thanks a lot for your answer. But unfortunateley this does not help. I have already copied the file in the lib-Folder of the server.


The HTML Component works fine with other examples (simple HTML, iframes or even Javascript codes).


But when using the


The weird thing is, that the reports displays correctly in ireport and also in the Jaspersoft App from Appstore but not when calling the report via browser from the server directly. I am using Jasperserver-Pro 5.2 on AWS. I also tried with a local installation: same problem.


Do you have any idea? Thanks so much for your help.




Link to comment
Share on other sites

Still no solution  :( How can I integrate this script?

<script type='text/javascript' src='https://www.google.com/jsapi'>[/code]

Do I maybe have to include this in the Header of the generated HTML file via the JRHtmlExporterParamter HTML_HEADER ?
But how to configure this on the jaspersoft server? How to add the Java Code for setting the parameter via ireport?

Thanks for your help!


Link to comment
Share on other sites

Hello Teodor,

thanks for your post. I have attached two screenshot of my browser.
1. When called on Jasperserver
2. When called with the Ireport Preview.
3. The Javascript Console Error Log ("Kein Element gefunden" = No element found)

Do you have an idea?

Thanks a lot,


Link to comment
Share on other sites

  • 2 weeks later...
  • 1 month later...

thanks for the answer UNfortunateley this does not work.

"<html><head><script language='JavaScript'class='jasperreports' type='text/javascript'src='https://www.google.com/jsapi'></script><scriptclass='jasperreports'type='text/javascript'>google.load('visualization', '1.0',{'packages':['corechart']});     google.setOnLoadCallback(drawChart);function drawChart() {var data = newgoogle.visualization.DataTable();data.addColumn('string','Topping');data.addColumn('number','Slices');data.addRows([['Mushrooms', 3],['Onions', 1],['Olives',1],['Zucchini', 1],['Pepperoni', 2]]);var options = {'title':'How MuchPizza I Ate Last Night',                    'width':400,'height':300};var chart = newgoogle.visualization.PieChart(document.getElementById('chart_div'));chart.draw(data,options);}</script></head><body><divid='chart_div' style='width:400;height:300'></div></body></html>"[/code]

Do you have any other idea ?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...