在 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 键设置的值相同。到这一步你也已经完成了。我已经通过隐藏输入字段获得的结果并将表单发布到 controller.You 可以在图表按钮 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-pdfblade观点

<!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看起来像，

在 Laravel 中使用 Snappy 在 PDF 上呈现 LavaChart

Using Snappy to render LavaChart on a PDF in Laravel

laravel

laravel-snappy