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

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

news 2026/5/25 2:01:00

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"

相关文章：

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

CSS 打印分页功能 需求&#xff1a;打印 在第一页的内容被挤到第二页的时候&#xff0c;又想每一页页头都有相同的样式&#xff0c;使用页眉。 问题&#xff1a;第二页的内容与页眉重叠了&#xff1f; 查各路找出的原因&#xff1a;header 页眉不占空间 解决&#xff1a;不…...

编程日记 2024/3/18 13:13:10

python网络编程：通过socket实现TCP客户端和服务端

目录 写在开头 socket服务端&#xff08;基础&#xff09; socket客户端&#xff08;基础&#xff09; 服务端实现&#xff08;可连接多个客户端&#xff09; 客户端实现 数据收发效果 写在开头 近期可能会用python实现一些网络安全工具&#xff0c;涉及到许多关于网络…...

编程日记 2024/3/18 13:11:08

论文阅读——RSGPT

RSGPT: A Remote Sensing Vision Language Model and Benchmark 贡献&#xff1a;构建了一个高质量的遥感图像描述数据集&#xff08;RSICap&#xff09;和一个名为RSIEval的基准评估数据集&#xff0c;并在新创建的RSICap数据集上开发了基于微调InstructBLIP的遥感生成预训练…...

编程日记 2024/3/18 13:07:04

长连接技术

个人学习记录&#xff0c;欢迎指正 1.轮询 1.1 轮询的形式 短连接轮询 前端每隔一段时间向服务端发起一次Http请求来获取数据。 const shortPolling () > { const intervalHandler setInterval(() > {fetch(/xxx/yyy).then(response > response.json()).then(respo…...

编程日记 2024/3/18 13:06:04

供电系统分类详解

一、供电系统分类 电力供电系统一般有5种供电模式&#xff0c;常用的有&#xff1a;IT系统&#xff0c;TT系统&#xff0c;TN系统&#xff0c;其中TN系统又可以分为TN-C&#xff0c;TN-S&#xff0c;TN-C-S。 1、TN-C系统&#xff08;三相四线制&#xff09; 优点: 该系统中…...

编程日记 2024/3/18 13:05:02

基于centos7的k8s最新版v1.29.2安装教程

k8s概述 Kubernetes 是一个可移植、可扩展的开源平台&#xff0c;用于管理容器化的工作负载和服务&#xff0c;可促进声明式配置和自动化。 Kubernetes 拥有一个庞大且快速增长的生态&#xff0c;其服务、支持和工具的使用范围相当广泛。 Kubernetes 这个名字源于希腊语&…...

编程日记 2024/3/18 12:59:57

【赠书第20期】AI绘画与修图实战：Photoshop+Firefly从入门到精通

文章目录 前言 1 入门篇&#xff1a;初识Photoshop与Firefly 2 进阶篇&#xff1a;掌握Photoshop与Firefly的核心技巧 3 实战篇&#xff1a;运用Photoshop与Firefly进行创作 4 精通篇&#xff1a;提升创作水平&#xff0c;拓展应用领域 5 结语 6 推荐图书 7 粉丝福利 前…...

编程日记 2024/3/18 12:57:55

如何在并行超算云上玩转PWmat③：使用Q-Flow提交计算的案例演示

3月的每周二下午14:00我们将会在并行直播间为大家持续带来线上讲座。前面两期我们分享了”PWmat特色功能和应用“以及“如何在并行超算云平台使用PWmat计算软件”主题讲座&#xff0c;回看视频和PPT已上传至B站”龙讯旷腾“账号内。 本周张持讲师将继续带着大家手把手上机教学…...

编程日记 2024/3/18 12:56:54

html5cssjs代码 017样式示例

html5&css&js代码 017样式示例 一、代码二、解释 这段HTML代码定义了一个网页的基本结构&#xff0c;包括头部、主体和尾部。在头部中&#xff0c;设置了网页标题、字符编码和样式。主体部分包含一个标题和一个表格&#xff0c;表格内分为两个单元格&#xff0c;左侧为…...

编程日记 2024/3/18 12:55:52

Vue.js动画

Vue.js动画 Vue.js动画是指在Vue组件中通过添加/移除CSS类或应用CSS过渡/动画效果来实现的视觉效果。这些动画可以帮助改善用户体验&#xff0c;使界面更加生动和吸引人。 Vue.js提供了两种类型的动画&#xff1a;过渡和动画。 过渡&#xff1a;过渡是在元素插入、更新或删除…...

编程日记 2024/3/18 12:54:51

信号与系统学习笔记——信号的分类

目录 一、确定与随机 二、连续与离散 三、周期与非周期 判断是否为周期函数 离散信号的周期 结论 四、能量与功率 定义 结论 五、因果与反因果 六、阶跃函数 定义 性质 七、冲激函数 定义 重要关系 作用 一、确定与随机 确定信号&#xff1a;可以确定时间函数…...

编程日记 2024/3/18 12:53:50

PyTorch深度学习实战（39）——小样本学习

PyTorch深度学习实战&#xff08;39&#xff09;——小样本学习 0. 前言1. 小样本学习简介2. 孪生网络2.1 模型分析2.2 数据集分析2.3 构建孪生网络 3. 原型网络3. 关系网络小结系列链接 0. 前言 小样本学习 (Few-shot Learning) 旨在解决在训练集中只有很少样本的情况下进行分…...

编程日记 2024/3/18 12:50:48

论文阅读——Vision Transformer with Deformable Attention

Vision Transformer with Deformable Attention 多头自注意力公式化为&#xff1a; 第l层transformer模块公式化为&#xff1a; 在Transformer模型中简单地实现DCN是一个non-trivial的问题。在DCN中&#xff0c;特征图上的每个元素都单独学习其偏移&#xff0c;其中HWC特征图上…...

编程日记 2024/3/18 12:48:46

AJAX概念和axios使用、URL、请求方法和数据提交、HTTP协议、接口、form-serialize插件

AJAX概念和axios使用 AJAX概念 AJAX就是使用XMLHttpRequest对象与服务器通信&#xff0c;它可以使用JSON、XML、HTML和text文本等格式发送和接收数据&#xff0c;AJAX最吸引人的就是它的异步特性&#xff0c;也就是说它可以在不重新刷新页面的情况下与服务器通信&#xff0c;…...

编程日记 2024/3/18 12:46:45

【R语言基础操作】

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…...

编程日记 2024/3/18 12:43:42

sqlite 常见命令 表结构

在 SQLite 中&#xff0c;将表结构保存为 SQL 具有一定的便捷性和重要性&#xff0c;原因如下 便捷性&#xff1a; 备份和恢复&#xff1a;将表结构保存为 SQL 可以方便地进行备份。如果需要还原或迁移数据库&#xff0c;只需执行保存的 SQL 脚本&#xff0c;就可以重新创建表…...

编程日记 2024/3/18 12:42:42

基于深度学习的车辆检测技术

基于深度学习的车辆检测技术是现代智能交通系统的重要组成部分&#xff0c;它利用计算机视觉和机器学习算法&#xff0c;特别是深度学习模型&#xff0c;来识别和定位图像或视频中的车辆。这项技术广泛应用于自动驾驶、交通监控、违章抓拍等多个领域。 深度学习车辆检测技术的…...

编程日记 2024/3/18 12:41:40

MyBatis 之三：配置文件详解和 Mapper 接口方式

配置文件 MyBatis 的配置文件是 XML 格式的&#xff0c;它定义了 MyBatis 运行时的核心行为和设置。默认的配置文件名称为 mybatis-config.xml&#xff0c;该文件用于配置数据库连接、事务管理器、数据源、类型别名、映射器&#xff08;mapper 文件&#xff09;以及其他全局属性…...

编程日记 2024/3/18 12:39:39

【PyTorch】基础学习：一文详细介绍 torch.load() 的用法和应用

【PyTorch】基础学习&#xff1a;一文详细介绍 torch.load() 的用法和应用 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f44…...

编程日记 2024/3/18 12:37:36

事务、并发、锁机制的实现

