Hi,

I'm trying to achieve list printing in my project. There will be at least two printing ways for now: html printing on browser and pdf download. The browser printing is working fine.

In the browser, I print a Table and then, before calling window.print(), I perform some changes in the generated table DOM with Javascript. It also works fine. The code:

    <?php 
        Table::create([...]);
    ?>
    <script id="header-template" type="text/html">
        <tr>
            <th colspan="<?php echo $headerColspan; ?>"><?php echo $model->headerTitle; ?></tr>
        </tr>
        <tr>
            <th colspan="<?php echo $headerColspan; ?>">
                <div class="w-20 text-right float-right"><?php echo date('d/m/Y'); ?></div>
                <div class="w-80 text-left"><?php echo $model->headerSubtitle; ?></div>
            </tr>
        </tr>
    </script>
    <script id="footer-template" type="text/html">
        <tfoot>
            <tr>
                <th colspan="<?php echo $headerColspan; ?>">
                    <div class="w-50 text-right float-right">www.my-page.com.br</div>
                    <div class="w-50 text-left">(<?php echo $model->code; ?>)</div>
                </tr>
            </tr>
        </tfoot>
    </script>
    <script>
        let headerContent = document.querySelector("#header-template").innerHTML,
            footerContent = document.querySelector("#footer-template").innerHTML,
            thead = document.querySelector("table.table thead"),
            theadHtml = thead.innerHTML;

        thead.innerHTML = headerContent + theadHtml;
        thead.querySelectorAll('th').forEach(th => th.className = 'border-0');

        document.querySelector("table.table").innerHTML+= footerContent;

        window.print();
    </script>

This is because I can't find how to cusomize the table at that level. As I need the header and footer to to repeat on each page, I have to do that. The footerText of the column wouldn't work for me, as the footer here is not just an aggregate or sum.

(If there is another way to do that, please let me know. Could not find anything like that in the docs.)

Anyway, the real problem is that in the PDF printing, I have to reproduce the same result, but I realized that phantomjs CLI doesn't execute JavaScript(source here, correct me if I'm wrong), so the resultant PDF doesn't shows header and footer like in html page.

Any advice on how to achieve or workaround this ?

Hi David.

I will check it out, but, there is no way that I can customize the Table result? No need to be JavaScript, if I can change the header/footer even in PHP would be great.

Hi David.

I missed that last resource! I think it is what I need!

Thank you so much!

David,

The only thing I noticed is it seems that inside <div class='page-header'> and <div class='page-footer'>, bootstrap classes are not working. Strange because the table itself is respecting bootstrap's styles. There is anything different on render process of those two divs ?

Hi David,

You mean by adding a style attribute to element? That works, just tested here. But if you mean to copy some bootstrap styles into style attribute, I don't think it is a good practice, even knowing it would work. If you have another way to set the bootstrap's styles to those elements, I would like to know.

Thank you.

Hi David.

Well, it seems that no html inside page-header and page-footer elements respects styles defined in the page, with <style type="text/css"> tag. Not even a simple definition like:

.font {
    color: #f00;
}

So I ended up adding style directly to the elements and it got styled.

Also, FWIW, you have to add style="height: 80px" or any amount in order to display more than a line in the header/footer. It doesn't fits the content automatically.