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

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

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

当我修改我的打印代码以创建新的IFrame，并将其插入要打印的文档时，将样式表和正文复制到新的iframe，并打印新的iframe，然后甚至在IE上，完整的文档打印出来。也就是说，新的iframe不包含在母版页的任何元素中，因此，除了overflow: visible之外，我可以查找的母版页中是否还有其他样式可能导致此问题？

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

Answer 1

最有可能导致：绝对定位

根据问题描述和OP的评论，我怀疑#content元素和/或其一个或多个祖先元素（可能包括body或html）具有CSS属性/值position: absolute;。这往往会导致Internet Explorer在第一页之后切断所有内容，而其他浏览器会打印所有内容。

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

其他可能性：iframe失去焦点

如果在auto函数触发之前以某种方式丢失了iframe的焦点，则可能会导致OP中描述的浏览器特定行为。如果您将print()功能称为iframe print()的方法，则大多数浏览器都会打印iframe的内容。另一方面，IE将始终打印当前焦点的任何窗口*。

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

contentWindow

这实际上并没有消除设置焦点的需要，但我认为可能值得一试，因为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' });
    }
    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);
}

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

Answer 2

试试这个：

var content = document.getElementById('content');

try {
    content.contentWindow.document.execCommand('print', false, null);
} catch (e) {
    content.contentWindow.print();
}

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

2 个答案: