Laravel PDF Magic: From Dynamic Views to Beautiful PDFs with Spatie Browsershot

[@inamrasluzd6524]

OMG this is what I have been looking for! Thanks for posting.

[@glennraya]

You're welcome, In a couple of minutes I'll be posting a new video about advanced searching with Laravel Scout (Meilisearch).

[@junjungaming855]

ang galing niyo po

[@glennraya]

ahaha, salamat 😀

[@DimpyIOS]

Could you please provide me with the settings.json file that looks fabulous?

[@glennraya]

Here's all my settings (github.com/glennraya/vscode-settings-json), you can install "Custom CSS and JS Loader" vscode extension, I made some mods to it since this video, you can refer to my latest video (kzbin.info/www/bejne/r2LFm2iud9Frd8k) on this channel to see how it looks.

[@wormy_coder]

It's pretty cool I guess I would try that Library. Another Cool Video. Please keep it up

[@glennraya]

@@wormy_coder thank you! 🙏

[@yoelyanesdoynga7795]

Is it necessary to store PDF files on the server? Can we use something like stream() in dompdf so that the PDF files don't need to be stored?

[@glennraya]

Hi, yes definitely. You can also directly download PDFs or open it in a new browser tab. You don't have to necessarily save it on the server.

[@StevenTohme]

Your vscode theme looks super dope! What'd you use to make it look like this?

[@glennraya]

I used the "Custom CSS and JS Loader" extension in order to customize some parts of the interface. You can define your styles in CSS to modify VSCode's UI.

[@thierrykonan1050]

hi, thanks for the package , Often, we want to stream the PDF ... you didn't mention that part

[@glennraya]

Correct, I should've streamed it. But anyway, this video is about generating PDFs. Next time I'll carefully consider things when making a video. Thanks.

[@thierrykonan1050]

@@glennraya thanks, 👌

[@sorinvacarescu8212]

I would really appreciate some help: I have tried this, installed puppeteer, installed the browsers for puppeteer (since I was initially getting errors from that part), pointed browsershot to the browser's path, set permissions for chrome, and I still get crashes with an error like Error Output: ================ Error: Failed to launch the browser process! Somehow nothing I tried fixed it. Also, for context, I'm running the thing containerized, on an php:8.2-fpm based image. Everything else so far has worked fine, pretty much out of the box. Many thanks in advance :)

[@glennraya]

I haven't tried this in a containerized environment, also have to admit, a bit complicated to setup in production, but it's doable. You can refer to Browsershot's Github discussion: github.com/spatie/browsershot/discussions/663.

[@rjcabarong]

Hello. Is there a way to hide the header on specific pages?

[@glennraya]

@@rjcabarong You can hide with css, however it might reflect on all pages. Try using nth-child in css to target specific pages.

[@rjcabarong]

@@glennraya Thanks. I already tried it using css with nth child. You're right, it reflects on all pages. Maybe I'll use mpdf instead.

[@glennraya]

@@rjcabarong You can consult the browsershot's docs maybe they have something like that. I haven't had a use case for that yet.

[@dark-time-programer3306]

very good explanation

[@glennraya]

Thank you!

[@itsmeka]

The page number is important in PDF documents. Is there any way to add page numbers, and repeat header and footer?

[@glennraya]

I believe page numbers can be added. Kindly consult Browsershot's docs for that. For headers and footers, you can try fixed positioning in CSS to make available on every page.

[@itsmeka]

@@glennraya I have checked their docs and found its possible. thank you very much :)

[@ronaldngarombo1026]

Hello, could you please show how we could set up this on a linux production server? A week ago I used this package and everything was perfect on local during development. But it was a nightmare when it came to using it in production unit I had to abandon it and use Dompdf instead.

[@glennraya]

I will consider it, make sure your production server meets the requirements for Browsershot by checking their documentation since not all servers are configured the same. You may also refer to puppeteer's docs: pptr.dev/troubleshooting#chrome-doesnt-launch-on-linux. And also Spatie's requirement guide: spatie.be/docs/browsershot/v4/requirements#content-custom-node-and-npm-binaries

[@yoskokleng3658]

how about laravel print automatic to printer witout pop up print screen in browser through javascript (window.print). i mean print it automatic from server side (silent print). please make this tutorial .

[@glennraya]

@@yoskokleng3658 I don't think that's possible on a web interface. Maybe some form of dirty hack would do.

[@miltonchowdhury4016]

wow..this looks awesome and very helpful..... If I want to add the page number of the bottom right, then how to add it, plz tell us, thanks once again...

[@glennraya]

You can add page numbers by enabling the header and footer of Browsershot: spatie.be/docs/browsershot/v4/usage/creating-pdfs

[@christiancolewan]

How do Spatie Browsershot and DomPDF compare in terms of efficiency and speed for generating PDFs?

[@glennraya]

I think DomPDF is faster than Browsershot because Browsershot uses puppeteer which is a node library, but IMO Browsershot can generate PDFs more accurately than DomPDF (and the API is easier too).

