Using wkhtmltopdf with highcharts shows blank chart

问题

I'm attempting to use wkhtmltopdf via Rotativa to convert a basic html page which uses jquery and highcharts to render a demo chart. The chart renders correctly when displayed in a browser. Can anyone tell me what I'm doing wrong? This code results in a blank PDF.

My view:

<!DOCTYPE html>

<html>
  <head>
    <title>Highcharts Test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style type="text/css">
        #chart { float:left; width:300px; height:300px; }
    </style>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script>
        $(function() {
            $('#chart').highcharts({
                chart: {
                    backgroundColor: "red"  
                },
                title: {
                    text: 'Monthly Average Temperature',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Source: WorldClimate.com',
                    x: -20
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: '°C'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{
                    name: 'Tokyo',
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                }, {
                    name: 'New York',
                    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                }, {
                    name: 'Berlin',
                    data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                }, {
                    name: 'London',
                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                }]
            });
        });
    </script>
</head>

<body>
    <div id="chart"></div>
</body>
</html>

And here's my controller:

using System.Web.Mvc;
using Rotativa;

namespace Completions.MvcApplication.Controllers.Pages
{
public class ReportsController : BasePageController
{
    public ActionResult Systems()
    {
        return new ViewAsPdf();
    } 
}
}

Thanks!
Chris

回答1:

I had this issue and the cause was JavaScript errors. You can confirm this by running wkhtmltopdf with the --debug-javascript flag. For more detailed debugging (e.g. line numbers) you'll have to download the QtWeb browser.

Specifically in my case the two issues were that Object.values(obj) is an undefined function and $('a:not(.ignore)') is a syntax error (when jQuery 3.1.1 tried to use the selector). The fix was to use Object.keys(obj).map(function (key) { return obj[key] }) and $('a').not('.ignore').

回答2:

To me it seemed to me that the graph would stop rendering midway through. So what worked for me was setting the animation off:

plotOptions: {
    series: {
        animation: false
    }
}

This way the chart is ready once the pdf is generated.

来源：https://stackoverflow.com/questions/19106434/using-wkhtmltopdf-with-highcharts-shows-blank-chart

标签

Highcharts

wkhtmltopdf

rotativa