在IE 11中打印iframe仅打印第一页

Question

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

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();
}

_urlElementiframe 在哪里,其内容是doc overflow: auto.当我在IE11中打印到PDF时,我只看到第一页,内容没有干净地切断,打印的PDF上也没有可见的滚动条.如果我尝试打印预览,甚至在iframe内部,我会看到整个页面都有弹出窗口的轮廓.

我试图从Iframe打印的页面有一个母版页,带有contentdiv overflow: auto.当我这样打印,Chrome和IE时,我在打印输出上看到一个滚动条,打印输出只有一页,因此在我的页面样式表中,我用一个用于打印的媒体查询覆盖该溢出规则overflow: visible.然后,当我在Chrome上打印时,滚动条消失,打印输出为两页.在IE中,滚动条也消失了,但在打印页面1的末尾,打印输出被毫不客气地切断.

当我修改我的打印代码以创建新的IFrame,并将其插入要打印的文档时,将样式表和正文复制到新的iframe,并打印新的iframe,然后即使在IE上,也会打印完整的文档.也就是说,新的iframe不包含在母版页的任何元素中,因此,我可以查找的母版页中是否有任何其他样式可能会导致这种情况,除此之外overflow？

顺便说一下,当我使用Windows自己的"PDF打印机"打印到PDF时,我似乎只会遇到这种情况.

Answer 1

最有可能导致:绝对定位

基于问题描述和OP的注释,我怀疑#content元素和/或其一个或多个祖先元素(可能包括body或html)具有CSS属性/值position: absolute;.这往往会导致Internet Explorer在第一页之后切断所有内容,而其他浏览器会打印所有内容.

解决方案:最简单的解决方案是删除绝对定位,至少对于打印介质.如果那不是一个选项,那么替代方法是调整height绝对定位元素的CSS 属性.在没有看到标记和CSS的情况下,我不能说要在哪个元素上设置什么高度,但可能性,它将是100%或者auto两者的某种组合.

其他可能性:iframe失去焦点

如果iframe的焦点在print()函数触发之前以某种方式丢失,则可能导致OP中描述的特定于浏览器的行为.如果您将该print()函数作为iframe的方法调用,大多数浏览器都会打印iframe的内容contentWindow.另一方面,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="print" onclick="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),然后在打印对话框中选择"已选择",或在打印预览中选择"在屏幕上选择".