发表新帖
发表新帖

Sticking custom footer on each page to bottom while printing

后端 未结
关注
4 1062
囚心锁ツ
囚心锁ツ 2020-12-14 10:56

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

<...>





            


        

                      

              相关标签:
4条回答
  • 我在风中等你
    2020-12-14 11:08

    Finally found an answer:

    1. html,body MUST HAVE height: 100%;
    2. There should be two types of div: outside (size of page), footer
    3. For both set display: block;
    4. For the outside set height: 100%; position: relative;
    5. For the inside set position: absolute; bottom: 0px;

    Voila!

    Here is my complete code:

    <!DOCTYPE HTML>
<html lang="en-US">
<head>
    <style>
        html,body
        {
            height: 100%;
            margin: 0px;
        }
        body > div
        {
            height: 100%;
            display: block;
            position: relative;
        }
        body > div > div
        {
            position: absolute;
            bottom: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div>
        Page1
        <div>Page1Footer</div>
    </div>
    <div>
        Page2
        <div>Page2Footer</div>
    </div>
    <div>
        Page3
        <div>Page3Footer</div>
    </div>
</body>
</html>
    0 讨论(0)
  • 夕颜
    2020-12-14 11:16

    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;
        }

    }
    0 讨论(0)
  • 予麋鹿
    2020-12-14 11:18

    If you use the and elements for your header and footer

    thead   {display: table-header-group;   }

tfoot   {display: table-footer-group;   }

    Source: http://www.codeproject.com/Questions/247645/Print-html-table-into-A4-size

    0 讨论(0)
  • 广开言路
    2020-12-14 11:28

    Update I played around a little bit with the code above and this may work easier than what I initially thought. (Note, there is potential for the footer to overlap content from the previous div, this could be resolved by adding a margin-bottom attribute to the content div equal to your custom footers set height - Also, if your page content is too long between page breaks, this will still have a couple scenarios that need attending). All that said, I tested locally and it worked as you desired.

    CSS

    <style>
@media print{
    .footer{
       position:relative;
       top:-20px; // this sets the footer -20px from the top of the next 
                  //header/page ... 20px above the bottom of target page
                  //so make sure it is more negative than your footer's height.

       height:10px;//notice that the top position subtracts 
                   //more than the assigned height of the footer
    }
}
</style>

    HTML

    <body>
   <div style="page-break-after: always">
      <div>This should be on top1</div>
   </div>
   <div style="page-break-after: always">
      <div class="footer">This should be on bottom of page1</div>
      <div>This should be on top2</div>
   </div>
   <div class="footer">This should be on bottom of page2</div>
</body>

    Original Answer

    Unfortunately there is no easy way to do this. Browsers do not offer a means of creating custom headers and footers for printing.

    Your best bet is to place information you want on every page in the title tag found in the <head><title>YOUR COMMON CONTENT</title></head> It's not going to be the prettiest. It comes down to your requirements.

    The other option is to use @media print (CSS) coupled with javascript to dynamically calculate and insert page breaks/gaps of white-space while inserting divs(your custom footer and or header) at absolute positions for the known paper size. Then after the print event dynamically change the format back.

    0 讨论(0)
 看不清?
提交回复
热议问题