在 Firefox 中打印 iframe 时如何打开打印预览对话框？

Question

与几乎所有其他主要浏览器不同，在 Firefox、 window.print打开打印对话框而不是打印预览对话框。 Firefox 开发人员很久以前就认识到了这个问题，他们决定实现一个不同的、仅限 Firefox 的 function browser.tabs.printPreview ，它打开当前活动选项卡的打印预览对话框，而不是“修复”它。

我正在打印隐藏的 iframe，理想情况下希望显示打印预览对话框，而不是打印对话框。 检测browser.tabs.printPreview对我来说很容易，但是，我无法找到一种方法让它作用于 iframe 而不是当前选项卡。

有没有办法使用browser.tabs.printPreview或其他方法打开 Firefox 中 iframe 的打印预览对话框？

澄清：这是针对我维护的一个 React 库react-to-print ，它用我们的组件包装用户的 JSX。 除了组件包装的内容（用户想要打印的内容）之外，我对页面上的内容没有任何控制权。

Answer 1

您需要使用一些 CSS 来更改 iframe 样式仅用于打印。

@media print { 
    iframe { /* Use your own selector here if you need more specificity. */
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100%;
        z-index: 10000;
    }
}

CSS 媒体查询更改网页在不同设备上的显示。 您可以编写 CSS 专门用于具有@media screen的浏览器和 CSS 专门用于使用@media print

CSS 假定您没有任何其他绝对元素浮动在z-index: 10000之上，并且 iframe 不在具有position: relative的元素内。 如果是，您需要进行更多样式设置以确保元素浮动在打印页面的 rest 上方。

这个 CSS 片段将确保只有您的 iframe 显示在打印预览中，并且类似于我目前在生产中使用的技术（也在 Firefox 上）。

Answer 2

我不知道，但是您可以在 css 中使用@media print来显示 iframe 并隐藏页面上的其他所有内容。 如果 iframe 的内容不是固定大小，那么您可以使用我的一个名为iframe- resizer 的库来解决这个问题。

我接受这只是一种解决方法，而不是简单的单行答案，但如果没有人想出更好的答案，这应该会让你得到你想要的结果。