[@bolence79]

The header and footer are showing as not working as expected. I tried everything from documentation.

[@glennraya]

some people have tried to make a header/footer by making it a "fixed" container to make it available on all pages.

[@bolence79]

@@glennraya Thanks for the answer. I tried that too, but no luck.

[@benedettosciuto6924]

can Laravel PDF Magic repeat header and footer on every page?

[@glennraya]

Spatie's Browsershot package doesn't directly support including the header on every succeeding page, however, you may achieve the repeating header effect by experimenting with custom CSS, like setting the header with a fixed positioning so it "could" appear on every page.

[@jimmyarb7767]

Sir Glenn i found difficulty in production there is an error in node any advice to fix it.

[@glennraya]

What node version are you using? Puppeteer requires node version 18 and up.

[@ronaldngarombo1026]

@@glennraya I personally was using node 22 but face the error @jimmyarb7767 is probably referring to. Issue was with node and puppeteer

[@SahilKumar-bt2pf]

I installed Browsershot, Puppetter exactly like you did but not working it's processing for few seconds then fails with errors.

[@glennraya]

It would be helpful if you can share the error.

[@videolocos413]

greetings good video I am having problems to show logo in the header ->headerHtml($headHtml), of the page when I call from the database the logo doesn't show me anything and neither from the public/img/logo.png folder.

[@glennraya]

You may need to also call the ->showBrowserHeaderAndFooter() method.

[@wuba6977]

Does it support all browsers?

[@glennraya]

Yes, it supports all modern browsers.

[@yoskokleng3658]

what's framework for css ? if i can think of the style of report design like u. my customer would love me 🤣😭

[@glennraya]

@@yoskokleng3658 I use tailwindcss for the css framework.

[@elrincondeisma]

Tailwindui library? I see a beatiful dashboard.

[@glennraya]

No, it's not tailwindUI. I made it myself, though it was inspired by the Arc browser UI, and the date range picker is from nextUI. Thanks

[@scherzer6428]

@@glennraya Can you make a video about the dashboard

[@glennraya]

​@@scherzer6428 I don't think making a video about the dashboard is going to bring much value to people haha. Thanks for the compliment. However, I will upload a new video tomorrow, creating advanced, Google like search engine for one's projects.

[@mon_codes]

thanks idol, u have my sub

[@nilanjanchakraborty2694]

theme name please?

[@glennraya]

Hi, which theme you're asking? VS Code's or the dashboard's?

[@nilanjanchakraborty2694]

@@glennraya vs code

[@glennraya]

@@nilanjanchakraborty2694 The theme itself is "Palenight", but my VS Code's UI is modified beyond what themes can give you, you can use "Custom CSS and JS Loader" extension to modify VS Code's UI extensively. After installing the plugin you can try my current settings: github.com/glennraya/vscode-settings-json

[@kaiserdianalan7059]

Huui nakikita kita sa programmer code posting

[@glennraya]

FB group po pa yun? haha

[@rondevPH]

hard to implement on windows

[@emmanuelsiziba5142]

I agree with you

[@glennraya]

@@rondevPH Really? I couldn't try it, I don't have a windows machine. 😅

[@rondevPH]

@@glennraya good for you. That is why dompdf is the only way😅

[@JavierHernandez-jg3wo]

I'm trying to get it to work with laragon on windows but I can't figure out how to get it to work.

[@glennraya]

@@rondevPH hmm, can't tell for sure, Browsershot docs doesn't mention any incompatibility with Windows.

[@ajmal7247]

Can you share the source code?

[@glennraya]

Yes sure, I'll push it to github and linked on the description.

[@glennraya]

github.com/glennraya/browsershot

[@ajmal7247]

@@glennraya i got the below error when i generate pdf in windows.I already have node installed in the system.How can i solve this The command "node "D:\wamp64\www\browsershot\vendor\spatie\browsershot\src/../bin/browser.cjs" "{""url"":""file:\/\/C:\\Users\\Ajmal\\AppData\\Local\\Temp\\896216291-0639441001719154368\\index.html"",""action"":""pdf"",""options"":{""path"":""D:\\wamp64\\www\\browsershot\\storage\\\/app\/reports\/example.pdf"",""args"":[],""viewport"":{""width"":800,""height"":600},""displayHeaderFooter"":false,""margin"":{""top"":""4mm"",""right"":""0mm"",""bottom"":""4mm"",""left"":""0mm""},""format"":""A4"",""printBackground"":true}}"" failed. Exit Code: 1(General error) Working directory: D:\wamp64\www\browsershot\public Output: ================ Error Output: ================ 'node' is not recognized as an internal or external command, operable program or batch file.

[@pembatamang5716]

Symfony \ Component\ Process \ Exception\ ProcessFailedException. the error occured. idk is this the window issue or what.

[@ssodoloufo]

I think this package only works for MacOs users, not Windows or Linux.