广州建设公共资源交易中心seo文章生成器
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"