在IE中打印iframe [英] Print iframe in IE

问题描述

我有一个按钮加载一个报告打印到一个不可见的iframe里面div和打印iframe;用户按下按钮以打印报告（包含在不同的页面上），而不改变页面或除了打印对话框之外的任何视觉中断。它适用于Chrome和Firefox，但不适用于IE。在IE中，父页面被完全打印，并在页面底部（我在加载iframe时插入一个小小的乱码iframe）。

I have a button that loads a report for print into an "invisible" iframe inside a div and prints that iframe; the user presses a button to print the report (contained on a different page) without changing pages or any visual disruption aside from the print dialog. It works in Chrome and Firefox but not IE. In IE the parent page is printed in full, and a tiny messed up iframe is inserted at the bottom of the page (where I'm loading the iframe).

这里没有内容的空div，所以我有一个ID标记的地方风格和粘贴内容与Javascript：

Here's the empty div without content, it's there so I have an ID tagged place to style and stick content with Javascript:

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

这里是javascript函数，onClick按钮这个函数触发并将我的打印页面插入到iframe里面printerDiv，加载此页面后，它打印：

Here's the javascript function, onClick of my button this function fires and inserts my print page into an iframe inside printerDiv, after loading this page it prints:

function printPage(url) {
    var div = document.getElementById("printerDiv");
    div.innerHTML = '<iframe src="'+url+'" onload=this.contentWindow.print();>
        </iframe>';
 }

这里是隐藏div的CSS。我使用绝对定位将其移出可见屏幕区域。我以前使用display：none，但是Firefox无法打印iframes的样式：

Here's the CSS hiding the div. I'm using absolute positioning to shift it off the visible screen area. I used to use display:none, but Firefox was unable to print iframes styled that way:

#printerDiv{
    position:absolute;
    left:-9999px;
}

当我在IE中打印时，它打印整页，然后在底部，其中 #printerDiv 是，我得到这个小iframe：

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显示为这样。

So the content's being loaded, but it's not printing just the iframe, and it's not hiding the iframe properly either. Any other content I insert into #printerDiv is hidden properly, only the iframe displays like that.

尝试了在我的Javascript函数中的此问题中的所有解决方案：using self.prin t，使用 document.parentWindow.print ，将printerDiv上的样式更改为0px height / width不起作用。

I've tried all solutions in this question in my Javascript function: using self.print, using document.parentWindow.print, changing the styles on the printerDiv to 0px height/width doesn't work either.

我欢迎不使用iframe的解决方案（IE似乎与他们有巨大的问题），但我需要这种能力加载内容不可见的屏幕上，

I'm welcome to solutions that don't use iframes (IE seems to have massive issues with them) but I need this ability to load content not visible on screen and print it directly via a button.

推荐答案

您可以尝试这样：

使用类似jQuery的 .load（）将报表放在 #printerDiv 并将它与CSS

use something like jQuery's .load() to put the report inside the #printerDiv and differenciate it with CSS

区分开。

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

p>

and the print button javascript

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

这篇关于在IE中打印iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！