Wkhtmltopdf 和谷歌图表答案

【问题标题】：Wkhtmltopdf and Google ChartsWkhtmltopdf 和谷歌图表
【发布时间】：2017-03-07 19:24:09
【问题描述】：

我正在使用 wkhtmltopdf（0.12.4 补丁 qt）和 phpwkhtmltopdf 从 html 创建 PDF 文件。在其中一些 PDF 中，我需要包含几个图表，为此我一直在使用谷歌图表。我目前面临的问题是在尝试创建一个包含多页图表的 pdf 时出现的。进程出错并显示以下消息：

Loading pages (1/6)
[>                                                           ] 0%
[>                                                           ] 0%
[>                                                           ] 1%
[=>                                                          ] 2%
[=>                                                          ] 3%
[==>                                                         ] 4%
[===>                                                        ] 5%
[===>                                                        ] 6%
[====>                                                       ] 7%
[====>                                                       ] 8%
[=====>                                                      ] 9%
[======>                                                     ] 10%
[======>                                                     ] 10%
[=======>                                                    ] 13%
[==========>                                                 ] 18%
[============>                                               ] 21%
[===============>                                            ] 26%
[===============>                                            ] 26%
[==================>                                         ] 30%
[=====================>                                      ] 35%
[======================>                                     ] 38%
[=========================>                                  ] 43%
[===========================>                                ] 46%
[==============================>                             ] 51%
[=================================>                          ] 55%
[===================================>                        ] 59%
[=====================================>                      ] 63%
[========================================>                   ] 67%
[==========================================>                 ] 71%
[=============================================>              ] 76%
[=============================================>              ] 76%
[==============================================>             ] 78%
[==============================================>             ] 78%
[===============================================>            ] 79%
[================================================>           ] 80%
[================================================>           ] 81%
[====================================================>       ] 87%
[=====================================================>      ] 89%
[======================================================>     ] 90%
[======================================================>     ] 91%
[=======================================================>    ] 92%
[=========================================================>  ] 95%
[============================================================] 100%

如您所见，这不是一个很有帮助的错误。

我使用 1 秒的 js 延迟来让图表有机会加载。如果我消除此延迟，则 PDF 会正确创建，但不会显示任何图表。此外，如果我将延迟保持在 1 秒，但减少包含图表的页面数量，则一切正常。我可以创建一个包含 5 个“图表页”的 10 页 PDF，但是如果我尝试创建 11 页和 6 个图表，它会失败。我需要能够在单个 PDF 中处理更多的 10 或 15 个图表。

感谢您对此错误的任何见解或替代方法的建议。谢谢！

【问题讨论】：

@WhiteHat，感谢您的建议。我试过了，但没有运气。得到了和以前一样的结果。

标签： php google-visualization wkhtmltopdf

【解决方案1】：

使用 '--window-status ready' 结合以下 JS 解决了加载问题。问题是时间问题，通过JS函数解决：

function loadGoogleGraph(graphCallback) {
        var interval = setInterval(function() {
            console.log('not-ready-yet');
            if (
                google.visualization !== undefined
                && google.visualization.DataTable !== undefined
                && google.visualization.PieChart !== undefined
            ){
                clearInterval(interval);
                console.log('ready');
                window.status = 'ready';
                graphCallback()
              }
        }, 100);
    }


    loadGoogleGraph(<YOUR FUNCTION>)

而不是

google.charts.setOnLoadCallback(<YOUR FUNCTION>);

以上是来自 Abisco 的改编：https://github.com/barryvdh/laravel-snappy/issues/255#issuecomment-628815194

【讨论】：

【解决方案2】：

我在包含图表的负载繁重的页面上遇到了类似的问题。把握好时机很棘手，经过数小时的拉扯后，我发现关键（至少对我而言）是确保等式的两个“方面”都正确计时，时间越长越好wkhtmltopdf 等待状态。

在谷歌图表方面的 IE，我通过在实际库拉取中添加 JS 延迟来包含足以防止愚蠢的 Chrome“页面加载缓慢”错误的延迟：

setTimeout(function(){google.load('visualization', '1.1', {'callback':'drawChart', 'packages':['corechart', 'bar']})}, 1200);

1200 可以很好地满足我的需求，您可能需要将其提高，具体取决于您从 google 中提取的内容。

（对我而言）重要的是确保 wkhtmltopdf 平衡延迟并为自身增加一点延迟（谷歌延迟 + 处理延迟）。对于这个页面，我在 pdf 端添加了 2200 毫秒的延迟：

--javascript-delay: 2200

在我让这两个项目平衡讨论之前根本行不通。正如您所说，如果没有延迟，图表根本不会显示 - 这表明您很可能已经解决了一半的错误。尝试将延迟添加到另一侧可能会有所帮助，看看是否有帮助。

【讨论】：