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

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

news 2025/7/8 10:44:33

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

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/7/7 6:59:35

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/7/4 19:19:18

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/6/17 19:00:28

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/6/16 12:40:21

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/6/17 5:20:48

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/7/3 9:50:42

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/7/7 11:18:56

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/6/20 22:43:59

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2025/7/7 7:10:35

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/6/23 2:50:47