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

本文介绍了从 HTML 生成的 PDF 的第一页删除标题 - CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

I have written following CSS to display Header and Footer on my each page of PDF

I want to remove Header from my First Page of PDF
Also I want to increase height of my Footer, so my entire footer text will fit into it.

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

解决方案

1.To remove Header from first page use following code on above the @page{}

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

2.To increase the footer size if you want to bring the footer upwards just use

Sample code:

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

这篇关于从 HTML 生成的 PDF 的第一页删除标题 - CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！