配置全局事务 DATABASES {default: {ENGINE: django.db.backends.mysql,NAME: mydb,USER:root,PASSWORD:pass,HOST:127.0.0.1,PORT:3306,ATOMIC_REQUESTS: True, # 全局开启事务&#xff0c;绑定的是http请求响应整个过程# (non_atomic_requests可局部实现不让事务控制)} } …...

编程日记 2024/3/18 12:35:35

2026保姆级免费照片去水印教程：不用下载App，微信小程序3步搞定！

你是不是也遇到过这种崩溃瞬间&#xff1f;刷到一张绝美壁纸想存下来当背景&#xff0c;结果水印刚好挡住主角的脸&#xff1b;看到一段搞笑视频想转发给朋友&#xff0c;结果水印横在中间像个挡箭牌&#xff1b;想拿一张素材做作业PPT&#xff0c;结果水印比内容还显眼。更烦的…...

编程新知 2026/5/24 23:57:22

SVM与逻辑回归：从线性分类到核方法的原理、对比与实践指南

1. 项目概述&#xff1a;从线性分类到非线性世界的两把钥匙在机器学习的工具箱里&#xff0c;支持向量机&#xff08;SVM&#xff09;和逻辑回归&#xff08;LR&#xff09;是两把经久不衰的“瑞士军刀”。它们都源于线性模型&#xff0c;却通过不同的哲学路径&#xff0c;解决…...

编程新知 2026/5/24 23:30:07

利用Taotoken实现多模型备选方案以提升业务连续性

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 利用Taotoken实现多模型备选方案以提升业务连续性 在中大型企业将AI能力集成到关键业务流程时&#xff0c;服务的连续性与稳定性是…...

编程新知 2026/5/24 22:51:55

借脑之术：一根记忆枝条，嫁接到另一棵树上 —— Memory Grafting 深度解读

论文信息 标题 Memory Grafting: Scaling Language Model Pre-training via Offline Conditional Memory 作者 Runxi Cheng, Yuchen Guan, Yongxian Wei, Qianpu Sun, Qixiu Li, Sinan Du, Feng Xiong, Chun Yuan, Yan Lu, Yeyun Gong (10人) 机构 微软亚洲研究院 (Microsoft R…...

编程新知 2026/5/24 22:03:52

Gemini企业社会责任实践白皮书（2024独家解密版）：覆盖AI伦理、碳足迹追踪与社区赋能的3层合规架构

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Gemini企业社会责任实践白皮书&#xff08;2024独家解密版&#xff09;概览 本白皮书首次系统披露Google Gemini大模型在2024年度面向环境可持续性、AI伦理治理、数字包容性及社区赋能四大维度的企业社会责任…...

编程新知 2026/5/24 21:59:40

如何免费将PPTX转换为HTML？探索纯JavaScript解决方案的完整指南

如何免费将PPTX转换为HTML&#xff1f;探索纯JavaScript解决方案的完整指南 【免费下载链接】PPTX2HTML Convert pptx file to HTML by using pure javascript 项目地址: https://gitcode.com/gh_mirrors/pp/PPTX2HTML 在数字化办公时代&#xff0c;PPTX2HTML作为一款纯…...

编程新知 2026/5/24 21:46:59

93、【Agent】【OpenCode】edit 工具提示词（二）

【声明】本博客所有内容均为个人业余时间创作&#xff0c;所述技术案例均来自公开开源项目&#xff08;如Github&#xff0c;Apache基金会&#xff09;&#xff0c;不涉及任何企业机密或未公开技术&#xff0c;如有侵权请联系删除 背景 上篇 blog 【Agent】【OpenCode】edit 工…...

编程新知 2026/5/24 21:46:58

校准机器学习与SHAP分析：构建可信专利价值评估模型

1. 项目概述&#xff1a;从“黑盒”预测到“透明”评估的跨越在技术管理和投资决策领域&#xff0c;判断一项专利或技术的长期价值&#xff0c;一直是个既关键又棘手的难题。传统的专家评估方法虽然能结合行业洞见&#xff0c;但往往耗时费力、主观性强&#xff0c;且难以应对海…...

编程新知 2026/5/24 21:04:39

智能体通信的序列化标准探索：JSON、ProtoBuf与自定义格式的效率之争

智能体通信的「快递员之战」：JSON、ProtoBuf与自定义格式的效率深度探索 关键词 智能体通信、序列化/反序列化、JSON、Protocol Buffers、自定义二进制格式、传输效率、编码效率、跨语言兼容 摘要 在人工智能多智能体系统（Multi-Agent System, MAS）、大语言模型（LLM）驱…...

编程新知 2026/5/24 20:48:05

倒计时36个月：欧盟《AI搜索透明度法案》草案曝光，所有商用AI搜索引擎必须通过可解释性审计——附合规自查清单v2.1

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;倒计时36个月&#xff1a;欧盟《AI搜索透明度法案》草案的战略影响 距离欧盟《AI搜索透明度法案》&#xff08;AI Search Transparency Act, AISTA&#xff09;草案正式生效仅剩36个月&#xff0c;该立法已进入…...

编程新知 2026/5/24 20:10:36