Sticking custom footer on each page to bottom while printing

Question

I want to print 30 pages with some data on top and some data on bottom. My code looks like:

<...>




            


        
      

Answer 1

This works for me

Just add following css in your html file

@page {

        margin-bottom: 40px;
        counter-increment: page;

        @bottom-right {
            border-top: 1px solid #000000;
            padding-right:20px;
            font-size: 12px !important;
            content: "Page " counter(page) " of " counter(pages);
        }
        @bottom-left {
            content: "Footer content goes here.";
            border-top: 1px solid #000000;
        }

    }