javascript - 如何在单击模式内的打印按钮时打印引导模式内的内容?
问题描述
我想在引导模式中打印内容,在单击打印按钮时将图像空间留空,该按钮也在模式内部。
我已经在本地主机中使用 PHP 版本 5.6.15 和 mysqli 进行了尝试。对于前端开发,我使用了 bootstrap 和 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>
其次,引导模式的内容来自一个 ajax 调用,例如:[quote.php]
<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>
select.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">×</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;
}
我能够获得打印页面,但表格内容显示为没有表格设计、对齐不匹配和图像空间没有留空。
我的预期结果是一个打印页面,其中引导模式内的 UI[表格设计和对齐] 与打印页面内容相匹配。
但是打印页面中的图像空间应该留空
解决方案
推荐阅读
- julia - 我们可以在 Julia 中自定义文件打开缓冲区大小吗
- python - 用 python 读取实时数字
- asp.net-mvc - ASP.NET MVC 操作或 API
- c# - 如何序列化 Json 文件中的 T 类型
- c# - 使用 Tablelayoutpanel 为 DGW 创建标题行
- c - 使用 C 选择性地读取文件的字符串部分
- c# - 如何在Unity的水平布局中将特定的孩子放在前面
- python - 在更新了我的类和我创建精灵的方式之后,移动的功能不再起作用
- typescript - 如何计算 Iterable 的长度/大小/计数?
- sql-server - T-SQL:自连接的不同结果