KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.

Customize Table result #1168

Closed Peter Harari opened this topic on on Nov 19 - 8 comments

Peter Harari commented on Nov 19

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 ?

David Winterburn commented on Nov 21

Hi Peter,

Phantomjs does support executing javascript in your page but if you want to export to pdf with repeated header, footer of your tables, I think only Chrome and Chrome headless support it. For that purpose you could try our cloud export:

https://www.koolreport.com/packages/cloudexport

Let us know if we understand you correctly. Thanks!

Peter Harari commented on Nov 21

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.

David Winterburn commented on Nov 21

Hi Peter,

Did you intend to use the table's header and footer as your pdf's header and footer? In that case, you could check export's and cloud export's header and footer options:

https://www.koolreport.com/docs/cloudexport/chromeheadlessio/#export-options-pdf-options-in-view-file-for-both-headless-chrome-and-wkhtmltopdf-engines-header-and-footer

https://www.koolreport.com/docs/export/get_started/#export-to-pdf-header-and-footer-of-the-page

Let us know if there's any limitation you have with these options. Thanks!

Peter Harari commented on Nov 21

Hi David.

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

Thank you so much!

Peter Harari commented on Nov 21

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 ?

David Winterburn commented on Nov 22

Hi Peter,

If that's is the case, probably you could try to copy some of the Bootstrap css rules to the page header and footer directly to see if it works. Thanks!

Peter Harari commented on Nov 22

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.

Peter Harari commented on Nov 28

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.

KoolReport Is Free and Open-Source!

KoolReport is a professional php reporting framework which saves you tons of time to construct dynamic data report & dashboard.

  • Connect to various datasources such as MySQL, SQL Server, MongoDB or even from CSV or Excel file.
  • Contain series of powerful built-in data processes for your data manipulation.
  • Generate stunning charts and graphs to help you communicate data insights to your audiences effectively.
  • Integrate seamlessly with any php frameworks such as Laravel, CodeIgniter, Symfony.
Download Now and register our tutorials to get started!

Download KoolReport
help needed

Export