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

当需要打印的内容过长时系统会产生自动分割页面,造成样式不太美观。使用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;
        font-size: 1.5rem;
      }

      .footer-row {
        padding-top: 10px;
      }
    }
  </style>
</head>
<body>
    <table>
      <thead>
      <tr>
        <th colspan="3">
          <div class="title">标题1标题1</div>
        </th>
      </tr>
      <tr class="header-row">
        <th>First Name</th>
        <th>Last Name</th>
        <th>age</th>
      </tr>
    </thead>
    <tbody id="tbody"></tbody>
    <tfoot>
      <tr>
        <td colspan="1" class="footer-row">
          <div>打印人:小王</div>
        </td>
        <td colspan="2" class="footer-row">
          <div class="footer-time">打印时间:2000-01-01 00:00:00</div>
        </td>
      </tr>
    </tfoot>
  </table>
  
  <script>
    // mock
    const rowNum = 50;
    const fragment = document.createDocumentFragment();
    for (let i = 0; i < rowNum; i++) {
      const _tr = document.createElement('tr');
      const _td1 = document.createElement('td');
      const _td2 = document.createElement('td');
      const _td3 = document.createElement('td');
      _td1.appendChild(document.createTextNode(`John${i}`));
      _td2.appendChild(document.createTextNode(`Doe${i}`));
      _td3.appendChild(document.createTextNode(`${i}`));
      _tr.appendChild(_td1);
      _tr.appendChild(_td2);
      _tr.appendChild(_td3);
      fragment.appendChild(_tr);
    }
    document.querySelector('#tbody').appendChild(fragment);
  </script>
</body>
</html>

ctrl+p / command+p 唤起打印即可查看效果

注:不能使用 @page 规则修改所有的css属性,只能修改文档的 margin、orphans、windows 和分页符,对其他属性的修改无效。@page

11 声望
0 粉丝
0 条评论
推荐阅读
JavaScript 事件
事件流描述的是从页面接收事件的顺序。比如说单击了某个按钮,但是单击事件不仅发生在按钮上,在单击按钮的同时,也单击了按钮的容器元素,甚至是 \&lt;body\&gt; 、\&lt;html\&gt; 、Document。

yotcap阅读 375

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.5k评论 10

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco18阅读 2k评论 2

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan20阅读 1.5k评论 1

封面图
css常用技巧梳理
1、图片文字环绕shape-outside 是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域 {代码...} 2、:where() 简化代码 {代码...} 3、实现平滑滚动 {代码...} 4、背景混合模式 {代码...} 5、图像填充文字...

墨城20阅读 1.1k评论 2

那些不用js也能实现的效果
本文首发于公众号:GitWeb,欢迎关注,接收首发推文本文列举几个不需要使用js也能实现的效果一、页面回到顶部回到顶部是页面开发中很常见的一个功能,一般的做法是对回到顶部组件做一个监听,当用户点击的时候,...

Winn11阅读 1.1k评论 4

封面图
Three.js 进阶之旅:全景漫游-初阶移动相机版
3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的,当然了目前已经有很多...

dragonir12阅读 1.4k

封面图
11 声望
0 粉丝
宣传栏