Question

我正在使用this answer中的代码直接从打印按钮打印单独的页面。用户单击打印按钮，并将URL发送到打印功能。 print函数将单独的页面加载到display:none iframe中并打印iframe onLoad。它适用于IE，Chrome但不适用于Firefox。在Firefox中，它将页面加载到div中，但从不打印或打开打印对话框。事实证明，如果将iframe设置为display:none，则firefox不会打印iframe：

<div id="printerDiv" style="display:none"></div>

这是预期的行为吗？所有其他浏览器打印，我想在Bugzilla上发布。我尝试了一些css“技巧”，使div不显示用户可以看到的位置，但它总是以某种方式显示。我目前正在使用下面的CSS来使iframe不可见：

#printerDiv iframe{
width:1px !important;
height:1px !important;
border:0 !important;
margin:0 !important;
}

但是它的边距仍然存在，并且一旦生成iframe就会留下14px的差距。是否有某种方法可以在没有display:none属性的情况下使iframe在所有中不可见？更好的是，有没有办法在没有像这样的黑客的情况下做到这一点？

我甚至尝试使用CSS将iframe设置为display:block @print媒体类型和display:none屏幕，JS功能仍然无法打印。

Answer 1

如果您绝对将iFrame放在页面上，它仍然可以打印而用户不可见。

#printerDiv iframe{
  position: absolute;
  top: -1000px;
}

Answer 2

我有完全相同的问题。当display属性设置为none时，Firefox会为$('#printerDiv').css('height')，$('#printerDiv')[0].style.height或在元素上调用outerHeight()或outerWidth()时返回0。

我使用了z-index，它不会绑定你使用position:absolute。

所以，你可以在css文件中找到它：

#printerDiv { z-index: -10; }

然后，当你想让它可见时，只需使用jquery css（）调用设置z-index。

Answer 3

如果您控制iframe的内容，请将其自行打印：

<script type="text/javascript">
window.print()
</script>

Firefox不会打印iframe样式的display：none

3 个答案: