当前位置： 首页 > news >正文

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

news 2025/12/22 6:54:02

当需要打印的内容过长时系统会产生自动分割页面，造成样式不太美观。使用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>// mockconst 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

相关文章：

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

当需要打印的内容过长时系统会产生自动分割页面&#xff0c;造成样式不太美观。使用CSS的 media print 结合 <table> 可以实现对分页样式的可控。效果如下&#xff1a; 假设有50条数据&#xff0c;打印时系统会自动分成两页&#xff0c;同时每页保留自定义的header和foo…...

编程日记 2023/5/29 7:57:05

基于prometheus的监控告警怎么实现？

基于 Prometheus 的监控告警实现一般需要以下几个步骤&#xff1a; 安装和配置 Prometheus&#xff1a;安装 Prometheus 并配置好需要监控的目标。可以使用 Prometheus 的配置文件&#xff08;prometheus.yml&#xff09;来指定需要监控的目标&#xff0c;例如服务、主机、容器…...

编程日记 2023/4/16 5:40:31

2007年4月全国计算机等级考试二级JAVA笔试试题及答案

2007年4月全国计算机等级考试二级JAVA笔试试题及答案 一、选择题 &#xff08;1&#xff09;已知一棵二叉树前序遍历和中序遍历分别为ABDEGCFH和DBGEACHF&#xff0c;则该二叉树的后序遍历为 A&#xff0e;GEDHFBCA B&#xff0e;DGEBHFCA C&#xff0e;ABCDEFGH D&#xff0e;…...

编程日记 2023/4/11 16:05:33

灌水玩玩 ChatGPT AIGC生成的有栈协同程序实现（例子）

CO&#xff1a; 你是一名 C/C 高级软件工程师。 请使用 stackful 协程&#xff0c;实现一个 Sleep 随眠的协同程序&#xff0c;注意并非 stackless 协程&#xff0c;不允许使用 C/C 17 以上的语言标准实现&#xff0c;允许使用 boost 基础框架类库。 ChatGPT&#xff1a; 好的…...

编程日记 2023/4/11 14:06:03

【砝码称重】暴力DFS（一半分）+ dp（可AC）

题目描述&#xff1a; 题目分析&#xff1a; 我也没有完全搞太明白&#xff0c;简单说说我的理解 1.dp【i】【j】表示前 i 个砝码&#xff0c;是否可以称出来重量为 j 的物品&#xff0c;如果可以的话&#xff0c;值为1&#xff0c;不可以 为0&#xff1b; 2.针对当前第 i 个…...

编程日记 2023/4/11 5:55:47

科大奥瑞物理实验——霍尔效应实验

实验名称&#xff1a;霍尔效应实验 1. 实验目的&#xff1a; 了解霍尔效应测量磁场的原理和方法&#xff1b;观察磁电效应现象&#xff1b;学会用霍尔元件测量磁场及元件参数的基本方法。 2. 实验器材&#xff1a; QS-H型霍尔效应实验仪 磁针 QS-H型霍尔效应测试仪 双刀开关…...

编程日记 2023/4/14 8:02:49

2023_深入学习HTML5

H5 基于html5和 css3和一部分JS API 结合的开发平台(环境) 语义化标签 header : 表示头部&#xff0c;块级元素 footer &#xff1a; 表示底部&#xff0c;块级元素 section &#xff1a;区块 nav &#xff1a; 表示导航链接 aside &#xff1a; 表示侧边栏 output &am…...

编程日记 2023/4/18 9:17:07

Apache iotdb-web-workbench 认证绕过漏洞（CVE-2023-24829）

漏洞简介 ​​ 影响版本 0.13.0 < 漏洞版本 < 0.13.3 漏洞主要来自于 iotdb-web-workbench​ IoTDB-Workbench是IoTDB的可视化管理工具&#xff0c;可对IoTDB的数据进行增删改查、权限控制等&#xff0c;简化IoTDB的使用及学习成本。iotdb-web-workbench​ 中存在不正…...

编程日记 2023/6/1 10:25:09

【7-1】Redis急速入门与复习

文章目录1、分布式架构概述本阶段规划什么是分布式架构单体架构与分布式架构 对比分布式架构优点分布式架构缺点设计原则2、为何引入Redis现有架构的弊端3、什么是NoSql&#xff1f;NoSqlNoSql优点NoSql常见分类4、什么是分布式缓存&#xff0c;什么是Redis&#xff1f;什么是分…...

编程日记 2023/6/1 8:50:11

5、操作系统——进程间通信（3）（system V-IPC：消息队列）

目录 1、管道的缺点 2、消息队列 3、消息队列的API &#xff08;1&#xff09;获取消息队列的ID&#xff08;类似文件的描述符&#xff09;(msgget) &#xff08;2&#xff09;发送、接收消息(msgrcv) (3)获取和设置消息队列的属性&#xff08;msgctl&#xff09; 4、消息队…...

编程日记 2023/4/19 15:00:45

C++vector容器用法详解

一、前言vector 是封装动态数组的顺序容器&#xff0c;连续存储数据&#xff0c;所以我们不仅可以通过迭代器访问存储在 vector 容器中的数据&#xff0c;还能用指向 vector 容器中的数据的常规指针访问数据。这意味着指向 vector 容器中的数据的指针能传递给任何期待指向数组元…...

