昨天在做一些打印的需求，遇到了一些小坑，记录分享一下。
CSS 打印分页功能
需求： html 在一个区域显示数据，当放不下时，自动第二页存放，打印
你可以使用 CSS 的分页属性来实现这个功能。CSS 分页属性包括 page-break-before、page-break-after 和 page-break-inside，它们可以控制在哪里分页。
主要是这几个配置样式属性：
- 分页符： 使用
page-break-before和page-break-after属性来在指定元素之前或之后插入分页符。
@media print { .page-break { page-break-before: always; } }- 避免分割元素：使用
page-break-inside属性来避免将元素分割到不同的页面上。 【放在要分割的元素上】
@media print {
.avoid-break {
page-break-inside: avoid;
}
}- 控制分页位置：使用
page-break-before和page-break-after属性的值来控制分页的位置，如auto、always、avoid等。
@media print {
.custom-break {
page-break-before: auto; /* 默认值，根据需要调整 */
page-break-after: always;
}
}具体来说，你可以将要显示的数据放在一个容器元素中，并为该元素设置 page-break-inside: avoid; 属性，表示不允许在其中间分页。然后，为容器元素的父元素设置 page-break-after: always; 属性，表示在该元素之后始终分页。
代码语言：css复制<style>
.container {
page-break-inside: avoid;
}
.page {
page-break-after: always;
}
</style>
<div class="page">
<div class="container">
<!-- 这里放要显示的数据 -->
</div>
</div>在这个例子中，我们定义了一个名为 container 的容器元素，并为其设置了 page-break-inside: avoid; 属性，表示不允许在其中间分页。然后，我们定义了一个名为 page 的父元素，并为其设置了 page-break-after: always; 属性，表示在该元素之后始终分页。
当数据超出一页时，浏览器会自动将剩余部分放到下一页。如果你需要打印这些数据，只需将页面设置为打印模式即可。在打印预览中，你可以看到所有的数据被正确地分页，并且可以跨页打印。
CSS 实现打印 Table 单元格换行显示
- white-space: normal;：默认值，文本在遇到空格或换行符时换行，单词内部不会强制分割。
- word-break: break-all;：单词会被强制分割，即使在单词内部也会进行换行。
- line-height: 指定行高来确定分割后的间隙
table tr td:nth-child(1) {
width: 80px; //指定单元格宽度
word-break: break-all;
white-space: normal;
line-height: 1.2;
}CSS 打印常用配置
1.隐藏不必要的元素：通过设置 display: none; 可以隐藏在打印版本中不需要显示的元素，例如导航栏、广告等。
代码语言：css复制@media print {
.navbar, .ad-banner {
display: none;
}
}2.调整字体大小和颜色：可以根据打印需求调整文本的字体大小和颜色。
代码语言：css复制@media print {
body {
font-size: 12pt;
color: #000;
}
}3.设置页面边距：通过设置 margin 属性来调整打印页面的边距.
代码语言：css复制@media print {
@page {
margin: 1cm;
}
}4.隐藏背景图像和颜色：可以通过设置 background 属性为 none 来隐藏打印页面的背景图像和颜色。
代码语言：css复制@media print {
body {
background: none;
}
}5.设置页面大小：通过 @page 规则和 size 属性来定义打印页面的大小。
代码语言：css复制@media print {
@page {
size: A4; /* 可以使用常见的纸张尺寸如 A4、Letter、Legal 等 */
}
}6.调整图片显示：可以通过设置 max-width 属性来控制打印版本中图片的最大宽度，避免图片溢出页面边界。
代码语言：css复制@media print {
img {
max-width: 100%;
height: auto;
}
}7. 隐藏链接的 URL：如果你不希望在打印版本中显示链接的 URL，可以使用 text-decoration 属性来隐藏。
代码语言：css复制@media print {
a::after {
content: none;
}
}8.调整页眉和页脚：
可以使用 @top-left, @top-center, @top-right, @bottom-left, @bottom-center, @bottom-right 等伪元素选择器来定义页眉和页脚的内容和样式。
代码语言：css复制@media print {
@page {
@top-left {
content: "页眉内容";
}
@bottom-center {
content: "页脚内容";
}
}
}使用 @media print 媒体查询可以确保这些样式仅在打印时生效，并保持网页和打印版本的差异。
