Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

vincent15000's avatar

Spatie BrowserShot

Hello,

I have an HTML page with a some classic HTML, a ChartJS (via consoletvs/charts) in a Livewire blade view.

I export the PDF with this code.

Browsershot::html($html)->landscape()->save('activities.pdf');

The result is pretty good except for the graphic (a bar) for which the bars don't have the good height (but I have pass the right values for the graphic).

What could be the problem ?

Thanks for your answer.

V

0 likes
6 replies
LaryAI's avatar
Level 58

The issue might be related to the fact that the chart is being rendered using JavaScript, which Browsershot might not be able to handle properly. One solution could be to use a headless browser like Puppeteer instead of Browsershot. Here's an example code snippet using Puppeteer:

use Spatie\Browsershot\Browsershot;
use Nesk\Puphpeteer\Puppeteer;

$puppeteer = new Puppeteer;
$browser = $puppeteer->launch();
$page = $browser->newPage();
$page->setContent($html);
$page->pdf(['path' => 'activities.pdf', 'landscape' => true]);
$browser->close();

This code uses Puppeteer to launch a headless browser, navigate to the HTML page, and generate a PDF with the chart properly rendered. Note that you'll need to install the nesk/puphpeteer package in addition to spatie/browsershot.

1 like
vincent15000's avatar

Nesk\Puphpeteer\Puppeteer doesn't work with Laravel 10. There are some incompatibilities with the packages.

Furthermore BrowserShot uses Puppeteer under the hood.

Lara_Love's avatar

Hello @vincent15000 dear friend, can you show a picture of what the original picture is like and what is created on the site?

1 like
joseraul's avatar
joseraul
Best Answer
Level 1

I'm answering myself, is the animation, this is why the bars do not have the correct height when taking the snapshot. Adding a animation: false, to the chartjs options, fixed my issue. Cheers

1 like

Please or to participate in this conversation.