首页 文章

Google Charts未与Wkhtmltopdf合作

提问于
浏览 次
5

我正在尝试使用Google Charts在PDF中生成多个图表 . 对于PDF，我使用CakePDF和Wkhtmltopdf引擎 . 我似乎遇到了将Google Chart代码实际加载到PDF中的问题 . 这是我目前的Javascript代码 .

<script type="text/javascript" src="https://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
//setTimeout(function() {google.load('visualization', '1.0', {'packages':['corechart']});}, 100);
google.setOnLoadCallback(drawChart);
function drawChart(doIt,taken, total, element) 
{
    if (typeof doIt === 'boolean')
    {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Type');
        data.addColumn('number', 'Courses');
        data.addRows([
          ['Taken', taken],
          ['Remaining', total - taken]
        ]);
        var options = {
                       'width':40,
                       'height':40};
        var chart = new google.visualization.PieChart(document.getElementById(element));
        chart.draw(data, options);
    }
 }
</script>

问题是，当我为可视化软件包执行google.load时，它会导致Wkhtmltopdf返回错误，指出引擎没有返回任何数据 . 我在Why does google.load cause my page to go blank?发现了一个我觉得相似的问题所以我试着做setTimeout（function（）{google.load（'visualization'，'1.0'，{'packages'：['corechart']}）;}，100）;这个解决方案的问题是，如果延迟太低，页面将返回没有错误，但它将完全空白;但是，如果我将延迟设置得太高，页面将不会加载包，Javascript将会中断

var data = new google.visualization.DataTable();

当我调用该函数时 . 另外，那张海报说明了document.write（）的问题，但如果我在将内容添加到页面之前或之后添加document.write（）行，则没有问题 . 如果有人知道如何让Google Charts与Wkhtmltopdf合作并且可以帮助我，我将不胜感激 .

好的，为了让API有更多的时间加载，我将函数调用到PHP的末尾 . 现在，它只是设置一个元素数组，需要在其中绘制图形和正确的值，然后它使用数组中的值调用函数 . 我不知道现在的问题是什么，因为它现在正在打破 chart.draw(data, options); . 它似乎是获取正确的值和元素传递给它 .

这似乎真的很迂回，因为它是 . 无论出于何种原因，Wkhtmltopdf无法读取我在javascript标签中放置的任何内容 . 我已尽力让它读取它，但它不会哈哈 . CakePDF插件可以读取Javascript，所以我的JS代码是默认的PDF布局 . 然后在WkhtmltoPdf呈现的实际视图中，我创建了一个元素和值的数组 . 然后我这样做（在许多不同的可能解决方案之后，这是我能够调用JS函数的唯一方法）

for ($i = 0; $i < sizeof($grade_array); $i++)
{
    $element = $grade_array[$i][2];
    echo '<script type="text/javascript">drawChart(true, '.$this->Js->value($grade_array[$i][0]).', '.$this->Js->value($grade_array[$i][1]).','.json_encode($element).');</script>';
}

它似乎传递了所有正确的数据 . 在调用该函数时，我有调试行打印参数，并且所有参数都被正确打印 . 我还注意到，如果我在chart.draw（）的同一个地方执行document.write（'test'），它将编写'test'而不会出现任何错误 . 出于某种原因，如果我做chart.draw（），它只是说Wkhtmltopdf没有返回任何数据 .

javascript google-visualization wkhtmltopdf

4 回答

  • 0

    问题：在html页面（使用Google Chart）上使用wkhtmltopdf / wkhtmltoimage pdf / image时，它不包含Google图表 . 输出（pdf / png）在Google Chart应该显示的位置处只是空白 . 当然，原来的html页面没问题 .

    解决方案：我通过替换解决了这个问题（Google Charts wkhtmltopdf）：

    <script src="http://www.gstatic.com/charts/loader.js"></script>

    通过

    <script src="http://www.google.com/jsapi"></script>

    不知何故，wkhtmltopdf库无法处理包含第一个javascript包含的Google Chart html页面 .

    回复于
  • 6

    而不是使用 javascript-delay 选项，您应该实际上等待使用 window-status 呈现图表 . window-status 使wkhtmltopdf等到窗口状态具有所需的值 .

    向图表添加事件侦听器

    google.visualization.events.addListener(tableChart, 'ready', myReadyHandler);
function myReadyHandler(){
  window.status = "ready";
}

    使用 --window-status ready 运行wkhtmltopdf

    回复于
  • 2

    我今天自己解决了这个问题，所以这对我有用 . 有关更详细的演练，欢迎您阅读关于该主题的blog post .

    我只需做两个简单的更改就可以了：

    • 提供 javascript-delay 参数，例如 javascript-delay 1000 . 这会延迟JavaScript代码的执行1000毫秒

    • 加载Google Visualization API时添加回调

    function init() {
  google.load("visualization", "1.1", {
    packages: ["corechart"],
    callback: 'drawCharts'
  });
}

    然后，您可以简单地实现 drawCharts 功能，您可以像往常一样绘制图表 .

    确保您的标记包括以下内容：

    <body onload="init()">
    <div id="my-chart"></div>
</body>

    只需将您的图表绘制到具有上述ID的div，您就应该好好去 .

    注意：我使用的是最新的二进制文件（截至目前为0.12.0） . 在64位Ubuntu安装上测试 .

    回复于
  • 2

    我也有使用的问题

    window.onload = function () {
   google.charts.load("current", {packages:["corechart", "timeline", "bar"]});
   google.charts.setOnLoadCallback(drawCharts);
};

    drawCharts永远不会被QT引擎启动，因此PDF中没有呈现图表（也通过QTWeb浏览器验证） .

    我终于以一种不太优雅的方式解决了问题

    window.onload = function () {
   google.charts.load("current", {packages:["corechart", "timeline", "bar"]});
   setTimeout(function(){drawCharts();}, 500);
};
    回复于

相关问题