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

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

news 2026/3/31 8:44:49

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

深度探索：开源工具OpenCore Legacy Patcher技术揭秘与完整指南

深度探索&#xff1a;开源工具OpenCore Legacy Patcher技术揭秘与完整指南 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 随着苹果系统持续演进&#xff0c;…...

编程新知 2026/3/31 8:23:38

多平台资源嗅探与下载工具：解决网络资源获取难题的技术方案

多平台资源嗅探与下载工具&#xff1a;解决网络资源获取难题的技术方案 【免费下载链接】res-downloader 资源下载器、网络资源嗅探&#xff0c;支持微信视频号下载、网页抖音无水印下载、网页快手无水印视频下载、酷狗音乐下载等网络资源拦截下载! 项目地址: https://gitcod…...

编程新知 2026/3/31 8:03:27

Qwen3-8B快速体验报告：部署简单，中文理解能力确实强

Qwen3-8B快速体验报告&#xff1a;部署简单&#xff0c;中文理解能力确实强 1. 开箱即用的AI体验 最近在测试各种开源大模型时&#xff0c;我发现了Qwen3-8B这个宝藏模型。作为Qwen系列的最新成员&#xff0c;这个80亿参数的模型在中文理解和推理能力上表现突出&#xff0c;最…...

编程新知 2026/3/31 8:01:27

STM32F767串口接收不定长数据实战：超时中断与空闲中断的配置与性能对比

1. STM32F767串口接收不定长数据的痛点与解决方案 在嵌入式开发中&#xff0c;处理串口不定长数据就像在餐厅等一份不知道有多少道菜的套餐——你永远不知道下一口是什么&#xff0c;也不知道什么时候结束。STM32F767作为高性能MCU&#xff0c;面对RS485、Modbus等协议时&#…...

编程新知 2026/3/31 7:51:25

深度学习音高检测：5个技巧掌握CREPE实时音高追踪

深度学习音高检测&#xff1a;5个技巧掌握CREPE实时音高追踪 【免费下载链接】crepe CREPE: A Convolutional REpresentation for Pitch Estimation -- pre-trained model (ICASSP 2018) 项目地址: https://gitcode.com/gh_mirrors/cr/crepe CREPE&#xff08;Convoluti…...

编程新知 2026/3/31 7:00:59

新手别怕！用Volatility 2.6分析WinXP内存镜像，一步步揪出隐藏的svchost木马

从零开始的内存取证实战&#xff1a;用Volatility 2.6解剖WinXP内存中的svchost木马 当你第一次接触内存取证时&#xff0c;面对黑底白字的命令行界面和陌生的术语&#xff0c;难免会感到无从下手。但别担心&#xff0c;今天我们就用一个真实的WinXP SP2内存镜像案例&#xff0…...

编程新知 2026/3/31 6:20:39

BH1750光照传感器避坑指南：STM32的I2C通信那些事儿（附STM32F407调试心得）

BH1750光照传感器实战避坑&#xff1a;STM32 I2C通信深度解析与调试技巧 第一次用STM32驱动BH1750光照传感器时&#xff0c;我盯着纹丝不动的数据寄存器发呆了半小时——I2C总线明明显示通信成功&#xff0c;但读回来的光照值永远是零。这种看似简单却暗藏玄机的外设调试经历&a…...

编程新知 2026/3/31 6:18:38

Go Channel 缓冲区机制与性能影响

Go Channel 缓冲区机制与性能影响 在Go语言中&#xff0c;Channel是协程间通信的核心机制&#xff0c;而缓冲区的设置直接影响程序的并发性能和稳定性。理解缓冲区的运作原理及其对性能的影响&#xff0c;对于编写高效、可靠的并发程序至关重要。本文将从缓冲区的底层机制出发…...

编程新知 2026/3/31 5:32:20

Fay开源数字人框架：终极多语言翻译与全球化应用指南 [特殊字符]

Fay开源数字人框架&#xff1a;终极多语言翻译与全球化应用指南 &#x1f30d; 【免费下载链接】Fay fay是一个帮助数字人&#xff08;2.5d、3d、移动、pc、网页&#xff09;或大语言模型&#xff08;openai兼容、deepseek&#xff09;连通业务系统的agent框架。 项目地址: h…...

编程新知 2026/3/31 4:58:02

Mask2Former性能对比分析：R50到Swin-L各主干网络的优劣选择

Mask2Former性能对比分析&#xff1a;R50到Swin-L各主干网络的优劣选择 【免费下载链接】Mask2Former Code release for "Masked-attention Mask Transformer for Universal Image Segmentation" 项目地址: https://gitcode.com/gh_mirrors/ma/Mask2Former Ma…...

编程新知 2026/3/31 4:21:08