如何使用Laravel将Chart.js图表生成为PDF?

罗曼·库琴科(Roman Kutenko)

我需要生成包括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视图

生成pdf

ty。

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

选项1:如果您希望坚持使用无头渲染,则--no-stop-slow-scripts除了Javascript延迟之外,您可能还需要添加一个选项(也可以签出替代渲染器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);

然后将生成的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的情况下呈现您的图表。

如果您想要一种更简单的方法,并且可以只显示图表,则可以添加&format=pdf到URL,该服务将直接生成图表的PDF:

请注意,如有必要,您可以自托管图表呈现Web服务。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章