如何使用CSS仅打印网页上的特定div？

在网页上打印特定内容

仅打印网页上的特定 div 而不影响其他内容可能是一项具有挑战性的任务。为了解决这个问题，下面介绍了一种利用 CSS 的有效方法：

CSS 解决方案：

@media print {
  body {
    visibility: hidden;
  }
  #section-to-print {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
}

说明：

此 CSS 代码使用 @media 打印规则将样式专门应用于打印预览。它的工作原理是：

1. 通过将其可见性设置为隐藏来隐藏页面的整个主体（要打印的 div 除外）。
2. 设置目标 div 的可见性 ( #section-to-print) 可见。
3. 将目标 div 绝对定位在页面的左上角（左：0；上：0；）确保它正确打印。

替代方法：

虽然使用显示来隐藏内容似乎是一个选项，但它可能具有挑战性，因为任何隐藏的元素display:none 也会隐藏其后代。这可能需要大量的页面重组。

此解决方案的优点：

此纯 CSS 解决方案：

• 允许您有选择地打印仅所需的 div，而不禁用其他页面元素。
• 避免创建新窗口，确保无缝的打印体验。
• 保留用于打印的目标 div 的视觉样式，即使应用的样式用于 Web 显示。

以上是如何使用CSS仅打印网页上的特定div？的详细内容。更多信息请关注PHP中文网其他相关文章！