Issue: Headers and footers

[jackpipergit]

Running in to some issues getting the header & footers to work, sorry!

Any idea?

Route::get('/testinvoice', function () {

    $invoice = OINV::with(['items','addresses'])->where('DocEntry', 336130)->firstOrFail();

    return Pdf::view('templates.sales.invoice', ['invoice' => $invoice])
        ->headerView('templates.parts.header')
        ->footerView('templates.parts.footer')
        ->format('A4');
});

header blade:

<div class="bg-white py-4 px-6">
    <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="flex items-center mb-4 md:mb-0">
            <div class="text-3xl font-bold">placeholder</div>
            <div class="text-xl font-light ml-2">placeholder</div>
        </div>
        <div class="text-sm">
            <div>placeholder</div>
            <div>placeholder</div>
            <div class="flex items-center mt-2">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2M9 12h3m10 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                <span>000000</span>
            </div>
            <div class="flex items-center mt-2">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 2a2 2 0 011.884 2.993L17.5 5H21a2 2 0 012 2v11a2 2 0 01-2 2h-3.5l-.384 1.007A2 2 0 0116 22H8a2 2 0 01-1.994-1.783L6 20H2.5l-.384-1.007A2 2 0 010 17V6a2 2 0 012-2h3.5l.384-1.007A2 2 0 016 2h10zm-1 4H9v4h6V6z"></path></svg>
                <span>[email protected]</span>
            </div>
        </div>
    </div>
    <div class="border-t border-gray-200 mt-4"></div>
</div>

[jackpipergit]

I've managed to get the header to display, but its formatting/styling is completely off – also, it's massively scaled down.

[jackpipergit]

@freekmurze Sorry to tag, need this for an internal project going live end of Jan, any ideas what this issue could be?

[ArielMejiaDev]

Hi @jackpipergit definitely I am not Freek, but I like a lot this package and already play a lot with it so here is what I think is happening to you:

1. Puppeteer loads html differently for header and footer than for the content (different processes), so your header and footer are not able to work with tailwindcss, but your content is able.
2. You can still add styles for header and footer, just take in mind that it would require its own style tag for every blade component or style="" attribute if you are using headerHtml() of footerHtml()
3. You can use header and footer as blade components, but in my experience, it works only if you place your components inside a component directory as any other blade component, eg: instead of templates.parts.header an appropriate place for this component could be in resources/views directory then components/templates.parts.header.blade.php

Please try to apply this changes and comment here, I would be glad to help

[jackpipergit]

Hi @ArielMejiaDev,

I appreciate the response. I've followed your steps but am still encountering the same issue: no header is being rendered. The project is new and is running Webpack – could this be a contributing factor?

I've even tried someone else's implementation of a successful header for Puppeteer using headerHtml(), but no luck. It's a shame the documentation doesn't state that Tailwind isn't supported with the header and footer, as it was one of the reasons I switched, especially since it states Tailwind is supported on the intro page.

Has anyone managed to use the header and footer successfully yet?

Belows my last test which someone confirmed was working for Puppeteer, but not for this package.

Route::get('/testinvoice', function () {

    $invoice = OINV::with(['items', 'addresses'])->where('DocEntry', 336014)->firstOrFail();

    return Pdf::view('templates.sales.invoice', ['invoice' => $invoice])
        ->headerHtml('<div style="display: inline-block; width: 75%; margin: 0 2cm">
    <img style="width: 215px;" src="https://placeholder.co.uk/media/logo/logo.png" width="215"  />
    <div style="float: right; font-size: 7pt; text-align: right;">Testing 123</div>
</div>')
        ->format('A4');
});```

[ArielMejiaDev]

I had the same issue, I add font-size and it fix the issue, you can use headerHtml() and headerView() without issues, but headers and footers needs font-size to be able to see them.

Try with this basic header and footer that should work:

$header = '<div style="font-size: 10px; margin: 0 auto 0 50px">Header...</div>';
$footer = '<div style="font-size: 8px; margin: 0 auto">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>';

return Pdf::view('templates.sales.invoice', ['invoice' => $invoice])
        ->headerHtml($header)
       ->footerHtml($footer)
        ->format('A4');

If it works then you can create a blade component and use headerView and footerView to make a cleaner code.

The directives from the docs, works en header and footer in both cases, tailwindcss code works, but only in the pdf content, in your case in templates.sales.invoice, this is something not related to the package, is the way puppeteer works behind the scenes as it scraps the url content.

I think it should work, and your code should work too, just add font-size this is the only attribute that is required to be able to see the header/footer.

[jackpipergit]

Hi @ArielMejiaDev,

Thank you once again for the follow-up. I've just gone through your steps and it's working now.

Is there a resource for the styling available online, or is it just straightforward CSS 2.1 for the header+footer? It's just that the background color doesn't seem to work while applying it through a style="".

Thanks again for breaking it down for me!

[jackpipergit]

Sorted the background issue

<style>html { -webkit-print-color-adjust: exact; margin-top: -20px; }</style>

[ArielMejiaDev]

Sorted the background issue

<style>html { -webkit-print-color-adjust: exact; margin-top: -20px; }</style>

@jackpipergit nice! As far as I know all the modern css works, background could be transparent o add some background color, using custom browsershot has a method to set this