Javascript 在IE中打印iframe

我有一个按钮，可以将要打印的报告加载到div中的“不可见”iframe中，并打印该iframe；用户按下按钮打印报告（包含在不同的页面上），除了打印对话框外，不改变页面或任何视觉中断。它可以在Chrome和Firefox中使用，但不能在IE中使用。在IE中，父页面是完整打印的，并且在页面底部插入一个小的乱七八糟的iframe（我正在加载iframe）

这是一个没有内容的空div，它就在那里，所以我有一个ID标记的地方，可以用Javascript对内容进行样式化和粘贴：

<div id="printerDiv"></div>

当我在IE中打印时，它会打印整页，然后在底部，即

#printerDiv

处，我会得到一个小iframe：

因此，内容正在加载，但它不仅打印iframe，而且也没有正确隐藏iframe。我在

#printerDiv

中插入的任何其他内容都会被正确隐藏，只有iframe会这样显示

我已经在Javascript函数中尝试了所有解决方案：使用

self.prin

t，使用

document.parentWindow.print

，将printerDiv上的样式更改为0px高度/宽度也不起作用

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

`
`<script>

function framePrint(whichFrame) {

parent[whichFrame].focus();

parent[whichFrame].print();

}

</script>`

功能框架打印（whichFrame）{
父[whichFrame].focus（）；
父[whichFrame].print（）；
}
`

---

将FRAMENAME更改为要打印的帧的名称。

您可以尝试以下操作：

使用类似jQuery的方法将报告放入

#printerDiv

中，并将其与CSS区分开来

在你的CSS上你有

#printerDiv{display:none;}
@media print{
    body *{display:none;}
    #printerDiv{display:block;height:100%;width:100%}
}

还有打印按钮javascript

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

---

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

<script type="text/javascript">
function selfPrint(){
    self.focus();
    self.print();
}
setTimeout('selfPrint()',2000);
</script>

函数selfPrint（）{
self.focus（）；
self.print（）；
}
setTimeout（'selfPrint（）'，2000）；

在我的例子中，解决方案是不隐藏我想要打印的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>

函数printFrame（frameId，targetContent）
{
var doc=$（'#'+frameId）.get（0）.contentWindow.document；
变量$body=$（'body'，doc）；
$body.html（$（'#'+targetContent.html（））；
setTimeout（函数（）{
$（'#'+frameId）.get（0.contentWindow.focus（）；
$（'#'+frameId）.get（0.contentWindow.print（）；
}, 1000);        
}

HTML:

我只想把这些东西印出来

要打印的按钮：

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

我对IE11也有同样的问题。IE似乎忽略了.focus（）调用，而是打印父页面和iframe。我的解决方案是在打印之前插入一个样式标记，隐藏除了iframe之外的所有内容，然后在调用打印之后删除样式。我的代码在这里

你试过使用吗？@Einacio我是，我曾经在我的屏幕CSS中使用

display:none

，在我的打印CSS中使用

display:block

，在Firefox中不起作用。我不知道它在IE中是否有效。您可以尝试从

窗口中选择帧。帧

数组而不是使用

此

，这可能是在中引用

窗口

ie@Einacio刚才，Chrome和FF只按他们应该的方式打印报告框架，即现在只打印父窗口和父窗口，它甚至没有在报告中显示iframe。你测试的IE版本是什么？我正在打印整个页面，其他内容都隐藏了。不使用iframe你只能在这个页面中加载你可以在打印之前在这个js函数的主体中添加一个类，然后在

@media print

css

body.specialClass*{…

iframe在点击按钮之前不存在，但是我尝试了这个代码（使用框架数组）来

focus（）

和

print（）

IE中的框架。同样，它在Chrome和Firefox中工作，但在IE中不工作。超时时间甚至不需要那么长。这也解决了我的问题，但有人能解释它为什么工作吗？这似乎在IE10中工作。对我们来说，我们动态注入IFRAME，因此我们还需要延迟“处理”（删除）同时，对于“可见性”问题，我们将绝对确定IFRAME在屏幕外的位置。{位置：“绝对”，顶部：0，左侧：-2000，“z索引”：20000，宽度：1024，高度：500，背景颜色：“白色”}这允许内容正确格式化（就好像它是在全屏附近渲染的，但是IE10会打印它。

    <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>

<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>