Экспорт Google Chart в PDF с помощью Cloudformatter, генерирует пустой PDF

Question

Я пытаюсь экспортировать Google Chart в PDF-файл. Я использую для этого плагин xepOnline.jqPlugin.js от cloudformatter.com. Я выполнил все шаги из http://www.cloudformatter.com/CSS2Pdf.APIDoc.Usage

Но когда я пытаюсь экспортировать, PDF получить генерирует с пустым квадратным окном.

Я загружаю гугл-чарт из jquery ajax call. Может ли кто-нибудь сказать мне, в чем может быть проблема?

Вот пример кода без вызова ajax -

 <button type="button" id="" class="btn btn-success pull-right" style="margin-right: 7px;" onclick="return xepOnline.Formatter.Format('chart_container', {render: 'download', filename: 'Years_Build', mimeType: 'application/pdf'});">Export</button>
    <div id="chart_container">
      <div id="chart_div"></div>
    </div>
<script type="text/javascript">
function drawChart() {
var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('chart_div'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
                                                            }
google.charts.load('current', {'packages': ['bar']});
google.charts.setOnLoadCallback(drawChart);
</script>

Answer 1

Вам не хватает пространства имен SVG, которое нужно добавить. Если вы исследуете образец скрипки на их сайте для каждой диаграммы, вы увидите функцию, которая добавляет пространство имен после того, как диаграмма нарисована.

Например, см. http://jsfiddle.net/w1rpjxoe/

Вы бы увидели эту функцию:

function AddNamespace(){
  var svg = jQuery('#chart_div svg');
  svg.attr("xmlns", "http://www.w3.org/2000/svg");
  svg.css('overflow','visible');
}

Он вызывается из этого слушателя:

 google.visualization.events.addListener(chart, 'ready', AddNamespace);

Что это делает, так это добавляет отсутствующее пространство имен SVG к диаграмме SVG, чего не делает карта Google, но требуется @cloudformatter.