提问者:小点点

谷歌图表不使用Wkhtmltopdf


我试图使用谷歌图表在PDF中生成多个图表。对于PDF,我使用CakePDF与Wkhtmltopdf引擎。我似乎有一个问题,实际上加载到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>

问题是当我使用谷歌时。加载可视化包时,它会导致Wkhtmltopdf返回,并显示引擎未返回任何数据的错误。我发现一个问题,我认为是类似的为什么谷歌。加载导致我的页面变为空白?所以我尝试执行setTimeout(function(){google.load('visualization','1.0',{packages':['corechart']});},100); 这个解决方案的问题是,如果延迟太低,页面将返回,没有错误,但它将是完全空白的;但是,如果我将延迟设置得太高,页面将不会加载包,Javascript将在

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

当我调用函数时。此外,该海报还说明了文件存在问题。write(),但如果添加文档,则不会出现任何问题。将内容添加到页面之前或之后的write()行。如果有人知道如何让谷歌图表与Wkhtmltopdf一起使用,并能帮助我,我将不胜感激。

好的,为了给API更多的加载时间,我把调用函数的地方移到了PHP的末尾。现在,它只需设置一个元素数组,这些元素需要在其中绘制图形和适当的值,然后使用数组中的值调用函数。我不确定现在的问题是什么,因为它在图表上被破坏了。绘制(数据、选项)现在。但它似乎获得了正确的值和传递给它的元素。

这看起来真的很迂回,因为它是。无论出于何种原因,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没有返回任何数据。


共3个答案

匿名用户

问题:当使用wkhtmltopdf/wkhtmltoImage在html页面上的pdf/图像(使用Google图表)时,它不包含Google图表。输出(pdf/png)在谷歌图表应该显示的位置是空白的。当然,原始的html页面是好的。

解决方案:我通过替换以下内容解决了此问题(Google图表wkhtmltopdf):

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

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

不知何故,wkhtmltopdf库无法处理包含第一个javascript包含的Google图表html页面。

匿名用户

我今天自己解决了这个问题,下面是我的答案。有关更详细的演练,欢迎您阅读我关于该主题的博客文章。

我只需做两个简单的更改即可使其正常工作:

  1. 提供javascript delay参数,例如javascript delay 1000。这会将JavaScript代码的执行延迟1000毫秒
function init() {
  google.load("visualization", "1.1", {
    packages: ["corechart"],
    callback: 'drawCharts'
  });
}

匿名用户

与其使用javascript delay选项,不如使用windowstatus实际等待图表的呈现<代码>窗口状态使wkhtmltopdf等待窗口状态达到所需值。

将事件侦听器添加到图表中

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

使用--窗口状态就绪运行wkhtmltopdf