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

【问题标题】：How to open the print preview dialog when printing an iframe in Firefox?在 Firefox 中打印 iframe 时如何打开打印预览对话框？
【发布时间】：2020-04-19 22:01:58
【问题描述】：

与几乎所有其他主流浏览器不同，在 Firefox 中，window.print 打开打印对话框而不是打印预览对话框。这个问题是很久以前的recognized by Firefox devs，而不是“修复”它，他们决定实现一个不同的、仅限 Firefox 的函数browser.tabs.printPreview，它可以打开当前活动选项卡的打印预览对话框。

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

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

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

【问题讨论】：

标签： javascript firefox iframe printing print-preview

【解决方案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 media queries改变网页在不同设备上的显示。您可以使用 @media screen 专门为浏览器编写 CSS，使用 @media print 专门为打印编写 CSS

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

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

【讨论】：

您将 iframe 的大小调整为内容的大小，而不是 100vh
是的，没错。取决于页面的其余部分。如果我们这样做，可能会有其他元素从下面冒出来。
谢谢，不过，正如上面和下面提到的，我对用户在页面上拥有的其他元素的控制为零。
@MatthewHerbst 你能运行javascript吗？如果是这样，您可以将 iframe 移动为 body 标记的直接子级。
是的，我创建了 iframe，然后用 JavaScript 销毁它。

【解决方案2】：

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

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

【讨论】：

感谢您的宝贵时间。我应该指定我不控制页面上的内容，只控制我维护的库包装的部分，因此我无法按照您建议的方式隐藏页面的内容。因此，这并不能回答问题。
谢谢你的反对票。为什么不让您的库将 CSS 注入页面来执行此操作？
因为用户会看到内容变化的瞬间，这是我们不应该想要的。同样，打印来自 iframe。这个问题的答案应该是关于如何在 Firefox 中打开 iframe 的打印预览对话框。
Erm 不，他们不会看到闪光，因为浏览器中的内容不会改变，css @media print 规则只会被打印预览显示解释，而不是浏览器。我认为您所要求的不存在，试一试，它会给您带来您所追求的用户体验。