CSS实现自动分页打印同时每页保留重复的自定义内容

原创

已于 2023-03-24 09:04:41 修改 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

于 2023-03-24 08:58:56 首次发布

通过CSS的@mediaprint规则，可以定制打印时的页面样式，包括页边距、表格布局和页眉页脚。示例代码展示如何创建一个包含标题、数据表和页脚的打印页面，确保每页都有自定义的header和footer，且数据在分页时不被破坏。

当需要打印的内容过长时系统会产生自动分割页面，造成样式不太美观。使用CSS的 @media print 结合 <table> 可以实现对分页样式的可控。效果如下：

假设有50条数据，打印时系统会自动分成两页，同时每页保留自定义的header和footer。

第一页
第二页

代码如下：

<html>
<head>
  <title>print</title>
  <style>
    /* 在打印时应用此规则 */
    @media print {
     
     
      @page {
     
     
        /* 文档的页面大小 */
        size: A4;
        /* 文档的页边距 */
        margin: 10mm 20mm 20mm;
      }

      table {
     
     
        width: 100%;
        border-collapse: collapse;
      }

      tbody tr td {
     
     
        padding-left: 5px;
        border: 1px solid #000;
        word-break: keep-all;
        font-size: .9rem;
      }

      .header-row th {
     
     
        border: 1px solid #000;
      }

      .title {
     
     
        margin: 0 0 20px;

最低0.47元/天解锁文章