使用Thymeleaf导出PDF，页眉插入图片与内容重叠？_thymeleaf中html生成pdf后排版异常-优快云博客

在使用Thymeleaf导出PDF时，遇到页眉内容与页面主体内容重叠的问题。原因在于CSS打印分页的header不占空间。解决方法是设置内容区域从页眉下方开始，确保页眉空间。通过Thymeleaf的布局指令定义页眉，使用CSS控制页眉高度和页面分页，避免元素被分割。同时，可以使用`white-space`属性处理文本换行，实现理想的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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:pre-line

不会换行一直在同一行

white-space: nowrap;

文本过长换行

white-space: normal

想要实现内容过长换行：固定宽度, height：auto, white-space: normal;