如何使用laravel生成chartjs图表到pdf？

Question

我需要生成包括图表的pdf报告。我使用https://v6.charts.erik.cat/实现来创建图表，使用https://github.com/mikehaertl/phpwkhtmltopdf来生成pdf。

$pdf = new Pdf($fileHtml);
$pdf->setOptions([
    'javascript-delay' => 10000,
]);
$pdf->saveAs(public_path($filePdf));

但是图表看起来像是预加载到pdf文件中

html view

generated pdf

Answer 1

最好的办法可能是使用支持Javascript的呈现器将图表呈现为图像，然后将该图像添加到PDF中。

选项1:如果你想继续使用无头渲染，你可能需要在Javascript延迟之外添加一个--no-stop-slow-scripts选项(也可以查看Puppeteer，一个替代的渲染器)。

选项2:使用可将图表呈现为图像或PDF的服务。QuickChart是一个开放源码的web服务，可以做到这一点(我是它的维护者之一)。

例如，以您的Chart.js配置为例：

$chartConfig = '{
  "type": "bar",
  "data": {
    "labels": [2012, 2013, 2014, 2015, 2016],
    "datasets": [{
      "label": "Users",
      "data": [120, 60, 50, 180, 120]
    }]
  }
}';

使用/chart端点将其打包到URL中：

$chartUrl = 'https://quickchart.io/chart?w=500&h=300&c=' . urlencode($chartConfig);

然后将resulting URL作为图像包含在您的wkhtmltopdf页面中：

<img src="https://quickchart.io/chart?w=500&h=300&c=%7B%0A++%22type%22%3A+%22bar%22%2C%0A++%22data%22%3A+%7B%0A++++%22labels%22%3A+%5B2012%2C+2013%2C+2014%2C+2015%2C+2016%5D%2C%0A++++%22datasets%22%3A+%5B%7B%0A++++++%22label%22%3A+%22Users%22%2C%0A++++++%22data%22%3A+%5B120%2C+60%2C+50%2C+180%2C+120%5D%0A++++%7D%5D%0A++%7D%0A%7D" />

这将在没有任何Javascript的情况下呈现您的图表。

如果你想要一种更简单的方式，并且你对只显示图表的PDF格式没有问题，那么在URL中添加&format=pdf，服务将直接生成图表的PDF文件：example PDF

请注意，如果需要，您可以对图表呈现web服务执行self-host。