我正在尝试打印引导模式的内容，在单击模态内部的打印按钮时将图像空间留空。
但是，我在单击打印按钮时得到一个空白页，没有显示任何内容。
我在 xamp 服务器中使用 PHP 5、MySQL 5 和 Apache 尝试过这个。
首先，我有一个眼睛图标可以打开引导模式：[quote.php]
<td><a href="#" onclick="show_modal('<?php echo $quote['id'] ?>','bill_model.php','quotation_modal')"><i class="fa fa-eye"></i></a> </td>
<div id="quotation_modal" class="modal fade" role="dialog"> </div>
include "footer.php"
其次，是页脚.php
function show_modal(id, ajax_url, appednd_id) {
$.ajax({
url: ajax_url + '?action=' + appednd_id,
type: 'POST',
data: {
id: id
},
success: function(data) {
$('#' + appednd_id).html(data);
$('#' + appednd_id).modal('show');
}
});
}
$('#print').on('click', function(){ window.print(); });
三是bill_model.php：
<?php
if($_REQUEST['action'] == 'quotation_modal'){
$id =$_POST['id'];
?>
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<div class="col-md-12 " id="bill_model">
<div class="col-md-6 nopadding pull-left" id="logo1">
<div class="col-md-3">
<a><img src="logo.png" class="img-responsive" width="85px"; height="100px;" > </a>
</div>
<div class="col-md-9">
<h1 style="font-size: 24px;"> <span>Oth </span> <span style="color: #b29a10;">Gaaa</span> <span style="color:#008b36;"> Logis</span></h1>
<h1 style="color: green;">Smart P </h1>
<p style="font-size: 11px;">
</p>
</div>
</div>
<div class="col-md-6 nopadding pull-right" style="margin-top: 12px;" id="add1">
<p style="font-size: 11px;">
<b>Branch Office:</b>
11111
</p>
<p style="font-size: 11px;"><b>Mob:</b> 4242424242, <b>Ph:</b> 044 - 53535 | www.example.com</p>
<p style="font-size: 11px;"><b>GSTIN:</b> 3434342427174ZD</p>
<p style="font-size: 11px;"><b>Pan No:</b> AAAAAAAA</p>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<table style="width: 100%;">
<tbody style="font-size: 10px;">
<tr>
<td rowspan="6" style="border: 1px solid black;padding: 6px;text-align: left;vertical-align: top;">
<p style="font-size: 14px;line-height: 24px;"><label style="width: 150px;">Consignor Name:</label>test</p>
<p style="font-size: 14px;line-height: 24px;"><label style="width: 150px;">Address:</label>AAAAA</p>
<p style="font-size: 14px;line-height: 24px;"><label style="width: 150px;">Contact Number:</label>9999999999</p>
<p style="font-size: 14px;line-height: 24px;"><label style="width: 150px;">GSTIN:</label>EEEEEE</p>
</td>
<td style="border: 1px solid black;padding: 6px;text-align: left;">
<p><label>Bill No: </label>22222222222</p>
</td>
</tr>
<tr>
<td style="border: 1px solid black;padding: 6px;text-align: left;">
<p><label>Bill Date: </label>8/9/2001</p>
</td>
</tr>
<tr>
<td colspan="2" style="border: 1px solid black;padding: 6px;text-align: left;">
<p><label>Bill Branch:</label>Chennai </p>
</td>
</tr>
<tr>
<td colspan="2" style="border: 1px solid black;padding: 6px;text-align: left;">
<p><label>PAN NO:</label>eeeeeeeeee</p>
</td>
</tr>
<tr>
<td colspan="2" style="border: 1px solid black;padding: 6px;text-align: left;">
<p><label>GSTIN NO :</label>66666666666</p>
<p><label>State - Code :</label> TN-43</p>
</td>
</tr>
<tr><td colspan="2" style="border: 1px solid black;padding: 6px;text-align: left;">
<p><label>SAC CODE :TN</label> </p>
</td>
</tr>
</tbody>
</table>
<br/>
</div>
<div class="col-md-12 table-responsive mytable">
<table class="table table-bordered">
<thead>
<tr>
<th>Dkt No</th>
<th>Date</th>
<th>From</th>
<th>To</th>
<th>Mode</th>
</tr>
</thead>
<tbody id="append_data">
<tr>
<td>111111</td>
<td>22222222</td>
<td>AAAAAA</td>
<td>SSSSSSSSSSSS</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="15" rowspan="6" class="text-left"><b> Remarks </b> <br/>RRRRRRRRR</td>
<td>Sub Total</td>
<td>111111</td>
</tr>
<tr>
<td>SGST <span>3 %</span></td>
<td>333333333</td>
</tr>
<tr>
<td>CGST <span> 5 %</span></td>
<td>44444444444</td>
</tr>
<tr>
<td>IGST <span>5 %</span></td>
<td>55555555</td>
</tr>
<tr>
<td>Unloading charge</td>
<td>4</td>
</tr>
<tr>
<td> Halting charge</td>
<td>3</td>
</tr>
<tr>
<td colspan="13" class="text-left"> <b>In Words :eeee only</b></td>
<td colspan="2">Net Payable Amount</td>
<td>333333</td>
</tr>
<tr>
<td colspan="10" rowspan="5">
<h2 class="text-left"><b>For EX</b></h2><br/>
<div style="width:100%; height:50px;"><img src="qw.jpg" align="left" width="100px" height="45px"/><br/></div>
<h2 class="text-left"><b>Authorized Signatory</b></h2>
</td>
<td colspan="7">
<h2><b>Terms & Condition</b></h2>
</td>
</tr>
<tr>
<td colspan="8"><p class="text-left">1. PAYMENT WILL BE MADE AS PER PO AFTER SUBMISSION OF BILLS </p></td>
</tr>
<tr>
<td colspan="8"><p class="text-left"> 2. CHEQUE PAYBLE IN FAVOUR OF OM GAYATRI LOGISTICS </p> </td>
</tr>
<tr>
<td colspan="8"><p class="text-left">3. KINDLY MAKE THE PAYMENTYS WITHIN 15 DAYS ELSE INTEREST @24%P.A WILL BE CHARGED ON ALL OUTSTANDING AMOUNTS. </p></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<div class="btn-group">
<button type="button" class="btn btn-danger" id="print" onClick="window.print();"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="fa fa-close"></span> Close</button>
</div>
</div>
</div>
</div>
}
单击模态内的打印按钮时，我希望在模态内获取内容，将图像空间留空。
这就是我为一种 challan 形式所做的，它位于引导模态内部。因此，您需要做的是将此代码包含在您的.css文件中，并将该.css文件包含在您的页面或模态页面顶部以定位您的模态。它可能会对你有所帮助。
/*It only prints data inside the modal when appear, specially for bank challan form*/
@media print {
@page {
size: A4 portrait;
}
/* on modal open bootstrap adds class "modal-open" to body, so you can handle that case and hide body */
#generate_modal_pay.modal-open {
visibility: hidden;
}
#generate_modal_pay.modal-open .modal .modal-header,
#generate_modal_pay.modal-open .modal .modal-body {
visibility: visible; /* make visible modal body and header */
}
}
请记住一件事，这些行没有注释，这些是引导模式的 ID#generate_modal_pay.modal-open和#generate_modal_pay.modal-open .modal .modal-header,#generate_modal_pay.modal-open .modal .modal-body而这个#generate_modal_pay是模态体的id。
但是，如果您希望打印所有模态，我的意思是只说它是正文数据，然后只需添加此代码，该代码将适用于所有模态，无论您包含.css文件。
/*It only prints data inside the modal when appear, specially for bank challan form*/
@media print {
@page {
size: A4 landscape;
}
/* on modal open bootstrap adds class "modal-open" to body, so you can handle that case and hide body */
body.modal-open {
visibility: hidden;
}
body.modal-open .modal .modal-header,
body.modal-open .modal .modal-body {
visibility: visible; /* make visible modal body and header */
}
}
首先，我有一个打开引导模式的眼睛图标：[quote.php]
<style>
@media screen {
#printSection {
display: none;
}
}
@media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position: absolute;
left:0;
top:0;
padding: 50px 0px 20px 40px;
margin: 100px 0px 40px 100px;
}
}
</style>
<td><a href="#" class="view_data" id="<?php echo $quote['id'] ?>"><i class="fa fa-eye"></i></a> </td>
<div id="MyModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog" style=" margin-top: -12%;">
<!-- Modal Content: begins -->
<div class="modal-content" style="width: 950px; margin-left: -190px;">
<div class="modal-header viewhead">
<h4 class="modal-title" style="text-align: center; margin-right: 305px;">Quote</h4>
<button type="button" class="close viewclosebtn" data-dismiss="modal">×</button>
</div>
<!-- Modal Body -->
<div class="modal-body" style="height: 560px; overflow: scroll; overflow-x: hidden;">
<div class="header">
<img src="img1.jpg" style="width: 100%; height: 130px;">
</div>
<div style="display: flex; flex-wrap: wrap;">
<div style="width: 15%;">
<img src="img2.jpg" style="padding-top: 15px; width: 105px; height: 100%" align="left">
</div>
<div style="width: 85%;background: url('img3.jpg'); background-repeat: no-repeat; background-position: center; margin-top: 15px;">
<div id="printThis">
<div class="msg">
</div>
</div>
</div>
</div>
</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>
<button id="btnPrint" type="button" class="btn btn-default modpribtn"><i class="fa fa-print" aria-hidden="true"></i> Print</button>
<button type="button" class="btn btn-default moddownbtn"><i class="fa fa-download" aria-hidden="true"></i> Download</button>
</div>
</div>
</div>
</div>
<script>
$('.view_data').click(function(){
var id = $(this).attr("id");
$.ajax({
url:"bill_model.php",
method:"post",
data:{test:id},
success:function(data){
$(".msg").html(data);
$("#MyModal").modal("show");
}
});
})
document.getElementById("btnPrint").onclick = function () {
printElement(document.getElementById("printThis"));
}
function printElement(elem) {
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
$printSection.innerHTML = "";
$printSection.appendChild(domClone);
window.print();
}
</script>
塞农德是bill_model.php
if(isset($_POST['test'])){
echo '<div class="row">
<div class="col-md-12">
<table style="width: 100%;">
<tbody style="font-size: 10px;">
<tr>
<td rowspan="6" style="border: 1px solid black;padding: 6px;text-align: left;vertical-align: top;">
<p style="font-size: 14px;line-height: 24px;"><label style="width: 150px;">Consignor Name:</label>test</p>
<p style="font-size: 14px;line-height: 24px;"><label style="width: 150px;">Address:</label>AAAAA</p>
<p style="font-size: 14px;line-height: 24px;"><label style="width: 150px;">Contact Number:</label>9999999999</p>
<p style="font-size: 14px;line-height: 24px;"><label style="width: 150px;">GSTIN:</label>EEEEEE</p>
</td>
<td style="border: 1px solid black;padding: 6px;text-align: left;">
<p><label>Bill No: </label>22222222222</p>
</td>
</tr>
<tr>
<td style="border: 1px solid black;padding: 6px;text-align: left;">
<p><label>Bill Date: </label>8/9/2001</p>
</td>
</tr>
<tr>
<td colspan="2" style="border: 1px solid black;padding: 6px;text-align: left;">
<p><label>Bill Branch:</label>Chennai </p>
</td>
</tr>
<tr>
<td colspan="2" style="border: 1px solid black;padding: 6px;text-align: left;">
<p><label>PAN NO:</label>eeeeeeeeee</p>
</td>
</tr>
<tr>
<td colspan="2" style="border: 1px solid black;padding: 6px;text-align: left;">
<p><label>GSTIN NO :</label>66666666666</p>
<p><label>State - Code :</label> TN-43</p>
</td>
</tr>
<tr><td colspan="2" style="border: 1px solid black;padding: 6px;text-align: left;">
<p><label>SAC CODE :TN</label> </p>
</td>
</tr>
</tbody>
</table>
<br/>
</div>
<div class="col-md-12 table-responsive mytable">
<table class="table table-bordered">
<thead>
<tr>
<th>Dkt No</th>
<th>Date</th>
<th>From</th>
<th>To</th>
<th>Mode</th>
</tr>
</thead>
<tbody id="append_data">
<tr>
<td>111111</td>
<td>22222222</td>
<td>AAAAAA</td>
<td>SSSSSSSSSSSS</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="15" rowspan="6" class="text-left"><b> Remarks </b> <br/>RRRRRRRRR</td>
<td>Sub Total</td>
<td>111111</td>
</tr>
<tr>
<td>SGST <span>3 %</span></td>
<td>333333333</td>
</tr>
<tr>
<td>CGST <span> 5 %</span></td>
<td>44444444444</td>
</tr>
<tr>
<td>IGST <span>5 %</span></td>
<td>55555555</td>
</tr>
<tr>
<td>Unloading charge</td>
<td>4</td>
</tr>
<tr>
<td> Halting charge</td>
<td>3</td>
</tr>
<tr>
<td colspan="13" class="text-left"> <b>In Words :eeee only</b></td>
<td colspan="2">Net Payable Amount</td>
<td>333333</td>
</tr>
<tr>
<td colspan="10" rowspan="5">
<h2 class="text-left"><b>For EX</b></h2><br/>
<div style="width:100%; height:50px;"><img src="qw.jpg" align="left" width="100px" height="45px"/><br/></div>
<h2 class="text-left"><b>Authorized Signatory</b></h2>
</td>
<td colspan="7">
<h2><b>Terms & Condition</b></h2>
</td>
</tr>
<tr>
<td colspan="8"><p class="text-left">1. PAYMENT WILL BE MADE AS PER PO AFTER SUBMISSION OF BILLS </p></td>
</tr>
<tr>
<td colspan="8"><p class="text-left"> 2. CHEQUE PAYBLE IN FAVOUR OF OM GAYATRI LOGISTICS </p> </td>
</tr>
<tr>
<td colspan="8"><p class="text-left">3. KINDLY MAKE THE PAYMENTYS WITHIN 15 DAYS ELSE INTEREST @24%P.A WILL BE CHARGED ON ALL OUTSTANDING AMOUNTS. </p></td>
</tr>
</tfoot>
</table>
</div>
</div>';
}