Использование wkhtmltopdf с highcharts показывает пустую диаграмму

Я пытаюсь использовать wkhtmltopdf через Rotativa для преобразования базовой html-страницы, которая использует jquery и highcharts для демонстрации демо-диаграммы. Диаграмма отображается правильно, когда отображается в браузере. Может ли кто-нибудь сказать мне, что я делаю неправильно? Этот код приводит к пустому PDF.Использование wkhtmltopdf с highcharts показывает пустую диаграмму

Мое мнение:

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

А вот мой контроллер:

using System.Web.Mvc; 
using Rotativa; 

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

Спасибо!
Chris

источник

2013-10-01 Chris Harrington

Вы пытались использовать включенный модуль exporitng? exporing.js –

Можете ли вы поделиться ссылкой на страницу, чтобы мы могли протестировать? – Nenotlep

У меня его пока нет, так что я не могу предоставить ссылку. На тестовой странице в этом случае отображается только пустой PDF-файл. Если я добавлю другое содержимое без диаграммы, отсутствует только диаграмма. –

У меня была эта проблема, и причиной были ошибки JavaScript. Вы можете подтвердить это, запустив wkhtmltopdf с флагом --debug-javascript. Для более подробной отладки (например, номера строк) вам необходимо загрузить QtWeb browser.

В частности, в моем случае две проблемы заключались в том, что Object.values(obj) является неопределенной функцией, а $('a:not(.ignore)') является синтаксической ошибкой (когда jQuery 3.1.1 пытался использовать селектор). Исправить было использование Object.keys(obj).map(function (key) { return obj[key] }) и $('a').not('.ignore').

источник

2016-12-22 09:51:50 MichaelRushton

Использование wkhtmltopdf с highcharts показывает пустую диаграмму

ответ

Смежные вопросы