Javascript 如何在启动模式中单击打印按钮打印内容，该按钮也位于启动模式中？

我想在引导模式中打印内容，单击打印按钮（也在模式中）时留下空白的图像空间

我已经在localhost中用PHP版本5.6.15和mysqli尝试过这一点。 对于前端开发，我使用了引导和css

我用过插件

首先，我有一个眼睛图标，可以打开引导模式：[quote.php]

<a href="#"><i class="view_data fa fa-eye" id="<?php echo $id;?>" aria-hidden="true"></i>
<div id="quote_details"></div>

<script src="../assets/js/jquery.printElement.js"></script>
<script>
$('.view_data').click(function(){
      var id = $(this).attr("id");

      $.ajax({
        url:"select.php",
        method:"post",
        data:{id:id},
        success:function(data){
          $("#quote_details").html(data);
          $("#dataModal_quote").modal("show");
          $('#btnPrint').on('click', function () {
              $('#printThis').printElement();
          });
        } 
      });

    })
</script>

印刷品
';
echo$输出；
}

我可以得到打印页面，但表格内容显示为没有表格设计，对齐不匹配，图像空间不是空白的

我的预期结果是一个打印页面，其中引导模式内的UI[表设计和对齐]与打印页面内容匹配

---

但打印页面中图像的空格应留空

请创建一段工作代码。请用虚拟数据代替动态数据，我给出的是一个工作代码，我们不能在

stackoverflow

代码段中运行php代码。您可以在php中添加虚拟数据，或者添加一个链接，我们可以在其中运行和检查代码。刚才我对代码做了一点更改。但是，如果我们看不到工作代码，我们将无法帮助您。谢谢

