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