使用Thymeleaf导出PDF,页眉插入图片与内容重叠?

CSS 打印分页功能

需求:打印 在第一页的内容被挤到第二页的时候,又想每一页页头都有相同的样式,使用页眉。

问题:第二页的内容与页眉重叠了?

查各路找出的原因:header 页眉不占空间 

解决:不需要写死内容的高度,需要把页眉空间设出来,内容从哪里开始设好

1. Thymeleaf设置页头、页尾

<style>    @page {@top-center {content: element(header);}}.header {position: running(header);}
</style>

在上面的示例中,@page指令用于定义页面布局,@top-center选择器用于指定页眉的位置。content: element(header);表示将名为header的元素内容作为页眉插入到@top-center位置。.header类用于定义页眉的样式,并使用position: running(header);将其与@top-center位置关联起来。

2. 设置高度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF with Fixed Header and Footer</title>
<style>/* 页面中的内容 */.content {margin-top: 100px; /* 留出页眉空间 */margin-bottom: 100px; /* 留出页脚空间 */}/* 固定页眉 */@page {margin-top: 100px; /* 页眉高度 */margin-bottom: 100px; /* 页脚高度 */}.header {position: fixed;top: 0;left: 0;width: 100%;height: 100px; /* 页眉高度 */background-color: #ccc;text-align: center;line-height: 100px; /* 垂直居中 */}/* 固定页脚 */.footer {position: fixed;bottom: 0;left: 0;width: 100%;height: 100px; /* 页脚高度 */background-color: #ccc;text-align: center;line-height: 100px; /* 垂直居中 */}
</style>
</head>
<body><!-- 固定页眉 --><div class="header">Header</div><!-- 页面中的内容 --><div class="content"><h1>Main Content</h1><p>This is the main content of the page.</p><!-- 这里可以放更多内容 --></div><!-- 固定页脚 --><div class="footer">Footer</div>
</body>
</html>

@media print

@Page

都是专用于页面设计

页码和页面显示只能用JS才能实现?no no no

用纯CSS也能实现

页码实现

<div class="footer"><span id="pagenumber"></span>
<span id="pagecount"></span></div>#pagenumber:before {content: counter(page);}#pagecount:before {content: counter(pages);
}@page {@bottom-left {content: element(footer);vertical-align: top;padding-top: 0px;}footer {display: block;margin-top: 0.5cm;position: running(footer);}

避免分割元素:使用 page-break-inside 属性来避免将元素分割到不同的页面上。 【放在要分割的元素上】

控制分页位置:page-break-after: auto;

.details-box{position: absolute;margin-top: 21px;padding-top: 1px;page-break-after: auto;
}

参考:

关于CSS 打印你应该知道的样式配置 - 掘金 (juejin.cn)

有空格就会另起一行

white-space: nowrap;
white-space:pre-line"

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/752253.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习1650ti在win10安装pytorch复盘

深度学习1650ti在win10安装pytorch复盘 前言1. 安装anaconda2. 检查更新显卡驱动3. 根据pytorch选择CUDA版本4. 安装CUDA5. 安装cuDNN6. conda安装pytorch结语 前言 建议有条件的&#xff0c;可以在安装过程中&#xff0c;开启梯子。例如cuDNN安装时登录 or 注册&#xff0c;会…

Linux-grep命令

grep 是一个强大的文本搜索工具&#xff0c;可以在文件中搜索指定的字符串模式&#xff0c;并将包含匹配的行打印出来。下面是 grep 命令的详细用法&#xff1a; grep [选项] 模式 [文件...] 选项&#xff1a;grep 命令支持多种选项&#xff0c;用于控制搜索行为&#xff0c;常…

十 超级数据查看器   讲解稿    详情5  隐藏功能

十 超级数据查看器 讲解稿 详情5 隐藏功能 app下载地址 百度手机助手 下载地址4 ​ 讲解稿全文&#xff1a; 第5讲 界面的隐藏功能 设置这些功能是为了方便用户操作 首先是编辑栏。长按一可以在一栏和二栏之间做切换&#xff0c;这个一、二、左箭头、右箭头&#xf…

(官网安装) 基于CentOS 7安装MangoDB和MangoDB Shell

前言 查了很多资料都不靠谱&#xff0c;在安装过程中遇到很多的坑&#xff0c;mangoDB 服务重视起不来&#xff1b;出现了很多难以解决的报错&#xff0c;现在把安装过程中遇到的问题&#xff0c;和如何闭坑说一下&#xff0c;很多时候都是准备工作不足导致的&#xff1b;很多方…

【Unity入门】详解Unity中的射线与射线检测

目录 前言一、射线的创建方法二、射线检测1、Raycast()Raycast()不使用射线RayRaycast()使用射线Ray 2、RaycastAll()使用射线RayRaycastAll() 不使用射线Ray 3、射线的碰撞信息 三、示例四、具体使用场景射线的调试方法1、Debug.DrawLine()2、Debug.DrawRay利用Gizmos 前言 碰…

利用生成式人工智能进行功能管理测试

就 DevOps 而言&#xff0c;生成式 AI与功能管理测试的新兴集成标志着一次重大演变。我们将认真研究这项技术如何彻底改变我们创建测试环境的方式。 使用人工智能生成测试使我们能够模拟大量的用户场景和环境&#xff0c;这意味着我们可以开发和部署不仅好而且很棒的功能&…

React 的 diff 算法

React 的 diff 算法的演进。 在 React 16 之前&#xff0c;React 使用的是称为 Reconciliation 的 diff 算法。Reconciliation 算法通过递归地比较新旧虚拟 DOM 树的每个节点&#xff0c;找出节点的差异&#xff0c;并将这些差异应用到实际的 DOM 上。整个过程是递归的&#x…

蓝桥杯day2刷题日记

由浅入深 P8717 [蓝桥杯 2020 省 AB2] 成绩分析 #include <iostream> using namespace std; int num; double sum; int maxs,mins; int n;int main() {mins1e9;maxs-1e9;sum0;cin>>n;for(int i0;i<n;i){cin>>num;sumnum;maxsmax(maxs,num);minsmin(mins…

Ubuntu系统下C语言开发环境搭建与使用教程

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

graylog API 弱密码

graylog web 页面密码设置 输入密码&#xff1a;获取sha256加密后密码 echo -n "Enter Password: " && head -1 </dev/stdin | tr -d \n | sha256sum | cut -d" " -f1vi /etc/graylog/server/server.conf #修改以下配置 root_usernameroot ro…

C#,人工智能,机器学习,聚类算法,训练数据集生成算法、软件与源代码

摘要:本文简述了人工智能的重要分支——机器学习的核心算法之一——聚类算法,并用C#实现了一套完全交互式的、可由用户自由发挥的,适用于聚类算法的训练数据集生成软件——Clustering。用户使用鼠标左键(拖动)即可生成任意形状,任意维度,任意簇数及各种数据范围的训练数…

【Python】Flask上下文管理

current_app 类型&#xff1a;用用上下文的代理对象主要用途&#xff1a;提供对当前激活的Flask应用实例的访问。通常访问应用配置&#xff0c;注册的蓝图&#xff0c;应用级别的数据等等使用场景&#xff1a;在视图函数&#xff0c;错误处理器或者其他任何需要访问应用配置和属…

十步打造JAVA应用服务器

十步打造JAVA应用服务器 目录 十步打造JAVA应用服务器 1、要查看当前系统版本的Linux&#xff0c;您可以使用以下命令之一&#xff1a; 2、安装docker 3、安装mysql 4、安装 nginx 5、安装jdk 6、安装rzsz命令 7、安装git 源代码管理 8、打包jar包 9、启动项目 10、…

JSON 的了解和使用

目录 1. JSON 2. JSONcpp 的安装 3. JSONcpp 相关API的使用 3.1. 将 Json::Value 对象转化为 std::string 3.1.1. Json::Value 类 3.1.2. Json::Value::toStyledString 接口 3.1.3. Json::StyledWriter 类 3.1.4. Json::StyledWriter::write 接口 3.1.5. Json::Fas…

新一代云原生数据库OLAP

2023 OLAP峰会&#xff08;公开&#xff09;PPT汇总&#xff08;25份&#xff09;.zip 新一代云原生数据库的OLAP&#xff08;联机分析处理&#xff09;能力是其重要的特性之一&#xff0c;这种能力使得数据库能够支持复杂的数据分析查询&#xff0c;从而满足企业对大数据的深…

【Qt问题】使用QSlider创建滑块小部件无法显示

问题描述&#xff1a; 使用QSlider创建滑块小部件用于音量按钮的时候&#xff0c;无法显示&#xff0c;很奇怪&#xff0c;怎么都不显示 一直是这个效果&#xff0c;运行都没问题&#xff0c;但是就是不出现。 一直解决不了&#xff0c;最后我在无意中&#xff0c;在主程序中…

arp动态表缓存清除

一、arp表里清除表状态&#xff1a; 1&#xff0c;Delay&#xff1a;请求arp 2&#xff0c;Reachab&#xff1a;响应arp 3&#xff0c;Stale此状态下&#xff0c;待gc_stale_time超时后&#xff0c;准备gc_interval定期清理 二、限制条件 base_reachable_time&#xff1a;后变…

USB - USB Gadget on Linux

February, 2012. Embedded Linux Conference 2012. Agenda Introduction to USB USB Gadget API Existing Gadgets Design your own Gadget Demo Conclusio About the Author Software engineer at Adeneo Embedded Linux, Android Main activities: – BSP adaptation – Driv…

2024年3月18日---3月24日(全面进行)

根据月计划&#xff0c;为了要考虑把产品代码吃透。先对于计算几何&#xff0c;图像处理&#xff0c;测量学基础&#xff0c;slam进行 当然&#xff0c;也要把ue继续进行着。ue的rpg和底层渲染。收集下虚幻商城的免费资源&#xff0c;万一以后做独立游戏用得到。其他的可以暂时…

Android系统 关于ntp的修改(网络时间同步)

一&#xff0c;现象&#xff1a; 1. NTP介绍 NTP&#xff1a;网络时间协议&#xff0c;英文名称&#xff1a;Network Time Protocol&#xff08;NTP&#xff09;是用来使计算机时间同步化的一种协议&#xff0c;它可以使计算机对其服务器或时钟源&#xff08;如石英钟&#x…