昨天在做一些打印的需求,遇到了一些小坑,记录分享一下。
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; 属性,表示在该元素之后始终分页。
<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; 可以隐藏在打印版本中不需要显示的元素,例如导航栏、广告等。
@media print {
.navbar, .ad-banner {
display: none;
}
}
2.调整字体大小和颜色:可以根据打印需求调整文本的字体大小和颜色。
@media print {
body {
font-size: 12pt;
color: #000;
}
}
####
3.设置页面边距:通过设置 margin 属性来调整打印页面的边距.
@media print {
@page {
margin: 1cm;
}
}
4.隐藏背景图像和颜色:可以通过设置 background 属性为 none 来隐藏打印页面的背景图像和颜色。
@media print {
body {
background: none;
}
}
5.设置页面大小:通过 @page 规则和 size 属性来定义打印页面的大小。
@media print {
@page {
size: A4; /* 可以使用常见的纸张尺寸如 A4、Letter、Legal 等 */
}
}
6.调整图片显示:可以通过设置 max-width 属性来控制打印版本中图片的最大宽度,避免图片溢出页面边界。
@media print {
img {
max-width: 100%;
height: auto;
}
}
7. 隐藏链接的 URL:如果你不希望在打印版本中显示链接的 URL,可以使用 text-decoration 属性来隐藏。
@media print {
a::after {
content: none;
}
}
8.调整页眉和页脚:
可以使用 @top-left, @top-center, @top-right, @bottom-left, @bottom-center, @bottom-right 等伪元素选择器来定义页眉和页脚的内容和样式。
@media print {
@page {
@top-left {
content: "页眉内容";
}
@bottom-center {
content: "页脚内容";
}
}
}
使用 @media print 媒体查询可以确保这些样式仅在打印时生效,并保持网页和打印版本的差异。