Jquery 打印div内容并隐藏所有剩余的正文

我正在尝试打印一个div内容，而不打印所有正文

这不是其他用户朋友发布的重复内容

div id是“folha”。在打印过程中，我想隐藏所有body staff，只打印这个特定的div

这个div是许多其他div的内部

在媒体查询打印中隐藏所有bodydisplay=none，并仅启用div id=folha和display=block

但“打印预览”对话框中没有显示任何内容

我做错了什么

小提琴：

//加价

<div>many other divs are here </div> 
<div>
  <div id="folha">
        <div class="container-print center">
            <div class="color-black">
                MY TEST HHAHHHAHAHAKJAJAJAJA
            </div>
            <div class="paciente color-black">
                <div><strong class="ng-binding">THATIANA NUNES ALMEIDA</strong></div>
                <div class="medplano">
                 <div class="ng-binding">Sem Pref</div>
                 <div class="ng-binding">IRB-APOSENTADOS/EX COLABORADORES</div>
                </div>
                <div class="medplano">
                  <div class="ng-binding">15/01/182018 20:46:13</div>
                  <div>TOTEM</div>
                  <div class="ng-binding">Matr:00000</div>
                </div>
            </div>
            <div class="color-black">
                <span class="circle">TRAN</span>
                <span class="circle">REC</span>
            </div>
        </div>    
        <div class="container-obs color-black">
          <div class="ng-binding"></div>      
          <div class="ng-binding">Rx e Procedimentos no receituário com CID. Fratura podemos cobrar  Consulta.Recepção: Fratura podemos cobrar Consulta.Densitometria óssea com autorização via fax 2240.1621.Procedimentos acima 300 chs, necessita de autorização. Paciente deverá apresentar lâmina de pagamento. Observar sempre validade da carteira.
          </div>      
        </div>    
 </div>

</div>

//jquery

$(function() {
 window.print();
});

---

在提供的JSFIDLE链接中，您在“打印媒体”下写道：

body * { display: none;}
#folha{
  display:block!important;
}

剂量意味着什么？这意味着您隐藏了除folha之外的所有元素，但body*也隐藏在元素folha的内部。这就是为什么不显示内部元素，因为所有元素都隐藏在body*这个选择器中

我还发现在你们的小提琴链接，这意味着容器隐藏folha，所以屏幕是空白的

我添加了以下链接，您可以在其中看到打印效果

http://jsfiddle.net/Ryh3G/22/

所以，您要为打印媒体隐藏哪个元素，应该添加类似这样的特殊类。隐藏在打印媒体中。写一些这样的想法：

 @media print {
   .hide-in-print-media { display: none;}
 }

---

请记住，我们不能设置folha*{display:block；}，因为folha内部并不是所有元素都会被阻塞，所以它可以破坏布局。

这里是另一个想法。您可以使用白色层覆盖所有主体元素，并使div的内容位于其上方。只需使用positionfixed，而不更改任何position属性，这样div就可以保持在原来的位置

CSS可能如下所示：

@media print {
  .overlay {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9999;
    background: #fff;
  }
  #folha {
    position: fixed;
    z-index: 999999;
  }
}

并在代码中的任意位置添加覆盖：

<div class="overlay"></div>

---

你不能隐藏身体然后显示里面的东西，即使使用重要的！可能是我做的复制品，但不起作用。我解决了这个问题。您需要以特定于打印的格式重新发布页面，然后打印出来，或者为用户提供这样做的选项。@JohnH我有一个fiddle链接。我想没有必要转载这一页。谢谢你，哈尼夫先生。我明白了。但是，我的div是许多div嵌套的结果。我不能这样做，因为我的应用程序是一个SPA，而且div会随着页面的变化而变化。我将采用div克隆到iframe并从那里打印。实际上，这样您就不需要在每个元素中添加add类。隐藏在打印媒体中。你应该避免身体*{方法，而不是你可以逐个考虑。我喜欢它。我会试试的

<div class="overlay"></div>