我正在尝试打印弹出模型但由于某种原因点击打印按钮不会调用任何东西。我的Jscript，Css代码和HTML如下
的Jscript
<script>
document.getElementById("btnPrint").onclick = function () {
printElement(document.getElementById("outborder"));
var modThis = document.querySelector("#printSection .modifyMe");
modThis.appendChild(document.createTextNode(" new"));
window.print();
}
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);
}
</script>
我的HTML代码
<?php
foreach ($orders as $order):
$products = unserialize($order->order_cart);
?>
<div id="<?php echo $order->order_id ?>" class="modal fade bs-example-modal-lg" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div id="outborder" style="
border: 1px solid #000;
">
<div class="modal-header">
<center><img src="http://www.webuyback.com.au/images/headera4.PNG" width="580px"/></center>
<hr />
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Order Details</h4>
</div>
<div class="dataTable_wrapper">
<center><table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<td>Order ID</td>
<td><?php echo $order->order_id ?></td>
</tr>
<tr>
<td>Order Date</td>
<td><?php echo date('d/m/Y', strtotime($order->order_date)) ?></td>
</tr>
<tr>
<td style="width: 208px;">Customer Name</td>
<td><?php echo $order->firstname . " " . $order->lastname ?>
</tr>
<tr>
<td>Payment Method</td>
<td><?php echo $order->payment_method ?></td>
</tr>
<tr>
<td>Delivery Method</td>
<td><?php echo $order->delivery_method ?></td> </tr>
</table></center>
</div>
<div class="modal-body">
<table border="2" class="table table-striped container">
<tr class="txt_bold">
<td></td>
<td>Device</td>
<td>Condition</td>
<td>IMEI</td>
<td>Price</td><br />
</tr>
<?php
$total = 0;
foreach ($products as $product):
?>
<tr>
<td><img src="<?php echo $product['image'] ?>" height="75" width="50"></td>
<td><?php echo $product['name'] ?></td>
<td><?php echo $product['condition'] ?></td>
<td><?php echo $product['imei'] ?></td>
<td><?php echo CURRENCY_SYMBOL.$product['price'] ?></td>
</tr>
<?php
$total += $product['price'];
endforeach;
?>
</table>
<div style="float:right;"><b>Total <?php echo CURRENCY_SYMBOL.$total?></b></div>
<br />
<center><img src="http://www.webuyback.com.au/images/signa4.png" width="580px" /></center>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="btnprint">Print</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<?php
endforeach;
?>
我的CSS如下
@media screen {
#printSection {
display: none;
}
}
@media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
.modal-content {
display:block;
}
非常感谢任何帮助。
谢谢Jayden
答案 0 :(得分：0)
您的网页上有很多JS错误。请检查您的开发工具。您还可以查看下面的代码段。请注意，如果iframe调用print，则无法成功打印。
document.getElementById("btnprint").onclick = function () {
printElement(document.getElementById("outborder"));
window.print();
}
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);
}@media screen {
#printSection {
display: none;
}
}
@media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
.modal-content {
display:block;
}<div id="" class="modal fade bs-example-modal-lg" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div id="outborder" style="
border: 1px solid #000;
">
<div class="modal-header">
<center><img src="http://www.webuyback.com.au/images/headera4.PNG" width="580px"/></center>
<hr />
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Order Details</h4>
</div>
<div class="dataTable_wrapper">
<center><table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<td>Order ID</td>
<td><?php echo $order->order_id ?></td>
</tr>
<tr>
<td>Order Date</td>
<td><?php echo date('d/m/Y', strtotime($order->order_date)) ?></td>
</tr>
<tr>
<td style="width: 208px;">Customer Name</td>
<td><?php echo $order->firstname . " " . $order->lastname ?>
</tr>
<tr>
<td>Payment Method</td>
<td><?php echo $order->payment_method ?></td>
</tr>
<tr>
<td>Delivery Method</td>
<td><?php echo $order->delivery_method ?></td> </tr>
</table></center>
</div>
<div class="modal-body">
<table border="2" class="table table-striped container">
<tr class="txt_bold">
<td></td>
<td>Device</td>
<td>Condition</td>
<td>IMEI</td>
<td>Price</td><br />
</tr>
<?php
$total = 0;
foreach ($products as $product):
?>
<tr>
<td><img src="<?php echo $product['image'] ?>" height="75" width="50"></td>
<td><?php echo $product['name'] ?></td>
<td><?php echo $product['condition'] ?></td>
<td><?php echo $product['imei'] ?></td>
<td><?php echo CURRENCY_SYMBOL.$product['price'] ?></td>
</tr>
<?php
$total += $product['price'];
endforeach;
?>
</table>
<div style="float:right;"><b>Total <?php echo CURRENCY_SYMBOL.$total?></b></div>
<br />
<center><img src="http://www.webuyback.com.au/images/signa4.png" width="580px" /></center>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="btnprint">Print</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<div id="printSection"></div>