在 Laravel 中使用 Snappy 在 PDF 上渲染 LavaChart

Question

我正在尝试使用 snappy 库和 wkhtmltopdf 在生成的 PDF 上呈现图表 (LavaChart)，但我无法做到。 PDF 生成良好，但图表未显示。如果视图未转换为 PDF，则按预期呈现图表。

下面是我的 LavaChart 和 Snappy 代码。

图表部分

         $chart = Lava::ColumnChart('Performance', $table, [
            'title' => 'Performance Chart',
            'png' => true,
            'animation' => [
               'startup' => true,
               'easing' => 'inAndOut'
            ],
            'titleTextStyle' => [
                'fontName' => 'Arial',
                'fontColor' => 'blue'
            ],
            'legend' => [
                'position' => 'top'
            ],
            'vAxis' => [
                'title' => 'Total Score'
            ],
            'hAxis' => [
                'title' => 'Class'
            ],
            'events' => [
                'ready' => 'getImageCallback'
            ],
            'colors' => ['#3366CC','#DC2912', '#FF9900']
        ]);

活泼的部分

    $pdf = PDF::loadView('print.charts')->setPaper('portrait');
    $pdf->setOption('enable-javascript', true);
    $pdf->setOption('javascript-delay', 10000);
    $pdf->setOption('no-stop-slow-scripts', true);
    $pdf->setOption('page-size', 'A4');
    $pdf->setOption('margin-left', 0);
    $pdf->setOption('margin-right', 0);
    $pdf->setOption('margin-top', 0);
    $pdf->setOption('margin-bottom', 0);
    $pdf->setOption('lowquality', false);
    $pdf->setTimeout(1500);
    $pdf->setOption('disable-smart-shrinking', true);

视图部分

    <script type="text/javascript">
        function getImageCallback (event, chart) {
            console.log(chart.getImageURI());
        }
    </script>

 <div id="chart" style="margin: 10px; height: 200px; width: 50%;"></div>
 {!! Lava::render('ColumnChart', 'Performance', 'chart') !!}    

由于当视图未转换为 pdf 时图表按预期呈现，我有理由相信 wkhtmltopdf 不会执行 pdf 版本中预期的 javascript。我安装了最新的wkhtmltopdf，但仍然没有运气。

库版本：

barryvdh/laravel-snappy: ^0.4.3
khill/lavacharts: 3.0.*

任何帮助将不胜感激，谢谢。

Answer 1

我可以用一个简单的例子来展示，起初我在浏览器上展示了图表，图表示例取自 Lavacharts 文档（你可以使用你的）。保持注意 events 带有回调 getImageCallback。

public function index(){
        $lava = new Lavacharts;
        $data = $lava->DataTable();

        $data->addDateColumn('Day of Month')
            ->addNumberColumn('Projected')
            ->addNumberColumn('Official');

        // Random Data For Example
        for ($a = 1; $a < 20; $a++) {
            $rowData = [
            "2020-10-$a", rand(800,1000), rand(800,1000)
            ];

            $data->addRow($rowData);
        }

        $lava->LineChart('Stocks', $data, [
            'elementId' => 'stocks-div',
            'title' => 'Stock Market Trends',
            'animation' => [
                'startup' => true,
                'easing' => 'inAndOut'
            ],
            'colors' => ['blue', '#F4C1D8'],
            'events' => [
                'ready' => 'getImageCallback'
            ]
        ]);

        return view('charts-view', ['lava' => $lava]);
    }

在视图charts-view，

 <div id="stocks-div">
        <?= $lava->render('LineChart', 'Stocks', 'stocks-div'); ?>
    </div>
    <form action="{{ url('export-pdf') }}" method="post">
        @csrf
        <div class="form-group">
            <input type="hidden" name="exportpdf" id="exportPDF">
            <button class="btn btn-info" type="submit">Export as PDF</button>
        </div>
    </form>
    <script type="text/javascript">
        function getImageCallback (event, chart) {
            console.log(chart.getImageURI());
            document.getElementById("exportPDF").value = chart.getImageURI();
        }
    </script>

请注意脚本中的函数名称必须与控制器中events 中ready 键设置的值相同。到此为止，您也已经完成了。我已将通过获得的结果作为隐藏输入字段传递并将表单发布到控制器。您可以在图表按钮export as PDF 中看到。

---

url export-pdf 调用控制器函数exportPdf 最终生成PDF。您需要将图像（以data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB ..... 获得）传递给控制器​​以将其作为图像传递给视图。

在exportPdf中，

      public function exportPdf(Request $request){
        $imageData = $request->get('exportpdf');
        $pdf = SnappyPDF::loadView('export-pdf', ['imageData' => $imageData])->setPaper('a4')->setOrientation('portrait');
        $pdf->setOption('lowquality', false);
        $pdf->setTimeout(1500);
        $pdf->setOption('disable-smart-shrinking', true);
        return $pdf->download('stock-market.pdf');                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
    }

export-pdf 刀片视图

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Stock Market</title>
</head>
<body>
    <div class="container">
        <div class="col">
            <h2>Stock Market Detail</h2>
        </div>
        <div class="col">
            <h4>Oct 2020</h4>
        </div>    
    </div>
    <img src="{{ $imageData }}" alt="image" width="720" height="230">
</body>
</html>

获得的最终 PDF 看起来像，