Question

我正在尝试打印div内容，而不打印剩下的所有正文。

这不像其他用户朋友发布的那样重复。

div id是'#folha'。在印刷期间，我想隐藏所有的身体工作人员并仅打印这个特定的div。

这个div是许多其他div的内在。

我在媒体查询打印中隐藏了所有正文（“display = none”）并仅启用了div id =＃folha with“display = block”。

但是对话框打印预览中没有任何内容。

我做错了什么？

小提琴：http://jsfiddle.net/Ryh3G/19/

//标记

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor greenColor];
    }

    return self;
}

// CSS

<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的

 @media screen {
    .container-obs{
         display: flex;
         flex-direction: column;
    }
    .circle{
        border-radius:50%; 
        border:solid black 1px;
        padding:5px
    }
    .container-print {
         display: flex;
         padding-top:10px;
    }
    .container-print div:last-child {
      margin-left: auto;
    }
    .center {
     align-items: center;
    }
    .medplano{
         display: flex;
    }
    .medplano>div{
         margin-right: 30px;
    }
    .paciente {
         margin-left: 15px; 
    }
 }
 @media print {
    body *{
      display:none;
    }
    #folha{
      display:block!important;
    }

    .circle{
        border-radius:50%; 
        border:solid black 1px;
        padding:5px;
    }

    @page { size: auto;  margin: 0mm; }
    .container-obs{
         display: flex;
         flex-direction: column;
    }
    .container-print {
         display: flex;
         padding-top:10px;
    }
    .container-print div:last-child {
      margin-left: auto;
    }
    .center {
     align-items: center;
    }
    .medplano{
         display: flex;
    }
    .medplano>div{
         margin-right: 30px;
    }
    .paciente {
         margin-left: 15px; 
    }
 }

Answer 1

这是另一个想法。您可以使用白色图层覆盖所有身体元素，并使其内容高于它。只需使用固定位置（不改变任何位置属性，以便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;
  }
}

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

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

Answer 2

在你提供的jsfiddle链接中，你在印刷媒体上写道：

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

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

此外，我在您的小提琴链接<div><div id="#folha"></div></div>中发现，这意味着容器隐藏#folha，因此屏幕为空。

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

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

您要为打印媒体隐藏哪个元素，您应该添加类似.hide-in-print-media的特殊类。写下一些想法如下：

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

请注意，我们无法设置#folha * { display: block;}，因为在#folha内并非所有元素都会阻止，因此可以打破布局。

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

2 个答案: