时间戳

首页 > 解决方案 > 如何使用laravel将chartjs图表生成为pdf？

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

问题描述

我需要生成包含 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

标签： javascriptlaravelpdfchart.jswkhtmltopdf

解决方案

您最好的选择可能是使用支持 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);

然后将生成的 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：示例 PDF

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

推荐阅读