本文介绍了一种在现代浏览器如Chrome、Firefox和Safari中从HTML创建PDF的方法，并确保每页都有固定的页眉和页脚，同时避免了与页面内容重叠的问题。通过使用特定的CSS样式和HTML结构，可以实现连续的页码显示。
我花了很多时间使它可以在现代的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
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
