我有一个按钮，可以将要打印的报告加载到 div 内的“不可见”iframe 中并打印该 iframe；用户按下按钮即可打印报告（包含在不同的页面上），除了打印对话框之外，无需更改页面或任何视觉干扰。它适用于 Chrome 和 Firefox，但不适用于 IE。在 IE 中，父页面被完整打印，并且一个微小的混乱的 iframe 被插入到页面底部（我正在加载 iframe 的地方）。
这是没有内容的空 div，它就在那里，所以我有一个带有 ID 标记的位置，可以使用 Javascript 设置样式和粘贴内容：
<div id="printerDiv"></div>
这是 javascript 函数，我的按钮的 onClick 该函数会触发并将我的打印页面插入到 PrinterDiv 内的 iframe 中，加载此页面后打印：
function printPage(url) {
var div = document.getElementById("printerDiv");
div.innerHTML = '<iframe src="'+url+'" onload=this.contentWindow.print();>
</iframe>';
}
这是隐藏 div 的 CSS。我使用绝对定位将其移出可见屏幕区域。我曾经使用 display:none，但 Firefox 无法打印这种样式的 iframe：
#printerDiv{
position:absolute;
left:-9999px;
}
When I print in IE it prints the full page, and then at the bottom, where #printerDiv is, I get this little iframe:
因此内容正在加载，但它不仅仅打印 iframe，也没有正确隐藏 iframe。我插入的任何其他内容#printerDiv正确隐藏，只有 iframe 会这样显示。
我已经尝试了所有解决方案这个问题 https://stackoverflow.com/questions/1261561/printing-a-hidden-iframe-in-ie在我的 Javascript 函数中：使用self.print，使用document.parentWindow.print，将 PrinterDiv 上的样式更改为 0px 高度/宽度也不起作用。
我欢迎不使用 iframe 的解决方案（IE 似乎有很多问题），但我需要这种能力来加载屏幕上不可见的内容并通过按钮直接打印。
就我而言，解决方案是not隐藏我想要打印的 iframe。如果我隐藏它（使用显示：无；可见性：隐藏等），父页面将始终打印。
我没有实际隐藏框架，而是将其设为 10x10 并且无边框。现在这可以工作了（使用延迟技巧）。
示例代码：
<script type="text/javascript">
function printFrame(frameId, targetContent)
{
var doc = $('#'+frameId).get(0).contentWindow.document;
var $body = $('body',doc);
$body.html($('#'+targetContent).html());
setTimeout(function(){
$('#'+frameId).get(0).contentWindow.focus();
$('#'+frameId).get(0).contentWindow.print();
}, 1000);
}
</script>
HTML:
<div id="contentToPrint">
I just want to print this stuff
</div>
<iframe src="about:blank" id="printframe" style="border:0" width="10" height="10"></iframe>
打印按钮：
<a href="javascript:printFrame('printframe','contentToPrint')">Print frame</a>