CSS in headerHtml not working

[schmidfelix]

I'm trying to set a custom header and footer in my PDF generation, but the TailwindCSS classes don't get applied.

Code used to generate the pdf:

Browsershot::html(view('body', [
            'data' => $data,
        ])->render())
            ->showBackground()
            ->format('A4')
            ->emulateMedia("screen")
            ->showBrowserHeaderAndFooter()
            ->headerHtml(view('header')->render())
            ->margins(50,0, 0, 0)
            ->savePdf(public_path('invoice.pdf'));

My header html file:

<div class="font-sans text-gray-900 antialiased">
    <div class="bg-blue-600 py-3 px-20 flex w-100 justify-between items-center">
        <h2 class="text-2xl text-white">Title</h2>
        <h3 class="text-md text-gray-200 uppercase">Text</h3>
    </div>
</div>

It adds the text "Title" and "Text", but very small and without the blue background:

When I try to add my stylesheet via a html->head->link tag, I't always times out.
And when adding my header html code to my pdf "body/content" view everything works fine.

How can I fix it? Have i missed something in the documentation?

[ahoiroman]

Got the same issue and still no solution.

If you paste raw css to your header-blade-stuff, this will render as expected.

But:

• At the moment is it not possible to add something like <link href="{{ asset(mix('/css/app.css')) }}" rel="stylesheet"> to the header's blade-file, as it is going to timeout
• You even can not grab the css and paste between style-tags, because you are going to receive escapeshellarg(): Argument exceeds the allowed length of 2097152 bytes

[henryavila]

The solution I found to solve this is to change the local host files to resolve the web url to localhost. This way it will not exit to internet and will load the css locally

[schmidfelix]

Why got this moved to discussions? In my option it's a bug and no question to the community?

[Mesuva]

I agree, this still feels like a bug in 2023. I'm hitting it now with a fresh setup with version 3.58, and puppeteer 21.1.1

If I use showBrowserHeaderAndFooter(), but don't set any headers and footers, it outputs a pretty normal sized set of details, ones you'd normally see when printing. I'm using a very basic (but complete) HTML page. I've tried with and without linking an external stylesheet.

But setting something simple like ->footerHtml('<p>Page 1 of 3</p>'), results in very tiny text.

I simply can't work out how to target this text, as classes, inline styles or CSS rules on the body appear to have no effect.

[ghost]

Anyone been able to find a fix for this issue? Also experiencing this :/

[ahoiroman]

I ended up using a full-height main-body that fixes heading and footer to the top and bottom of the page using css.

[Edofre]

@ahoiroman would you mind sharing an example of how you managed to do this?

[ahoiroman]

I basically followed https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a :-)

[Edofre]

Thanks, I'll give that a try!

[gjm]

I've recently been bitten by this issue and also haven't found a solution. The workaround pointed by @ahoiroman doesn't allow printing page number, dates, etc. because those dynamic fields are only available on headers and footers.

[medilies]

You need to merge the CSS content inside the header and footer content using a style tag.

[MatthewHolmes]

@medilies Could you possibly post an example of what you mean?

[medilies]

@MatthewHolmes

$style = "<style>$css</style>";

Browsershot::html($style.$html)
            // ...
            ->headerHtml($style.$headerHtml)
            ->savePdf(public_path('invoice.pdf'));

$style can be a style tag with the path to compiled tailwind or tailwind CDN

[MatthewHolmes]

Thanks @medilies !

[medilies]

@MatthewHolmes happy to help. I hope you tried it and it worked.

[mrm]

In case your command gets too big (you get a proc_open(): posix_spawn() failed: Argument list too long error if you base64 encode images for example), you can use writeOptionsToFile() to ensure the command does not overflow the command line as it will use a temporary file to pass the options.