编程日记 2023/4/18 20:32:15

Log4j2的Loggers详解

引言 官方配置文档&#xff1a;https://logging.apache.org/log4j/2.x/manual/filters.html Loggers节点 Loggers节点常见的有两种:Root和Logger <Loggers><Logger name"org.apache.logging.log4j.core.appender.db" level"debug" additivity&qu…...

编程日记 2023/4/19 15:04:55

计算机视觉的应用1-OCR分栏识别：两栏识别三栏识别都可以，本地部署完美拼接

大家好&#xff0c;我是微学AI&#xff0c;今天给大家带来OCR的分栏识别。 一、文本分栏的问题 在OCR识别过程中&#xff0c;遇到文字是两个分栏的情况确实是一个比较常见的问题。通常情况下&#xff0c;OCR引擎会将文本按照从左到右&#xff0c;从上到下的顺序一行一行地识别…...

编程日记 2023/4/15 15:46:56

低代码平台如何选型， 43款国内外低代码平台一网打尽

目前&#xff0c;零代码技术和低代码技术越来越成熟&#xff0c;低代码平台也越来越被大家所接受&#xff0c;国内低代码平台厂商和产品层出不穷&#xff0c;到底哪家低代码平台好&#xff0c;企业如何选型&#xff0c;以下给出一些参考。 一、低代码平台如何选型 企业如何选…...

编程日记 2023/4/15 15:49:59

第六周作业（1.5小时）

一、PreparedStatement PreparedStatement也可以用来执行sql语句&#xff0c;但是需要注意&#xff1a;它需要用sql创建好PreparedStatement&#xff0c;而Statement不需要用sql来创建。 优点&#xff1a; 1、具有较好的可维护性和可读性&#xff0c;参数的分别插入减少了错…...

编程日记 2023/4/18 9:19:57

排序 (蓝桥杯) JAVA

目录题目描述&#xff1a;冒泡排序算法(排序数字&#xff0c;字符)&#xff1a;String与String buffer的区别:纯暴力破解(T到爆炸)&#xff1a;暴力破解加思考(bingo)&#xff1a;总结&#xff1a;题目描述&#xff1a; 小蓝最近学习了一些排序算法&#xff0c;其中冒泡排序让他…...

编程日记 2023/4/15 15:51:00

【Blender 水墨材质】实现过程剖析01

写在前面 想把Blender一位大佬演示的Blender水墨材质过程&#xff0c;在Unity用Shader重现&#xff0c;过程中会拿能拿到的节点代码举例&#xff08;ShaderGraph或者UE的都会有&#xff09;。第一步当然是要跟着人家做一遍&#xff01;我会尽可能地分析一下每一步的原理~ 教程…...

编程日记 2023/4/18 9:21:10

代码随想录算法训练营第五十六天|583. 两个字符串的删除操作、72. 编辑距离

​ LeetCode 583 两个字符串的删除操作 题目链接&#xff1a;https://leetcode.cn/problems/delete-operation-for-two-strings/ 思路&#xff1a; 方法一:两个子串同时删除元素 dp数组的含义 dp[i][j]dp[i][j]dp[i][j]代表以i-1为结尾的字符串word1&#xff0c;和以j-1位结…...

编程日记 2023/4/14 8:04:41

【ArchLinux】【KDE】Archlinux的安装与使用

文章目录开头前言所需环境演示环境相关链接安装教程在Windows环境下制作启动盘进入ArchLinux Live环境安装为硬盘分区如何新建分区&#xff1f;分区表格式化分区分区完成&#xff0c;开始安装挂载分区切换镜像源安装基本系统设置将Live环境&#xff08;当前&#xff09;挂载信息…...

编程日记 2023/4/15 15:51:58

Go语言精修（尚硅谷笔记）第六章

六、函数、包和错误处理 6.1 函数概念 不用函数的弊端 1&#xff09;写法可以完成功能, 但是代码冗余 2 ) 同时不利于代码维护 概念&#xff1a;为完成某一功能的程序指令(语句)的集合,称为函数。 在Go中,函数分为: 自定义函数、系统函数 基本语法 //函数的基本语法 fu…...

编程日记 2023/4/12 13:07:40

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/12/19 1:30:36

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2025/12/19 4:06:55

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/12/14 13:11:33

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2025/12/22 2:26:24

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/12/19 11:09:52

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/10/27 13:29:11

LRU 缓存机制详解与实现（Java版） + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

编程新知 2025/11/28 20:47:33

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...

编程新知 2025/12/18 2:08:57

k8s从入门到放弃之HPA控制器

k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率&#xff08;或其他自定义指标&#xff09;来调整这些对象的规模&#xff0c;从而帮助应用程序在负…...

编程新知 2025/10/30 1:59:28

AD学习（3）

1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分&#xff1a; &#xff08;1&#xff09;PCB焊盘&#xff1a;表层的铜 &#xff0c;top层的铜 &#xff08;2&#xff09;管脚序号&#xff1a;用来关联原理图中的管脚的序号&#xff0c;原理图的序号需要和PCB封装一一…...

编程新知 2025/12/5 0:33:49