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

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

news 2025/9/11 23:35:22

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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/9/11 14:46:46

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2025/9/7 17:36:25

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/9/10 3:57:13

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/9/8 3:10:49

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/9/3 21:03:21

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/8/6 0:12:05

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/8/21 20:18:45

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/8/27 21:34:17

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...

编程新知 2025/8/5 10:17:15

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/9/9 1:34:25