javascript - 谷歌图表不适用于 Wkhtmltopdf

Question

我正在尝试使用 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 呈现的实际 View 中，我创建了一个元素和值数组。然后我这样做(在许多不同的可能解决方案之后，这是我能够调用 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 没有返回任何数据。

Answer 1

问题:当在 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 include 的 Google Chart html 页面。