[Bug]: header, footer not showing

[hurycz]

What happened?

I can't see header and footer in my PDF.

Any idea? I can't find any solutions on internet...

How to reproduce the bug

My controller:

return Pdf::view('pdf.invoice', ['invoice' => $invoice])
                ->headerView('pdf.invoice.header')
                ->footerView('pdf.invoice.footer')
                ->format(Format::A4)
                ->name('invoice.pdf');

My pdf.invoice.blade.php

<style>
    {!! Vite::content('resources/css/invoice.css') !!}
</style>
<div>some pdf body</div>

My pdf.invoice.footer.blade.php

<style>
    footer {
        padding: 0.5rem;
        padding-top: 0.25rem;
    }

    footer div p {
        color: black;
        font-size: 16px;
    }

</style>

<footer>
    <div>
        <p>Page @pageNumber of @totalPages</p>
    </div>
</footer>

pdf.invoice.header is almost same...

PDF rendered OK, but header and footer is (maybe) under main content. I don't know. When i select all text, i see footer and header text.

Package Version

1.5.2

PHP Version

8.3

Laravel Version

11.20

Which operating systems does with happen with?

Windows, Linux

Notes

No response

[kevin-netsrik]

I have the same issue, header and footer not shown on the page.

[hurycz]

I found solutions (transparent background with margins) Documentation needs to be fixxed how to use header/footer.

return Pdf::view('pdf.invoice', ['invoice' => $invoice])
                ->withBrowsershot(function (Browsershot $browsershot) {
                    $browsershot->transparentBackground();
                })
                ->margins(14,0,14,0)
                ->headerView('pdf.invoice.header')
                ->footerView('pdf.invoice.footer')
                ->format(Format::A4)
                ->name('invoice.pdf')
                ->save(storage_path("invoice.pdf"));

[gabriellara181999]

tengo el mismo problema pero no me funciona

[ArielMejiaDev]

@SecurID @gabriellara181999 @hurycz @kevin-netsrik you should add a font-size in your header and footer components, with that you are going to be able to see the text there

[memiljamel]

@SecurID @gabriellara181999 @hurycz @kevin-netsrik you should add a font-size in your header and footer components, with that you are going to be able to see the text there

wow, awesome.

[stuartcusackie]

The problem for me was that the fonts were super small. Solution:

• My css file is not included in the footer view. I don't think it's possible. Must use inline styles.
• rem units are super small (tailwind)
• The footer view doesn't load my custom fonts.

When I updated everything to inline styles and used pixel units then everything worked.

Can't get custom fonts working in the footer though. Anybody figure that out?

[edstevo]

@stuartcusackie - did you ever find a solution for custom fonts in the footer? Thank you

[stuartcusackie]

@stuartcusackie - did you ever find a solution for custom fonts in the footer? Thank you

@edstevo Afraid not!

[aymanalhattami]

To add custom font, convert it to base64 like code below

<style>
    @font-face {
        font-family: 'Noto Kufi Arabic';
        src: url('data:font/truetype;charset=utf-8;base64,{{ base64_encode(file_get_contents(public_path('fonts/NotoKufiArabic/NotoKufiArabic-Medium.ttf'))) }}') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    * {
        font-family: 'Noto Kufi Arabic', 'Arial', sans-serif !important;
    }
    body {
        font-family: 'Noto Kufi Arabic', 'Arial', sans-serif;
    }
</style>