从HTML生成的PDF-CSS的首页删除标题

Question

我编写了以下CSS，以在我的PDF的每页上显示Header和Footer

1. 我想从我的PDF第一页中删除页眉

2. 另外，我想增加页脚的高度，以便整个页脚文字都适合其中。

<style>
    @page {
        @top-center {
        content: element(header,first-except);}
        @bottom-left {content: element(footer);}
    }
    div.header {
    padding: 10px;
    position: running(header);
    }
    div.footer {
        display: block;
        padding: 0px;
        position: running(footer);
        font-size:10px;
        size: 15.5in 10.2in;
    }
    .pagenumber:before { content: counter(page); }
    .pagecount:before { content: counter(pages);  }
</style>
.............
.............
<div align="left" class="header">
    <h3 id="heading"> Pension Scheme Account Opening Request (continued)</h3>
</div>

<div class="footer">    
    <div align="right">Page <span class="pagenumber"/> of <span class="pagecount"/></div>
    <div> MY FOOTER TEXT   </div>
</div>

Answer 1

要删除第一页上的标题，请按照此页面上的说明https://www.sundoginteractive.com/blog/different-headers-and-footers-by-page-in-pdf-salesforce 。

基本上，您会创建一个空标题，例如： <div class="header"><div></div></div> ，另一个具有page-break-before：always类的<div style="page-break-before:always"></div> ： <div style="page-break-before:always"></div> ，以便强制分页，告诉浏览器为此页面查找具有所需CSS类的新DIV，最后是内容为<div class="header"><div>My header content</div></div>

要增加页脚，可以向页面元素添加页边距，例如：

@page {
        @top-center {
        content: element(header,first-except);}
        @bottom-left {content: element(footer);}
        margin-top: 200px;
}

Answer 2

1.要从首页删除页眉，请使用@page {}上方的以下代码

@page:first {
  @top-left {
  content: normal;
  }

2.要增加页脚大小，如果要向上抬起页脚，请使用

底边距：10mm;

样例代码：

@page {
     margin-bottom: 35mm;  
      @bottom-center { 
        content: element(footer);
             }    }