Google 图表未在 Snappy PDF 中显示

Question

我正在尝试加载图表，然后使用 Laravel-snappy

将其转换为 PDF

这是我用来生成 pdf 的代码：

$pdf = SnappyPDF::loadView('report', []);
$pdf->setOption('enable-javascript', true);
$pdf->setOption('no-stop-slow-scripts', true);
$pdf->setOption('page-size', 'A4');
$pdf->setOption('lowquality', false);
$pdf->setOption('disable-smart-shrinking', true);
$pdf->setOption('images', true);
$pdf->setOption('window-status', 'ready');
$pdf->setOption('run-script', 'window.setTimeout(function(){window.status="ready";},5000);');
return $pdf->inline();

这里是 HTML/CSS report.blade.php:

<head>
    <script src="http://www.gstatic.com/charts/loader.js"></script>
    <script>
      function init() {
        google.charts.load('current', {packages: ['corechart']});
        var interval = setInterval(function () {
          if (google.visualization !== undefined && google.visualization.DataTable !== undefined 
            && google.visualization.PieChart !== undefined) {
            clearInterval(interval);
            window.status = 'ready';
            drawChart();
          }
        }, 100);
      }

      function drawChart() {
        // Define the chart to be drawn.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Element');
        data.addColumn('number', 'Percentage');
        data.addRows([
          ['Nitrogen', 0.78],
          ['Oxygen', 0.21],
          ['Other', 0.01]
        ]);

        var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
        chart.draw(data, {});
      }
    </script>
</head>
<body onload="init()">
<div id="myPieChart" style="width: 500px; height: 500px;"></div>
</body>

PDF 输出总是返回空白页。

Answer 1

试试这个：感谢 https://github.com/barryvdh/laravel-snappy/issues/255#issuecomment-628815194

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

    <script type="text/javascript">

        spandata = document.getElementsByClassName("spandata")
        spandatadate = document.getElementsByClassName("spandatadate")
        function init() {
          google.charts.load('current', {packages: ['corechart']});
          var interval = setInterval(function() {
            if ( google.visualization !== undefined && google.visualization.DataTable !== undefined && google.visualization.PieChart !== undefined ){ clearInterval(interval);
              window.status = 'ready';
              drawCharts();
            }
          }, 100);
        }



        function drawCharts() { // PROCESSING ... }
</script>

其中 drawCharts() 是处理绘图等的函数

它终于对我有用了，所以...我希望它对你有用！

我仍然不知道问题出在哪里，但我想这是因为图表 API 无法快速加载，所以 wkhtmltopdf 在图表加载之前处理转换。等待 DOM 准备就绪 + 设置间隔似乎可以解决问题（目前！）

编辑 2020 年 6 月 21 日

忘了告诉：http://www.google.com/jsapi redirect to an HTTPS page for gstatic (https://www.gstatic.com/charts/loader.js) 哪个是 JS API Google 的新地方。所以，如果你想让 wkhtmltopdf 正常工作，你需要安装 libssl 包

sudo apt-get install libssl1.0-dev

你可以试试

wkhtmltopdf https://google.com google.pdf

如果没有，你会得到这样的输出：

Loading pages (1/6)
QSslSocket: cannot resolve CRYPTO_num_locks                  ] 10%
QSslSocket: cannot resolve CRYPTO_set_id_callback
QSslSocket: cannot resolve CRYPTO_set_locking_callback
QSslSocket: cannot resolve sk_free
QSslSocket: cannot resolve sk_num
QSslSocket: cannot resolve sk_pop_free
QSslSocket: cannot resolve sk_value
QSslSocket: cannot resolve SSL_library_init
QSslSocket: cannot resolve SSL_load_error_strings
QSslSocket: cannot resolve SSLv3_client_method
QSslSocket: cannot resolve SSLv23_client_method
QSslSocket: cannot resolve SSLv3_server_method
QSslSocket: cannot resolve SSLv23_server_method
QSslSocket: cannot resolve X509_STORE_CTX_get_chain
QSslSocket: cannot resolve OPENSSL_add_all_algorithms_noconf
QSslSocket: cannot resolve OPENSSL_add_all_algorithms_conf
QSslSocket: cannot resolve SSLeay
QSslSocket: cannot call unresolved function CRYPTO_num_locks
QSslSocket: cannot call unresolved function CRYPTO_set_id_callback
QSslSocket: cannot call unresolved function CRYPTO_set_locking_callback
QSslSocket: cannot call unresolved function SSL_library_init
QSslSocket: cannot call unresolved function SSLv23_client_method
QSslSocket: cannot call unresolved function sk_num
QSslSocket: cannot call unresolved function SSLv23_client_method
QSslSocket: cannot call unresolved function SSL_library_init
Error: Failed loading page https://google.com (sometimes it will work just to ignore this error with --load-error-handling ignore)
Exit with code 1 due to network error: UnknownNetworkError
QSslSocket: cannot call unresolved function CRYPTO_num_locks
QSslSocket: cannot call unresolved function CRYPTO_set_id_callback
QSslSocket: cannot call unresolved function CRYPTO_set_locking_callback

安装 libssl 后，google.pdf 测试的输出应该是

Loading pages (1/6)
Counting pages (2/6)                                               
Resolving links (4/6)                                                       
Loading headers and footers (5/6)                                           
Printing pages (6/6)
Done

我正在使用：

Laravel 5.7
PHP 7.1.3
barryvdh/laravel-dompdf ^0.8.5
barryvdh/laravel-snappy ^0.4.6
wkhtmltopdf 0.12.4 (with patched qt)
Ubuntu 18.04 LTS

Answer 2

我遇到了同样的问题 - 得到空白图表或错误消息 'Undefined is not a function.'。

在尝试了所有可能的选项 3 天后，对我有用的是“恢复”到旧的 Google 图表版本。

<script>google.load("visualization", "44", {packages:["corechart"]});</script>

我之前使用“1”作为版本号。并且刚刚发现现在使用版本“1”意味着您正在使用当前版本！来自 Google Charts 文档 - “所有 'jsapi' 请求现在都被重定向到新的加载程序。如果您正在加载版本“1”或“1.0”，您现在将加载 'current'."

也试过45版，万一失败了。看起来较新的版本在使用 wkhtmlpdf 时存在加载问题。

Google 图表未在 Snappy PDF 中显示

Google charts are not showing in Snappy PDF

wkhtmltopdf

laravel

laravel-snappy