if(isset($_POST["id"])){

$output = '
<div id="dataModal_quote" class="modal fade">
     <div class="modal-dialog" >
      <div class="modal-content" style="width: 950px; margin-left: -190px;">
       <div class="modal-header qutviewhead">
        <h4 class="modal-title modelquthedtitle">Sample</h4>
        <button type="button" class="close qotviewclosebtn" data-dismiss="modal">&times;</button>
      </div>
       <div class="modal-body" style="height: 550px;  overflow: scroll; overflow-x: hidden; text-align: center; font-size: 11px;">
      <div class="header">
        <img src="sss.jpg" style="width: 100%;  height: 130px;">
      </div>
      <div style="display: flex; flex-wrap: wrap;">
        <div style="width: 15%;">
          <img src="sidebar.jpg" style="padding-top: 15px;  width: 105px;  height: 100%" align="left">
        </div>
        <div style="width: 85%;background: url("waterm.jpg");  background-repeat: no-repeat; background-position: center; margin-top: 15px;" id="printThis">';

$sql=mysqli_query($link,"SELECT * FROM items where id=".$_POST["id"]); 
while($item=mysqli_fetch_assoc($sql))
{ 
  $qno = $item['no'];
  $qdate = date('d-m-Y',strtotime($item['date']));
  $cusId = $item['cid'];
  $qSubject = $item['subject'];
  $qRefer = $item['refer'];
  $qDistAmt = $item['damount'];
  $qCgst = $item['cgst'];
  $qIgst = $item['igst'];
  $qSgst = $item['sgst'];
  $qOverAllamt =$item['total'];
  $qAmtAfterDis = $item['amount_after_discount'];
  $qComments = $item['comments'];
  $qPDfile = $item['pdf_file'];

} 

$total = $item['total'] - $item['amount_after_discount'];

 $customer_mst_sql=mysqli_query($link,"select cm.*,sm.name as state from customer as cm left join state as sm on sm.id=cm.state_id where cm.id=".$cusId) ;
  $customer=mysqli_fetch_assoc($customer_mst_sql);

  $cus_add = explode(",",$customer['address']);
 // print_r($cus_add);

  $addLineOne = ''; 
  $addLineTwo = '';

  if(count($cus_add) > 3){
  // greater than 3
  //Two lines
   $addLineOne = $cus_add[0].",".$cus_add[1].",".$cus_add[2].",";
   for($i=3;$i<count($cus_add);$i++){
    $addLineTwo .= $cus_add[$i].",";  
  }
}else{
  //LESS than or equal to 3
  //One line
 for($i=0;$i<count($cus_add);$i++){
  $addLineOne .= $cus_add[$i].",";  
}

}
$addLineThree = $customer['city'].','.str_replace(" ","",$customer['state']).'-'.$customer['pincode'];
            $output .= '<table  align="right" style="margin-top:10px;">
            <tr>
              <th style="font-size: 11px; padding: 0px 5px;">Quote No</th>
              <th style="font-size: 11px; padding: 0px 5px;">'.$qno.'</th>
              <tr>
                <th style="font-size: 11px; padding: 0px 5px;">DATE</th>
                <th style="font-size: 11px; padding: 0px 5px;">'.$qdate.'</th>
              </tr>
            </table>
            <p style="text-align: left; margin-top: 100px; line-height: 16px; font-size: 11px;">
              To<br>
              <b>'.$customer['company_name'].',</b>';
              if(!empty($addLineOne)){
                    $output .= '<br>'.$addLineOne;
                }
              if(!empty($addLineTwo)){
                    $output .= '<br>'.$addLineTwo;
                }
              if(!empty($addLineThree)){
                    $output .= '<br>'.$addLineThree;
                }
              if(!empty($customer['company_registered_no'])){
                    $output .= '<br><b>GSTIN: '.$customer['company_registered_no'].'</b>.';
                }
           $output .= '</p>
           <p style="text-align: left; line-height: 16px; font-size: 11px;">
              Sir,
            </p>
            <p style="text-align: left; margin-left: 40px; line-height: 16px; font-size: 11px;">
              SUB:  '.$qSubject.'<br>
              <b>Ref:  '.$qRefer.'</b>
            </p>
             <p style="margin-left: 20px; line-height: 16px; font-size: 11px;">I herewith enclosed my quote for your kind consideration.</p>
             <h4 style="font-weight: 900;"><u><b>QUOTATION</b></u></h4>
             <table style="width: 100%;">
              <tr>
                <th style="font-size: 11px; padding: 0px 5px;">SL</th>
                <th style="font-size: 11px; padding: 0px 5px;">DESCRITION</th>
                <th style="font-size: 11px; padding: 0px 5px;">UNIT</th>
                <th style="font-size: 11px; padding: 0px 5px;">RATE / UNIT</th>
                <th style="font-size: 11px; padding: 0px 5px;">CHARGES (Rs) </th>
              </tr>';

$products=array();
$product_sql=mysqli_query($link,"SELECT cpd.*,sm.name as service_name from  product_details as cpd left join service as sm on sm.id=cpd.sid where cpd.qid=".$_POST["id"]); 
while($product_item=mysqli_fetch_assoc($product_sql))
{ 
  $products[]=$product_item;
} 

$i=0;$total = 0;
foreach($products as $product)
  { $i=$i+1;
    if(!empty($product['service_name']))
    {
      $ser_name=$product['service_name'];
    }
    else
    {
      $ser_name=$product['description'];
    }
    $output.='<tr>
    <td style="font-size: 11px; padding: 0px 5px;">'.$i.'.</td> 
    <td style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;"><b>'.$product['description']." ".$product['service_name'].'</b></td> 
    <td style="font-size: 11px; padding: 0px 5px;">'.$product['quantity'].'</td>    
    <td style="font-size: 11px; padding: 0px 5px;">'.$product['price'].'.00</td>
    <td style="font-size: 11px; padding: 0px 5px;">'.$product['quantity']*$product['price'].'.00</td>
    </tr>';
    $subtotal = $product['quantity']*$product['price'];
    $total += $subtotal;
  }
        $output .= '

  <tr>
  <td colspan="4" style="font-size: 11px; padding: 0px 5px; text-align: right;">
  Total<br>';
  if($qDistAmt>0)
  {
   $output .=' Discount<br>';
 }
 if($customer['applicable']!='on')
 {
  if($customer['location']=='Outstation')
  {
    $output .='IGST@'.$qIgst.'%<br>';
  }
  else
  {
    $output .='CGST@'.$qCgst.'%<br>
    SGST@'.$qSgst.'%<br>';
  }
}
else
{
  $output .='Exempted vide LUT Acknowledgement, ARN-'.$customer['customer_no_tax_no'].', GST@0%<br>';
}


$output .= '<b>Grand Total:</b></td>;



<td align="right">'.
$total.'.00<br>';
if($qDistAmt>0)
{
  $output.= $qDistAmt.'.00<br>';
}

if($customer['applicable']!='on')
{
  if($customer['location']=='Outstation')
  {
    $tax_amount=$qAmtAfterDis*($qIgst/100);
    $output.= $tax_amount.'.00<br> ';
  }
  else
  {
    $tax_amount1=$qAmtAfterDis*($qCgst/100);
    $tax_amount2=$qAmtAfterDis*($qSgst/100);
    $output .= $tax_amount1.'.00<br>'.$tax_amount2.'.00<br>';
  }
}
else
{
  $output .='0.00<br>';
}


$output .= '<b>'.$qOverAllamt.'.00</b>

</td>

</tr> 
</table>
 <p style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;"><u><b>Scope of Work (Onsite and Offsite emergency)</b></u></p>
 <p style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;">'.$qComments.'</p>
 <p style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;"><b>PAYMENT TERMS:</b></p>';

 $payment_terms=array();
$payment_terms_sql=mysqli_query($link,"SELECT  cpt.*,mm.name as mileston_name from  crm_payment_terms  as cpt left join milestons_master as mm on mm.id=cpt.milestons_id where cpt.quotation_id='".$_POST["quote_id"]."'"); 
while($payment_term=mysqli_fetch_assoc($payment_terms_sql))
{ 
  $payment_terms[]=$payment_term;
} 
        $output .= '<p style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px; margin-left: 20px;">';
              $i=0;
foreach($payment_terms as $pay)
  { $i=$i+1; 

    $output .= $i.".".$pay['payment_description'].'<br><br>';
  } 
        $output .= '</p>
            <p style="text-align: left; font-size: 11px; padding: 0px 5px;">Kindly send the payment as early as possible.</p>

             <table style="width: 100%;">
              <tr>
                <th colspan="5" style="color:blue; text-align: center;"><i><b>ABC PRIVATE LIMITED</b></i></th>
              </tr>
              <tr>
                <td style="text-align: left; font-size: 11px; padding: 0px 5px;">PAN</td>
                <th style="text-align: left; font-size: 11px; padding: 0px 5px;" colspan="2">AA545615</th>
                <td rowspan="5" style=" width: 335px; font-size: 11px; padding: 0px 5px; line-height: 16px;">
                  <b>Dr. M. Gayathri., PhD</b><br>
                  Director / Chartered Engineer<br>
                  Plot No. 1148, Four Cross street, Annanagar West,<br>
                  Tambaram, Chennai – 600 050<br>
                  Competent Person Under Factories Act, TN & PY<br>
                  DISH Order: H1 / 11111 / 2017, Dt.16.10.2017 to 15.10.2020<br>
                  MOEF-NABET ORDER/ RH Expert: NABET/EIA/RA000/000/ 17.04.2015,<br>
                  TN order Auditor approval <br>order: 111111/09-I.Date: 29.03.2010<br>
                </td>
              </tr>
              <tr>
                <td style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;">GSTIN</td>
                <th style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;">33AAXCS1316B1ZL</th>
                <th style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;">State code: 33</th>
              </tr>
              <tr>
                <td style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;">SAC and Category</td>
                <th style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;" colspan="2">999999/Other professional, technical and business services</th>
              </tr>
              <tr>
                <td style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;">CIN No.</td>
                <th style="text-align: left; font-size: 11px; padding: 0px 5px; line-height: 16px;" colspan="2">U74999999999999999999</th>
              </tr>
              <tr>
                <td colspan="3" style="font-size: 11px; padding: 0px 5px; line-height: 16px;"><b>RTGS/NEFT: ICICI Bank Limited</b>, No: 100, School Road, Anna Nagar West Extension, Chennai 600 101, <b>AC No: 000000000000000</b>, IFSC: ICIC00000000, MICR:  601111111111</td>
              </tr>
            </table>
            </div>
            </div>
            <div style="margin-top: 15px;">
          <p style="background: #2e3192; color: #fff; padding: 10px 10px;">Plot No.1111, West End Colony, Anna Nagar West Extension, Chennai-600 050. <br> 
            Ph : 044-222222, 999999 33333. Email : gayutest@ss.com, Web : www.sssstest.in
          </p>
        </div>
        <div class="cusfooter">

        <button type="button" class="btn btn-default modcanbtn" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i> Cancel</button>
        <button type="button" class="btn btn-default modmailbtn"><i class="fa fa-envelope" aria-hidden="true"></i> Email</button>';
        $output .= '<a href="../pdf/quotation/'.$qPDfile.'" target="_blank" class="btn btn-default moddownbtn">Download</i></a>
        <button type="button" class="btn btn-default modpribtn"  id="btnPrint"> <i class="fa fa-print" aria-hidden="true"></i> Print</button>

    </div>


</div>
</div>
</div> ';



            echo $output;

                }