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

Question

我需要生成包含 chartjs 图表的 pdf 报告。我使用 https://v6.charts.erik.cat/ realisation for creating charts and 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-enabled 渲染器将图表渲染为图像，然后将该图像添加到您的 PDF。

选项 1：如果你想坚持使用无头渲染，除了 Javascript 延迟外，你可能还需要添加一个 --no-stop-slow-scripts 选项（也可以查看 Puppeteer，替代渲染器）。

选项 2：使用将图表呈现为图像或 PDF 的服务。 QuickChart 是一项执行此操作的 open-source 网络服务（我是其维护者之一）。

例如，拿你的 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，请将 &format=pdf 添加到 URL，该服务将直接生成图表的 PDF : example PDF

请注意，如有必要，您可以 self-host 图表呈现 Web 服务。

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

How to generate chartjs charts to pdf using laravel?

javascript

pdf

wkhtmltopdf

laravel

chart.js