关于CSS 打印你应该知道的样式配置

昨天在做一些打印的需求，遇到了一些小坑，记录分享一下。

CSS 打印分页功能

需求： html 在一个区域显示数据，当放不下时，自动第二页存放，打印

你可以使用 CSS 的分页属性来实现这个功能。CSS 分页属性包括 page-break-before、page-break-after 和 page-break-inside，它们可以控制在哪里分页。

主要是这几个配置样式属性：

分页符：使用 page-break-before 和 page-break-after 属性来在指定元素之前或之后插入分页符。

CSS 复制代码

@media print { .page-break { page-break-before: always; } }

避免分割元素：使用 page-break-inside 属性来避免将元素分割到不同的页面上。【放在要分割的元素上】

CSS 复制代码

@media print {
  .avoid-break {
    page-break-inside: avoid;
  }
}

控制分页位置：使用 page-break-before 和 page-break-after 属性的值来控制分页的位置，如 auto、always、avoid 等。

CSS 复制代码

@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: 指定行高来确定分割后的间隙

css 复制代码

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 媒体查询可以确保这些样式仅在打印时生效，并保持网页和打印版本的差异。