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

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

news 2026/5/19 2:04:47

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

2025届毕业生推荐的AI辅助论文网站解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 当下&#xff0c;学术研究越发受到人们的重视&#xff0c;在此种背景状况之下&#xff0c;论…...

编程新知 2026/5/19 0:11:48

终极Fansly下载指南：5步快速掌握高效内容保存技巧

终极Fansly下载指南&#xff1a;5步快速掌握高效内容保存技巧 【免费下载链接】fansly-downloader Easy to use fansly.com content downloading tool. Written in python, but ships as a standalone Executable App for Windows too. Enjoy your Fansly content offline anyt…...

编程新知 2026/5/18 22:58:57

如何用3步快速上手英雄联盟Akari助手：终极智能游戏伴侣完整指南

如何用3步快速上手英雄联盟Akari助手&#xff1a;终极智能游戏伴侣完整指南 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 还在为英雄联盟中繁…...

编程新知 2026/5/18 21:20:45

Cursor对话历史导出扩展：基于DOM逆向的AI协作数据备份方案

1. 项目概述&#xff1a;一个为开发者解放生产力的“数据保险箱”如果你和我一样&#xff0c;日常重度依赖 Cursor 这款 AI 编程神器&#xff0c;那你一定有过这样的焦虑&#xff1a;那些与 AI 深度对话产生的宝贵上下文、精心调教出的项目特定提示词、甚至是 AI 帮你重构的代码…...

编程新知 2026/5/18 21:03:45

200万像素GC2145摄像头怎么玩？手把手教你用AiPi-Cam-D200开发板快速搭建无线图传

200万像素GC2145摄像头实战指南&#xff1a;零代码玩转AiPi-Cam-D200无线图传 当你拆开AiPi-Cam-D200开发板的包装&#xff0c;看到那块小巧的GC2145摄像头时&#xff0c;可能既兴奋又忐忑——这个看起来像玩具的设备&#xff0c;真能实现专业级的无线图传吗&#xff1f;作为创…...

编程新知 2026/5/18 20:37:21

超大规模内容生成技能引擎：模块化架构与工作流实践

1. 项目概述&#xff1a;一个面向超大规模内容生成的技能引擎最近在折腾一些自动化内容生成的项目&#xff0c;发现了一个挺有意思的GitHub仓库&#xff0c;叫smouj/ultra-generator-skill。光看这个名字&#xff0c;你可能会觉得有点抽象——“超生成器技能”&#xff1f;这到…...

编程新知 2026/5/18 20:17:40

100+专业思维导图模板：3分钟让你从新手变高手

100专业思维导图模板&#xff1a;3分钟让你从新手变高手 【免费下载链接】Freeplane-MindMap-Template Freeplane-MindMap-Template&#xff08;Freeplane 思维导图模板&#xff09; 项目地址: https://gitcode.com/gh_mirrors/fr/Freeplane-MindMap-Template 你是否曾花…...

编程新知 2026/5/18 19:37:16

H5GG iOS脚本引擎终极指南：三分钟掌握无需越狱的游戏修改神器

H5GG iOS脚本引擎终极指南&#xff1a;三分钟掌握无需越狱的游戏修改神器 【免费下载链接】H5GG an iOS Mod Engine with JavaScript APIs & Html5 UI 项目地址: https://gitcode.com/gh_mirrors/h5/H5GG H5GG是一款革命性的iOS脚本引擎和内存修改工具&#xff0c;通…...

编程新知 2026/5/18 19:05:58

机器人全身控制与SLAM系统核心技术解析

1. 机器人全身控制技术解析Sprout机器人采用的全身控制策略&#xff08;Whole-Body Policy&#xff09;通过分层控制架构实现了稳定运动与精准操作的平衡。该系统将控制分为三个主要层级&#xff1a;骨盆姿态控制、上肢柔顺控制和高度调节。这种分层设计使得机器人能够在保持上…...

编程新知 2026/5/18 17:23:56

窗口尺寸自由掌控：SRWE如何让任意程序窗口随心所欲

窗口尺寸自由掌控&#xff1a;SRWE如何让任意程序窗口随心所欲 【免费下载链接】SRWE Simple Runtime Window Editor 项目地址: https://gitcode.com/gh_mirrors/sr/SRWE 你是否曾为某个应用程序的固定窗口尺寸感到束手无策&#xff1f;想在高分辨率下截图却受限于游戏设…...

编程新知 2026/5/18 17:08:59