Question

我的 wkhtmltopdf 转换器有问题。除 Hightcharts 图表 (https://www.highcharts.com/) 外，定期生成 pdf 文件。我在过去 24/48 小时内遇到的问题，在 pdf 文件中没有生成任何类型的图表。

我使用的命令如下：

mywkhtmltopdf13a.sh --javascript-delay "1000" --debug-javascript "http://localhost:8080/report" "highcharts_test.pdf"

输出如下：

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

我也尝试插入：--enable-javascript --javascript-delay "3000" 但输出是一样的。

我生成文件的 html 文件（我只推断了一小部分，因为问题不在代码中）如下：

<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>

我确认 html 页面格式正确，没有任何问题，图形可见。

这是什么问题？有没有人遇到同样的问题？

Answer 1

我们在尝试使用最新版本的 HighCharts（当前为 9.0.0）使用 JavaScript 从 HTML 生成 PDF（使用 DocRaptor）时也注意到了这种行为

正如@ppotaczek 所指出的，恢复到 HighCharts 的第 8 版可以成功生成 PDF。虽然这并不理想，但它暂时让我们渡过了难关。我们也将对该问题的解决感兴趣。

<script src='https://code.highcharts.com/8/highcharts.js'>

Answer 2

该修复目前是下一个候选代码版本的一部分，因此应该在下一个版本中发布。

http://github.com/highcharts/highcharts/issues/15072

在线时可以使用最新的稳定版本（9.0.0）。

文章一发布，我会及时更新。

TypeError: null is not an object (evaluating 'b.body') - Highcharts/wkhtmltopdf

2 个答案: