尝试在 IE 上打印弹出窗口时遇到问题
我使用 window.print() 函数，它在所有浏览器上都能完美运行，但在 IE 上，结果具有父页面内容。
我尝试在新页面上打开模型，但是样式出现了很大问题，我需要为新页面创建一个新的样式文件。
有什么办法可以解决这个问题吗？
最佳答案
尝试引用此示例可能会帮助您仅在 IE 浏览器中打印弹出窗口。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
@media screen {
#printSection {
display: none;
}
}
@media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
</style>
</head>
<body>
<div class="wrap">
<h1>Bootstrap Modal Example</h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModal">
Large modal
</button>
</div>
<div id="printThis">
<div id="MyModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- Modal Content: begins -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Your Headings</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div class="body-message">
<h4>Any Heading</h4>
<p>And a paragraph with a full sentence or something else...</p>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="btnPrint" type="button" class="btn btn-default">Print</button>
</div>
</div>
<!-- Modal Content: ends -->
</div>
</div>
</div>
<script>
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>
</body>
</html>输出:
我将其打印为 PDF 以在此处显示结果。
引用:
关于JavaScript : Print popup taking parent page content in IE，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59422716/