如何仅打印指定div内容？设置后打印预览无内容排查

嘿，我懂你遇到的麻烦了——你想只打印#folha这个div的内容，于是在打印媒体查询里先把body下所有元素设为display:none，再单独把#folha设为display:block!important，结果预览里啥都看不到。其实问题出在你把#folha的所有子元素也一起隐藏了！

错误原因 #

body * { display: none; }这个选择器会选中body下的所有后代元素，包括#folha里面的每一个子div、span等。哪怕你把#folha本身设为block，它里面的所有子元素还是处于隐藏状态，自然看不到任何内容。

解决办法 #

你需要不仅让#folha显示，还要让它的所有子元素也恢复显示，同时保留原来的布局样式。修改你的打印媒体查询CSS如下：

@media print {
  /* 先隐藏body下所有元素 */
  body * {
    display: none !important;
  }
  /* 让#folha及其所有子元素恢复显示 */
  #folha, #folha * {
    display: block !important;
  }
  /* 重新设置子元素的布局样式（因为上面的display:block会覆盖原来的flex等属性） */
  .container-obs{
    display: flex !important;
    flex-direction: column;
  }
  .circle{
    border-radius:50%;
    border:solid black 1px;
    padding:5px;
  }
  .container-print {
    display: flex !important;
    padding-top:10px;
  }
  .container-print div:last-child {
    margin-left: auto;
  }
  .center {
    align-items: center;
  }
  .medplano{
    display: flex !important;
  }
  .medplano>div{
    margin-right: 30px;
  }
  .paciente {
    margin-left: 15px;
  }
  @page {
    size: auto;
    margin: 0mm;
  }
}

这里的关键是#folha, #folha *这个选择器，它会选中#folha本身以及它的所有后代元素，把它们的display属性恢复过来。另外要注意加!important，因为body *的样式用了!important，必须用更高的优先级覆盖。

这样修改后，打印预览里就能正常显示#folha里的所有内容，并且保持你原来设置的布局样式了。

内容的提问来源于stack exchange，提问作者Luiz Alves