html中页眉的创建,pdf-使用CSS创建页面页眉和页脚以进行打印

我花了很多时间使它可以在现代的Chrome，Firefox和Safari上运行。 我用它从HTML创建PDF。 您将在每个页面上固定页眉和页脚，而不会重叠页面内容。 试试吧：

的CSS

@page {

margin: 10mm;

}

body {

font: 9pt sans-serif;

line-height: 1.3;

/* Avoid fixed header and footer to overlap page content */

margin-top: 100px;

margin-bottom: 50px;

}

#header {

position: fixed;

top: 0;

width: 100%;

height: 100px;

/* For testing */

background: yellow;

opacity: 0.5;

}

#footer {

position: fixed;

bottom: 0;

width: 100%;

height: 50px;

font-size: 6pt;

color: #777;

/* For testing */

background: red;

opacity: 0.5;

}

/* Print progressive page numbers */

.page-number:before {

/* counter-increment: page; */

content: "Pagina " counter(page);

}

的HTML

Header

footer

Here your long long content...

This text will not be broken between the pages