Css打印内容的分页符

Css print - page break on content

本文关键字：分页 打印 Css      更新时间：2023-09-26

我有一个网页，它将内容打印在预先打印的收据模板上。我面临的问题是，模板每页有三个部分。带有票据编号、客户名称等的标题部分。。以表格行格式填充的内容部分。此部分是动态的，无法预测行数和高度。页脚部分包含金额等的总和。

我希望页眉只在第一页，页脚只在最后一页的底部。动态中间部分应该分解并分布在多个页面中，这取决于内容。中间页的页眉和页脚部分应在其各自的空间中保持为空。

有人能帮我用html5和css3制作这个结构吗。

你好，这是我的解决方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<style>
// does not show the div other than print
@media all {
  .page-break   { display: none; }
}
//make it break the page
@media print {
  .page-break   { display: block; page-break-before: always; }
  #content{
    color:blue;
  }
}
</style>
<header>
  <h1>HEADER</h1>
</header>
<div class="page-break"></div>
<section id="content">
  <h1>CONTENT</h1>
</section>
<div class="page-break"></div>
<footer>
  <h1>FOTTER</h1>
</footer>
</body>
</html>

希望它能有所帮助，这里有一个链接

相关文章：