i have a problem with the wkhtmltopdf converter. The pdf file is regularly generated with the exception of the Hightcharts charts (https://www.highcharts.com/). The problem I encountered in the last 24/48 hours, in the pdf file no type of graph is generated.
The command I use is the following:
mywkhtmltopdf13a.sh --javascript-delay "1000" --debug-javascript "http://localhost:8080/report" "highcharts_test.pdf"
The output is as follows:
Loading page (1/2)
Warning: https://code.highcharts.com/highcharts.js:46 TypeError: null is not an object (evaluating 'b.body')
Warning: https://code.highcharts.com/highcharts.js:46 TypeError: null is not an object (evaluating 'b.body')
Warning: https://code.highcharts.com/highcharts.js:46 TypeError: null is not an object (evaluating 'b.body')
Warning: https://code.highcharts.com/highcharts.js:46 TypeError: null is not an object (evaluating 'b.body')
Warning: https://code.highcharts.com/highcharts.js:46 TypeError: null is not an object (evaluating 'b.body')
Printing pages (2/2)
Done
I also tried to insert: --enable-javascript --javascript-delay "3000" but the output is the same.
The html file (I only extrapolated a small part, as the problem is not in the code) from which I generate the file is the following:
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:yada="http://www.yadaframework.net"
>
<head>
<link rel="stylesheet" type="text/css" yada:href="@{|/res/css/pdfReportCounter${@config.min}.css|}" href="../../res/css/pdfReportCounter.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body class="pdf">
<div id="graf_tot_counter" style="width: 1000px;height: 370px;margin-top: 10px;margin-left: auto;margin-right: auto;"></div>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
Highcharts.chart('graf_tot_counter', {
chart: {
zoomType: 'xy'
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: [{
categories:[
/*[# th:each="test,iterStat : ${#numbers.sequence(0,conteggio)}"]*/
/*[# th:if="${showPastResult}==false or ${showComparePeriod}==false"]*/
/*[# th:text="|${totDay.get(iterStat.index).timestamp}|"]*/
/*[/]*/
/*[/]*/
/*[# th:if="${showPastResult}==true"]*/
/*[# th:text="|${totDay.get(iterStat.index).timestamp} - ${totalePastWeek.get(iterStat.index).timestamp} ${pastYear}|"]*/
/*[/]*/
/*[/]*/
,
/*[/]*/
],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
min: 0,
title: {
text: 'Ingressi / Uscite',
style: {
color: Highcharts.getOptions().colors[1]
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
}, { // Secondary yAxis
/*[# th:if="${pastGrafTotale}!=null"]*/
tickPositions: [[${pastGrafTotale}]],
/*[/]*/
/*[# th:if="${pastGrafTotale}==null"]*/
tickPositions: [[${grafTotale}]],
/*[/]*/
title: {
text: '<span style="color:#000000">SMILE</span><span style="color:#37ae72">INDEX</span>',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
plotOptions: {
column: {
dataLabels: {
//enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [
/*[# th:if="${viewIN}==true"]*/
{
name: 'Ingressi',
type: 'column',
color: '#FF9900',
data: [
/*[# th:each="test,iterStat : ${#numbers.sequence(0,conteggio)}"]*/
[[${totDay.get(iterStat.index).vIN}]],
/*[/]*/
]
},
/*[/]*/
/*[# th:if="${viewOUT}==true"]*/
{
name: 'Uscite',
type: 'column',
color: '#146EB4',
data: [
/*[# th:each="test,iterStat : ${#numbers.sequence(0,conteggio)}"]*/
[[${totDayOut.get(iterStat.index).vOUT}]],
/*[/]*/
]
},
/*[/]*/
/*[# th:if="${showPastResult}==true and ${viewIN}==true"]*/
{
name: 'Ingressi [[${pastYear}]]',
type: 'column',
color: '#b36b00',
data: [
/*[# th:each="test,iterStat : ${#numbers.sequence(0,conteggio)}"]*/
[[${totalePastWeek.get(iterStat.index).vIN}]],
/*[/]*/
]
},
/*[/]*/
/*[# th:if="${showPastResult}==true and ${viewOUT}==true"]*/
{
name: 'Uscite [[${pastYear}]]',
type: 'column',
color: '#146EA4',
data: [
/*[# th:each="test,iterStat : ${#numbers.sequence(0,conteggio)}"]*/
[[${totalePastWeek.get(iterStat.index).vOUT}]],
/*[/]*/
]
},
/*[/]*/
/*[# th:if="${showIndex}==true"]*/
{
name: 'SMILE<span style="color:#37ae72">INDEX</span> PERIODO',
type: 'spline',
color: '#009ee3',
yAxis: 1,
data: [
/*[# th:each="test,iterStat : ${#numbers.sequence(0,conteggio)}"]*/
[[${totDayIndex.get(iterStat.index).index}]],
/*[/]*/
]
},
/*[/]*/
/*[# th:if="${showPastResult}==true and ${showPastIndex}==true"]*/
{
name: 'SMILE<span style="color:#37ae72">INDEX</span> week [[${week}]] [[${pastYear}]]',
type: 'spline',
color: '#2A4B7C',
yAxis: 1,
data: [
/*[# th:each="test,iterStat : ${#numbers.sequence(0,conteggio)}"]*/
[[${pastDayIndex.get(iterStat.index).index}]],
/*[/]*/
]
}
/*[/]*/
]
});
/*]]>*/
</script>
</body> I confirm that the html page is correctly formed without some kind of problem, the graphics are visible.
What kind of problem is it? Does anyone encounter the same problem?
The fix is currently a part of the next release candidate code version, so should be released in the next version.
http://github.com/highcharts/highcharts/issues/15072
When online it will be possible to use the latest stable version (9.0.0).
I will update the post as soon as it is released.