在IE 11中打印iframe只打印第一页 [英] Printing Iframe in IE 11 only prints first page

问题描述

我有以下代码来打印弹出窗口的内容：

  var frame = this._urlElement; 
 if（frame）{
 var content = frame.contentWindow.document.getElementById（content）; 
 if（content）{
 MarvalSoftware.UI.Dom.setStyles（content，{'overflow'：'visible'}）; 
} 
 frame.contentWindow.focus（）; 
 frame.contentWindow.print（）; 
 
  

其中 _urlElement 是一个iframe和它的内容doc有 overflow：auto 。当我在IE11中打印成PDF格式时，我只能看到第一页，并且内容没有完全切断，打印的PDF上也没有可见的滚动条。如果我尝试打印预览，即使在iframe中，我也会看到整个页面，并显示弹出窗口的大纲。

我试图从Iframe打印的页面有一个母版页，其中 content div与 overflow：auto 。当我这样打印Chrome和IE时，我在打印输出上看到一个滚动条，打印输出只有一页，所以在我的页面样式表中，我使用媒体查询打印覆盖了该溢出规则， code> overflow：visible 。然后，当我在Chrome上打印时，滚动条消失了，打印输出为两页。在IE中，滚动条也不见了，但打印出的页面在打印页面1的末尾被打乱了。

当我修改我的打印代码以创建一个新的IFrame，并将其插入要打印的文档中，将样式表和正文复制到新的iframe中，然后打印新的iframe，然后即使在IE上打印完整文档。也就是说，新的iframe不包含在母版页的任何元素中，因此，在母版页中是否有任何其他样式可以查找可能会导致此问题的内容，而不是 overflow


顺便说一句，我似乎只在使用Windows自己的'PDF打印机'打印到PDF时才会遇到这种情况。

解决方案

最有可能的原因：绝对定位 和OP的评论，我怀疑 #content 元素和/或它的一个或多个祖先元素（可能包括 body 或 html ）具有CSS属性/值 position：absolute; 。这往往会导致Internet Explorer在第一页后切断所有内容，而其他浏览器会打印所有内容。

解决方案：最简单的解决方案是删除绝对定位，至少对于印刷媒体。如果这不是一个选项，那么另一种方法是调整绝对定位的元素的CSS height 属性。在没有看到标记和CSS的情况下，我不能说什么高度需要设置哪个元素，但有可能会是 100％或者 auto 或这两者的某种组合。

---

其他可能性：iframe失去焦点

如果iframe的焦点以某种方式在 print（）函数触发，它可能会导致OP中描述的浏览器特定行为。如果您调用 print（）函数作为iframe的 contentWindow 的方法，大多数浏览器将打印iframe的内容。另一方面，IE浏览器将始终打印当前关注的任何窗口。

解决方案：不使用打印功能打印iframe直接嵌入一个临时打印按钮，并通过虚拟点击触发它，如下所示：

  var frame = this。 _urlElement; 
 if（frame）{
 var content = frame.contentWindow.document.getElementById（content）; 
 if（content）{
 MarvalSoftware.UI.Dom.setStyles（content，{'overflow'：'visible'}）; 
} 
 frame.contentDocument.body.insertAdjacentHTML（
'beforeend'，
'< div id =printonclick =window.focus（）; window.print （）;>< / div>'
）; 
 var printButton = frame.contentDocument.getElementById（'print'）; 
 printButton.click（）; 
 printButton.parentNode.removeChild（printButton）; 
} 
  

这实际上并没有消除设定焦点的需要，但我认为这可能是值得一试的，因为OP在他的评论中指出，从iframe中触发时，打印工作。

替代解决方案：通过用iframe的文档暂时替换父文档来工作。它不需要专注于iframe，但它是一个更加极端的解决方案，我期望遇到一些非常大且复杂的页面问题。

  var frame = this._urlElement; 
 if（frame）{
 var content = frame.contentWindow.document.getElementById（content）; 
 if（content）{
 MarvalSoftware.UI.Dom.setStyles（content，{'overflow'：'visible'}）; 
} 
 var doc = document.documentElement; 
 document.replaceChild（frame.contentDocument.documentElement，doc）; 
 window.setTimeout（function（）{
 window.print（）; 
 document.replaceChild（doc，document.documentElement）; 
}，100）; 
} 
  

*从用户界面打印时，IE始终打印顶层窗口默认。要打印iframe的内容，您必须选择它（例如，通过单击框架并按下CTRL + A），然后在打印对话框中选择选定，或者在打印预览中选择在屏幕上选择。

I have the following code to print the content of a popup window:

var frame = this._urlElement;
if (frame) {
    var content = frame.contentWindow.document.getElementById("content");
    if (content) {
        MarvalSoftware.UI.Dom.setStyles(content, { 'overflow': 'visible' });
    }
    frame.contentWindow.focus();
    frame.contentWindow.print();
}

where _urlElement is an iframe, and its content doc has overflow: auto. When I print to PDF in IE11, I only see the first page, and the content is not cleanly cut off, nor are any scrollbars visible on the printed PDF. If I try Print Preview, even inside the iframe, I see the whole page with the outline of the popup window.

The page I am trying to print from the Iframe has a master page, with a content div with overflow: auto. When I print like that, Chrome and IE, I see a scrollbar on the print-out, and the print-out is only one page, so in my page's stylesheet, I override that overflow rule with a media query for print, to overflow: visible. Then, when I print on Chrome, the scrollbar is gone, and the printout is two pages. In IE, the scrollbar is also gone, but the print-out is unceremoniously cut off at the end of printed page 1.

When I modify my print code to create a new IFrame, and insert it into the document to be printed, copy the stylesheets and body over to the new iframe, and print the new iframe, then even on IE, the full document is printed. That is, the new iframe is not contained in any elements of the master page, so, is there any other styling in the master page I can look for that could cause this, other than overflow?

BTW, I seem to only experience this behaviour when I print to PDF, using Windows's own 'PDF printer'.

解决方案

Most likely cause: absolute positioning

Based on the problem description and OP's comments, I suspect the #content element and/or one or more of its ancestor elements (possibly including body or html) has the CSS property/value position: absolute;. This tends to cause Internet Explorer to cut off everything after the first page, while other browsers print everything.

Solution: The easiest solution would be remove the absolute positioning, at least for print media. If that's not an option, then the alternative would be to adjust the CSS height property of the absolutely positioned element(s). Without seeing the markup and CSS, I can't say what height needs to be set on which element(s), but chances are, it's going to be either 100% or auto, or some combination of the two.

---

Other possibility: iframe losing focus

If the iframe's focus is being lost somehow before the print() function fires, it could cause the sort of browser-specific behavior described in the OP. Most browsers will print an iframe's content if you call the print() function as a method of the iframe's contentWindow. IE, on the other hand, will always print whatever window is currently in focus*.

Solution: Instead of having the print function print the iframe directly, have it embed a temporary print button and trigger it with a virtual click, like so:

var frame = this._urlElement;
if (frame) {
    var content = frame.contentWindow.document.getElementById("content");
    if (content) {
        MarvalSoftware.UI.Dom.setStyles(content, { 'overflow': 'visible' });
    }
    frame.contentDocument.body.insertAdjacentHTML(
      'beforeend',
      '<div id="print" onclick="window.focus();window.print();"></div>'
    );
    var printButton = frame.contentDocument.getElementById('print');
    printButton.click();
    printButton.parentNode.removeChild(printButton);
}

This doesn't actually eliminate the need to set the focus, but I figured it might be worth a try since the OP indicated in his comments that the printing works when triggered from within the iframe.

Alternative solution: This one works by temporarily replacing the parent document with the iframe's document. It does eliminate the need to focus on the iframe, but it's a much more extreme solution, and I'd expect to run into some issues with very large and complex pages.

var frame = this._urlElement;
if (frame) {
    var content = frame.contentWindow.document.getElementById("content");
    if (content) {
        MarvalSoftware.UI.Dom.setStyles(content, { 'overflow': 'visible' });
    }
    var doc = document.documentElement;
    document.replaceChild(frame.contentDocument.documentElement, doc);
    window.setTimeout(function() {
        window.print();
        document.replaceChild(doc, document.documentElement);
    }, 100);
}

* When printing from the user interface, IE always prints the top level window by default. To print an iframe's content, you have to select it (e.g. by clicking in the frame and hitting CTRL+A) and then choose "Selected" in the print dialog, or "As selected on screen" in the print preview.

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