Sticking custom footer on each page to bottom while printing

后端 未结 4 1073
囚心锁ツ
囚心锁ツ 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: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;
            }
    
        }
    

提交回复
热议问题