Why in pdf file generated with spatie/browsershot no header and last line of any page is cut off?

[sergeynilov]

Hello,

In Laravel 8 app I make pdf file with browsershot and it mostly works ok for me, except
case my data contains several pages, I have 2 problems :

1. I do not see header which I define with footer (code below) : https://imgur.com/a/2bkn3aD

2. I see last line of any page is cut off : https://imgur.com/a/cKpv7yR

I do it with code passing into control html content and generated filename:

        $filename_to_save = $option_output_filename . '.' . $option_output_file_format;
        $save_to_file     = 'generate_profile_card_' . Session::getId() . '_' . $filename_to_save;

        $today_date = getCFFormattedDate(Carbon::now(config('app.timezone')));
        $site_name  = config('app.name', '');

        $footerHtml = '<div class="card-text d1" style="background-color: #ffffff !important; width: 100%; margin : 0 !important;">
            <table style="width: 100%; font-family: \'system-ui\'; font-size: 12px !important; padding : 20px 0 0 0 !important; margin: 0 !important;
                color:#101010 !important; ;" >

                <tbody>';
        $footerHtml .= '
                <tr>
                    <td style="width:100%; border:0; border-top: 8px solid #c1c1c1; padding: 0; WWmargin: 21px 32px 2px 32px !important;" colspan="3">
                        <table style="width:100%;  ">
                            <tr>
                                <td style="width:30%;" class="d-2">
                                    Printed on: ' . $today_date . '
                                </td>
                                <td style="width:30%; " >
                                    <span class="pageNumber"></span><span>out of</span><span class="totalPages"></span>
                                </td>
                                <td style="width:40%;" >
                                    ' . $site_name . '
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
';

        $footerHtml .= '            </tbody></table>
        </div>';

        if (strtolower($option_output_file_format) == 'pdf') {
            Browsershot::html(htmlspecialchars_decode($this->requestData['adCardContent']))
                       ->showBrowserHeaderAndFooter()
                       ->headerHtml('<div style="height:280px !important; background : maroon !important; ">Ad Card</div>')
                       ->footerHtml($footerHtml)
                       ->showBackground()
                       ->margins(20, 10, 20, 10)
                       ->setOption(
                           'addStyleTag', // I inject some tailwindcss classes
                           json_encode([
                               'content' => '

.d1 {
    --tw-border-opacity: 1;
    border-color: rgba(220, 38, 38, var(--tw-border-opacity));
    border-width: 2px;
}

.d2 {
    --tw-border-opacity: 1;
    border-color: rgba(245, 158, 11, var(--tw-border-opacity));
    border-width: 4px;
}



    h3 {
       font-size: 32px;
       padding:4px;
    }
    h4 {
       font-size: 24px;
        padding:3px;
    }

.md:h-4/6 {
    height: 66.666667%;
}

.sm:h-4/5 {
    height: 80%;
}

.text-left {
    text-align: left;
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.p-2 {
    padding: 0.5rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

.max-h-screen {
    max-height: 100vh;
}
.justify-between {
    justify-content: space-between;
}

.card-text {
    background : maroon !important;
    border: 4px dotted red !important;
}

.pageNumber {
    background : yellow !important;
}

.totalPages {
    background : blue !important;
}

.flex-col {
    flex-direction: column;
}
.flex {
    display: flex;
}

.modal_container {
    color: green !important;
    border-radius: 0.5rem;
    border-width: 2px;
    padding: 0.5rem;
    border: 4px dotted blue !important;
}


.overflow-y-auto {
    overflow-y: auto;
    border: 4px dotted green !important;
}


.float-left {
    float: left;
}

.big_badge {
    border-color: rgba(209, 213, 219, var(--tw-border-opacity));
    border-radius: 0.5rem;
    border-bottom-width: 2px;
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    margin: 0.5rem;
    padding: 0.75rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.pt-3 {
    padding-top: 0.75rem;
}'
                           ])
                       )
                       ->save($save_to_file);
            \Response::download(
                $save_to_file,
                $save_to_file,
                array('Content-Type: application/octet-stream', 'Content-Length: ' . $option_output_file_format)
            );

            return response()->download($save_to_file, $filename_to_save)->deleteFileAfterSend(true);

in composer.json :

        "laravel/framework": "^8.12",
        "spatie/browsershot": "^3.40",

```How can it be fixed ?

Thanks!

[sergeynilov]

I still have these problems with pdf generating :
I uploaded example on live server.
Please open
http://tads-back.my-demo-apps.tk/admin/ads/2/edit
at login page credentials are already filled. Just click Login
By the link above modal page will be opened and please click on “Generate" button.
By default pdf file will be generated with problem I show in printscreens of my topic.
I used this library with bootstrap 4.5 and did not have such problems.
Also in the description of https://github.com/spatie/browsershot I did not see any errors description
with page footer.

I my code I show how I set tailwind classes in
->setOption('addStyleTag'
...

Maybe tailwind has some rendering features which I missed?

Thanks!