IE 上的 iframe.print 与 window.print - 以前的小字体答案

【问题标题】：iframe.print vs. window.print on IE - small font in formerIE 上的 iframe.print 与 window.print - 以前的小字体
【发布时间】：2011-11-08 19:20:20
【问题描述】：

在我们的 Web 应用程序中，我们有几个页面的打印功能，我们采用的方法是将当前页面的内容放入全局可用的 iframe 文档中并打印 iframe（使用 Javascript）。这在 Firefox 中工作得很好，但在 IE 中它以非常小的字体打印 iframe，几乎不可读。

在两个浏览器中应用的所有 CSS 都是相同的，我确保正在打印的 HTML 不会以任何方式溢出（使 IE 适合内容或其他内容）......而且 IE 打印仍然非常小。有趣的是，如果我将打印逻辑更改为写入新窗口，然后执行 window.print()，则在 IE 中一切正常，并且字体与 CSS 要求/指定的一样大。

有没有人在 IE 中遇到过类似的 iframe.print() 问题？

感谢您的帮助。

尼丁

【问题讨论】：

您有任何特定于打印的 CSS 吗？
一开始没有，但我在没有任何帮助的情况下创建了一个。即使使用特定的打印 CSS IE 也会以小字体打印 iframe。

标签： internet-explorer iframe printing

【解决方案1】：

我在解决同样的问题后发现了这个帖子。看起来这种行为即使在 IE11 中仍然存在。好消息是我能够找到解决方案，而无需打开新窗口然后致电window.print()。

诀窍是在 IE 中使用 document.execCommand（一直到 IE11），而在其他浏览器中优雅地回退到 iframe.print()。完整的解决方案可能看起来像这样（使用 jQuery 选择 iframe，但这完全是可选的）：

var target = $('iframe')[0];
try {
    target.contentWindow.document.execCommand('print', false, null);
} catch(e) {
    target.contentWindow.print();
}

这个解决方案的灵感来自这里关于 IE7 的一个非常古老的线程：http://bytes.com/topic/misc/answers/629926-ie7-printing-iframe-solution。不过，它仍然很重要。

【讨论】：

这在 IE 11.0.9600.16659 上对我不起作用。尝试打印 iframe 的内容时，字体仍然很小。
从非编程方面，当我进入设置 -> 打印 -> 页面设置并取消选中“启用收缩以适应”框时，文本大小恢复为正常大小。
该解决方案在 Firefox 中不起作用。见contentWindow.document.execCommand('print', false, null) not working in firefox。我在 Chrome 和 IE 中测试解决方案时出错，它解决了这个问题，但直到我将代码发布到生产环境中，我才发现要破坏 FF。傻我。

【解决方案2】：

今天遇到了关于 IE 问题的小字，为了解决我简单地调整了我的打印功能：

$(document).ready(function(){
$("#printFrame").click(function(){    
    if (document.queryCommandSupported('print')) 
    {
        $("#iframe").get(0).contentWindow.document.execCommand('print', false, null);
    } 
    else 
    {
        $("#iframe").get(0).contentWindow.focus();
        $("#iframe").get(0).contentWindow.print();
    }
  });
});

现在它似乎在 IE、Chrome 和 Firefox 上打印出来了。在这里发布是因为我很难找到这个解决方案，所以希望这会对某人有所帮助。

【讨论】：

【解决方案3】：

是的，我们看到了同样的事情。如果我们直接打开同一页面，它会按您的预期打印。当它加载到 iframe 中并打印时，它会使所有内容变小；不仅仅是字体。

这是在 Windows 7 上使用 IE9。

【讨论】：

【解决方案4】：

我采用的最终解决方案是使用 window.print() 而不是 iframe.print()。

【讨论】：

【解决方案5】：

正如“Heston Liebowitz”所写，使用“execCommand”是一个好主意和解决方案。但是我会为 IE 设置 if 条件，因为这个问题只出现在 IE 的情况下。以下是我的建议：

// Get the iframe element
var oIFrame = $('#iF_Print').get(0);
// Fix for IE : Allow it to render the iframe
oIFrame.focus();

var bMS_IE = false;
// Verify whether the browser is Internet Explorer (IE8,IE9,IE10 -> "msie", but for IE11 the name is changed into "trident").
var userAgent = window.navigator.userAgent.toLowerCase();
bMS_IE = ( (userAgent.indexOf('msie ') > -1) || (userAgent.indexOf("trident/") > -1) )?true:false;

if ( bMS_IE ) {
        try {
            oIFrame.document.execCommand('print', false, null);
        }catch(e) {
            window.print();
        }
}else {
    oIFrame.print();
}

【讨论】：