[英]Remove Header from First Page of HTML Generated PDF - CSS
I have written following CSS to display Header and Footer on my each page of PDF 我编写了以下CSS,以在我的PDF的每页上显示Header和Footer
I want to remove Header from my First Page of PDF 我想从我的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>
To remove the header on the first page follow the instructions on this page https://www.sundoginteractive.com/blog/different-headers-and-footers-by-page-in-pdf-salesforce . 要删除第一页上的标题,请按照此页面上的说明https://www.sundoginteractive.com/blog/different-headers-and-footers-by-page-in-pdf-salesforce 。
Basically you create an empty header like: <div class="header"><div></div></div>
, another div with the page-break-before:always class: <div style="page-break-before:always"></div>
in order to force a page break which tells the browser to look for a new DIV with the desired CSS class for this page, and finally the "real" header div with the content <div class="header"><div>My header content</div></div>
基本上,您会创建一个空标题,例如:
<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>
To increase the footer you can add margin to the page element, like: 要增加页脚,可以向页面元素添加页边距,例如:
@page {
@top-center {
content: element(header,first-except);}
@bottom-left {content: element(footer);}
margin-top: 200px;
}
1.To remove Header from first page use following code on above the @page{} 1.要从首页删除页眉,请使用@page {}上方的以下代码
@page:first {
@top-left {
content: normal;
}
2.To increase the footer size if you want to bring the footer upwards just use 2.要增加页脚大小,如果要向上抬起页脚,请使用
margin-bottom:10mm;
底边距:10mm;
Sample code: 样例代码:
@page {
margin-bottom: 35mm;
@bottom-center {
content: element(footer);
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.