如何优化打印样式？

优化打印样式的方法有很多，取决于你想要达到的具体效果。以下是一些常用的技巧和方法：

1. 使用 CSS 的 @media print 规则:

这是最常用的方法，它允许你专门为打印输出定义样式，而不会影响屏幕上的显示效果。

@media print {
  /* 隐藏不需要打印的元素 */
  .no-print {
    display: none;
  }

  /* 修改其他元素的样式 */
  body {
    font-size: 12pt;
    font-family: serif;
  }

  a {
    text-decoration: underline; /* 显示链接下划线 */
    color: black; /* 将链接颜色改为黑色 */
  }

  table {
    border-collapse: collapse; /* 合并表格边框 */
  }

  th, td {
    border: 1px solid black; /* 添加表格边框 */
  }
}

2. 控制分页:

page-break-after / page-break-before / page-break-inside: 这些属性可以控制元素在页面中的位置，例如在元素之后、之前或内部强制分页。 avoid 值可以尽量避免在元素内部分页，这对于表格和图片尤其有用。

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

  h2 {
    page-break-before: always;
  }
}

orphans / widows: 这两个属性控制段落开头或结尾最少保留的行数，避免出现只有一行文本的“孤行”或“寡行”。

3. 优化内容:

隐藏不必要的元素: 使用 .no-print 类或 @media print { display: none; } 隐藏导航栏、广告、侧边栏等在打印时不需要的内容。
显示链接 URL: 在打印时，链接的 URL 通常不会显示。可以使用伪元素 ::after 或 JavaScript 将 URL 显示在链接文本之后。
调整图片大小: 确保图片在打印时大小合适，避免过大或过小。
使用矢量图形: 如果可能，使用 SVG 等矢量图形，以确保打印质量。

4. JavaScript 辅助:

可以使用 JavaScript 动态修改样式或添加内容，例如：

在打印前动态添加页眉、页脚或页码。
根据打印设置调整布局。
在打印前显示打印预览。

5. 浏览器打印设置:

提醒用户根据需要调整浏览器的打印设置，例如页边距、纸张大小、方向等。

示例：打印表格

<table>
  <thead>
    <tr><th>姓名</th><th>年龄</th><th>城市</th></tr>
  </thead>
  <tbody>
    <tr><td>张三</td><td>30</td><td>北京</td></tr>
    <tr><td>李四</td><td>25</td><td>上海</td></tr>
    <!-- ... -->
  </tbody>
</table>

<style>
@media print {
  table {
    page-break-inside: avoid;
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
  }
}
</style>