在 IE 中打印 iframe

Posted 2023-03-06

【中文标题】在 IE 中打印 iframe

【英文标题】：Print iframe in IE

【发布时间】：2011-12-03 00:41:21

【问题描述】：

我有一个按钮，可以将打印报告加载到 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;

当我在 IE 中打印时，它会打印整页，然后在底部，#printerDiv 所在的位置，我得到这个小 iframe：

所以内容正在加载，但它不只是打印 iframe，也没有正确隐藏 iframe。我插入到#printerDiv 的任何其他内容都被正确隐藏，只有 iframe 会这样显示。

我已经在我的 Javascript 函数中尝试了this question 中的所有解决方案：使用self.print，使用document.parentWindow.print，将printerDiv 上的样式更改为0px 高度/宽度也不起作用。

欢迎使用不使用 iframe 的解决方案（IE 似乎存在大量问题），但我需要这种能力来加载屏幕上不可见的内容并通过按钮直接打印。

【问题讨论】：

你试过使用@media rules of css吗？

@Einacio 我是，我曾经在我的屏幕 CSS 中使用 display:none，在我的打印 CSS 中使用 display:block，它在 Firefox 中不起作用。我不知道它是否在IE中也有效。

您可以尝试从window.frames 数组中选择框架，而不是使用this，这可能是在ie 中引用window

@Einacio 刚刚做到了，Chrome 和 FF 只按应有的方式打印报告框架，IE 现在只打印父窗口和父窗口，它甚至没有显示带有报告的 iframe。

你测试的是哪个 IE 版本？

【参考方案1】：

就我而言，解决方案是不隐藏我想要打印的 iframe。如果我隐藏它（使用 display:none; visibility:hidden 等），父页面将始终打印。

我没有真正隐藏框架，而是将其设置为 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"  ></iframe>

打印按钮：

<a href="javascript:printFrame('printframe','contentToPrint')">Print frame</a>

【讨论】：

这似乎适用于 IE10。对我们来说，我们动态注入 IFRAME，因此我们还需要延迟“处置”（移除）该帧，以便为弹出打印对话框留出时间。同样对于“可见性”问题，我们绝对将 IFRAME 定位在屏幕外。 position: "absolute", top: 0, left: -2000, 'z-index': 20000, width: 1024, height: 500, backgroundColor: "white" 这允许内容的格式正确（好像它是呈现接近全屏，但它使 IE10 将打印它。

【参考方案2】：

`<script>

function framePrint(whichFrame) 

parent[whichFrame].focus();

parent[whichFrame].print();



</script>`

<a href="javascript:framePrint('FRAMENAME');">Print</a>

将 FRAMENAME 更改为您要打印的框架的名称。

【讨论】：

在单击按钮之前 iframe 不存在，但我尝试将此代码（使用 frames 数组）到focus() 和print() IE 中的框架。它同样适用于 Chrome 和 Firefox，但不适用于 IE...

【参考方案3】：

我最近在使用 IE10 时遇到了同样的问题，添加了一个超时并得到了我想要的结果，打印出来的是 iFrame 而不是父页面：

<script type="text/javascript">
function selfPrint()
    self.focus();
    self.print();

setTimeout('selfPrint()',2000);
</script>

【讨论】：

超时甚至不必那么长。

这也解决了我的问题，但有人可以解释它为什么有效吗？

【参考方案4】：

我在 IE11 上遇到了同样的问题。似乎 IE 忽略了 .focus() 调用，而是打印父页面以及 iframe。我的解决方案是注入一个样式标签，在打印之前隐藏除 iframe 之外的所有内容，然后在调用打印后删除样式。我的代码在这里http://ironlasso.com/print-only-lightbox-or-modal-window-content/

【参考方案5】：

你可以试试这样的：

使用类似 jQuery 的 .load() 将报告放在 #printerDiv 中并使用 CSS 区分它

在你的 CSS 上

#printerDivdisplay:none;
@media print
    body *display:none;
    #printerDivdisplay:block;height:100%;width:100%

和打印按钮 javascript

$('#printerDiv').empty().load(url, function()
        window.print();
    ); //or whatever library/pure js you like

【讨论】：

我正在打印整个页面，其他所有内容都隐藏了。并且不使用 iframe

你只能在这个页面加载

可以在这个js函数中在body中添加一个class，然后在打印之前删除，然后在@media printcssbody.specialClass * ...