0

我正在尝试使用该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 时图表按预期呈现，我有理由相信wkhtmltopdfpdf 版本中没有执行预期的 javascript。我安装了最新的wkhtmltopdf，但仍然没有运气。

库版本：

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

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

4

1 回答 1

3

我可以用一个简单的例子来展示，首先我在浏览器上展示了图表，图表示例取自 Lavacharts 文档（你可以使用你的）。用回调记录下来 。eventsgetImageCallback

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]);
    }

在视图图表视图中，

 <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>

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

url调用最终生成 PDFexport-pdf的控制器函数。exportPdf您需要将图像（作为 获得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 看起来像， 在此处输入图像描述

于 2020-10-26T16:18:53.400 回答