一尘不染

打印只要<div->?

css

如何打印指示的div(而无需手动禁用页面上的所有其他内容)?

我想避免使用新的预览对话框,因此使用此内容创建新窗口没有用。

该页面包含几个表,其中一个表包含我要打印的div-该表已为网络设置了视觉样式,不应以打印形式显示。


阅读 277

收藏
2020-05-16

共1个答案

一尘不染

这是一个通用的解决方案, 使用 CSS ,我已经验证可以使用。

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

替代方法不是很好。使用display非常棘手,因为如果有任何元素,display:none则任何后代都不会显示。要使用它,您必须更改页面的结构。

使用visibility可以更好地工作,因为您可以打开后代的可见性。尽管看不见的元素仍然会影响布局,所以我移到section-to-print左上方,以便正确打印。

2020-05-16