如何使用 CSS 只打印特定的 div 元素？

打印特定内容：隔离

将特定内容合并到打印作业中，同时排除其他页面元素可能会很麻烦。为了解决这个问题，CSS 提供了一个解决方案，允许您仅打印指定的

。

解决方案：

以下 CSS 代码有效隔离了目标

元素用于打印：

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

说明：

此代码使用打印媒体查询在打印时有选择地将样式应用于文档。它隐藏了页面上除

纯 CSS 解决方案的优点：

• 无需窗口操作或额外代码。
• 保持打印的
  的布局。
• 避免不必要的打印预览带来不便。

替代方法：

虽然 CSS 提供了一个优雅的解决方案，但还有其他替代方法：

• 显示操作：这涉及设置 display:none不可打印的元素。但是，它会破坏页面的布局并需要进行结构更改。
• 可见性控制：与纯 CSS 解决方案类似，但没有元素的精确定位。

纯 CSS 方法为打印特定内容提供了一种简单有效的解决方案，而不会影响布局或用户体验。