HTML+CSS 实现简单打印分页

代码：

<!DOCTYPE html>  
<html>  
<head>  
  <title>分页打印示例</title>  
  <style>  
    /* 打印样式 */  
    @media print {  
      .page {  
        page-break-after: always; /* 每个.page元素后都分页 */  
      }
    }  
  </style>  
</head>  
<body>  
  <div class="page">
    <h1>第一页</h1>  
    <p>这是第一页的内容...</p>  
  </div>  
  <div class="page">  
    <h1>第二页</h1>  
    <p>这是第二页的内容...</p>  
  </div>  
  <div class="page">  
    <h1>第三页</h1>  
    <p>这是第三页的内容...</p>  
  </div>  
  
  <button onclick="window.print()">打印</button>  
</body>  
</html>

在上述代码中，.page-break 类被用来在每个需要分页的地方添加分页指令。在打印模式下（即使用浏览器的打印功能时），@media print 样式会被应用，它将在每个.page-break元素之后以及最后一个.page-break元素之后添加实际的分页

效果图：

posted @ 2024-03-06 23:10  vanjn  阅读(460)  评论(0)  编辑  收藏  举报