htmlで必要な部門だけを印刷するにはどうしたらいいですか？

Question

こんにちは私はプリント部門でこの部門だけが表示されたい、 これにスクリプトは何ですか？そして、これはテーブル上のすべてのテナントのモーダルです。このプリントはすべてのテナントの領収書として役立ちます。

  <div class="modal-body"> 
      <form class="form-horizontal" enctype = "multipart/form-data"> 
       <div class="form-group"> 
        <strong> 
         <div> 
          <h3 class="modal-title text-center" id="myModalLabel"> 
          <strong>Republic of the Philippines<br>Province of Negros Occidental</strong></h3> 
          <h4 class ="text-center"><em>City of Victorias</em></h4> 
          <h4 class="text-center"> 
           <strong>OFFICE OF THE MARKET SUPERVISOR</strong> 
          </h4> 

          <br>        
          <div class="form-group"> 
           <input type = "hidden" class="form-control" name= "id" placeholder="First Name" value = "<?php echo $value['rate_id'];?>"> 
           <label class="col-sm-2 control-label">Name </label>: <?php echo $value['tenant_fname']." ".$value['tenant_mname']." ".$value['tenant_lname'];?> 
          </div> 
          <div class="form-group"> 
           <label class="col-sm-2 control-label">Location </label>: Stall No. <?php echo $value['stall_number']." (".$value['stall_floor'];?>) 
          </div> 
          <div class="form-group"> 
           <label class="col-sm-2 control-label">SUBJECT </label> : 
           FOR PAYMENT OF ELECTRICAL CONSUMPTION FOR THE &nbsp;&nbsp;&nbsp;PERIOD FROM 
           <input class = "datepick custom-input1"></input> 
           ,TO 
           <input class = "datepick custom-input1"></input> 
          </div> 
          <div class="form-group"> 
           <label class="col-sm-4 control-label">METER NO. </label>: <input type="text" name="" class = "custom-input"></input> 
          </div> 
          <div class="form-group"> 
           <label class="col-sm-4 control-label">ELECTRIC RATE </label>: <input class = "custom-input" value="<?php echo $value['elec_rate']?> per kWh" id= "rate" readonly ></input> 
          </div> 
          <div class="form-group"> 
           <label class="col-sm-4 control-label">PRESENT </label>: <input class = "custom-input" id="current" name="current"></input> 
          </div> 
          <div class="form-group"> 
           <label class="col-sm-4 control-label">PREVIOUS </label>: <input class = "custom-input" value ="<?php echo $value['charges']?> kWh" id = "previous" readonly> </input> 
          </div> 
          <div class="form-group"> 
           <label class="col-sm-4 control-label">TOTAL CONSUMPTION</label>: 
           <input type="text" class = "custom-input" type="" id="result1" readonly> 
          </div> 
          <div class="form-group"> 
           <label class="col-sm-4 control-label">AMOUNT </label>: 
           <input type="text" class = "custom-input" type="" id="result" readonly>          
          </div><br>        
         </strong> 
        </div> 
       </div> 

Answer 1

私が間違っていない場合、以下のコードはあなたが望むことをするでしょう。詳細については、MDN documentation about @mediaを参照してください。

@media print { 
    body * { 
     visibility: hidden; 
    } 
    .modal-body* { 
     visibility: visible; 
    } 
    .modal-body{ 
     display: block!important; 
     position: absolute; 
     top: 40px; 
     left: 30px; 
    } 
} 

Answer 2

media query for printingがあります。

@media print { 
    /*your printing specific css here*/ 
}