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

Posted 2023-02-26

【中文标题】如何使用laravel将chartjs图表生成为pdf？

【英文标题】：How to generate chartjs charts to pdf using laravel?

【发布时间】：2020-10-04 21:38:47

【问题描述】：

我需要生成包含 chartjs 图表的 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

【问题讨论】：

我不确定任何 PDF 生成器都能处理 JS。我曾经用谷歌地图做同样的事情。我通过使用screenshot of the div with JS 进行欺骗，使用 ajax 将图像发送到服务器，使用该图像生成 PDF，然后在响应中发送 PDF。

创建某种截屏服务确实是最有可能成功的。请放心，这个问题是重复的，因为它基于一个常见的误解。

【参考方案1】：

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

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

选项 2：使用将图表呈现为图像或 PDF 的服务。 QuickChart 是一个开源的网络服务（我是它的维护者之一）。

例如，获取您的 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 图表呈现网络服务。