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

Question

Unlike just about every other major browser, in Firefox, window.print opens the print dialog instead of the print preview dialog. This issue was recognized by Firefox devs a long time ago, and, rather than "fix" it, they decided to implement a different, Firefox-only function browser.tabs.printPreview that opens the print preview dialog for the current active tab.

I am printing a hidden iframe, and ideally want to display the print preview dialog, not the print dialog. It's easy enough for me to feature detect browser.tabs.printPreview , however, I haven't been able to find a way to make it act on an iframe instead of the current tab.

Is there a way to open the print preview dialog for an iframe in Firefox, either using browser.tabs.printPreview or some other method?

Clarification: this is for a React library that I maintain, react-to-print , that wraps a user's JSX with our component. Except for what is wrapped by the component (the content the user wants to print) I do not have any control over content on the page.

Answer 1

You'll want to use some CSS to change the iframe style just for printing.

@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 change the display of webpages on different devices. You can write CSS specifically for browsers with @media screen and CSS specifically for printing with @media print

The CSS assumes that you don't have any other absolute elements floating above z-index: 10000 , and that the iframe isn't inside an element with position: relative . If it is, you'll need to do some more styling to make sure the element is floating above the rest of the page on print.

This CSS snippet will ensure that only your iframe is displayed in print previews, and is similar to a technique which I am currently using in production (on Firefox too).

Answer 2

Not that I am aware of, but you can use @media print In your css to show the iframe and hide everything else on the page. If the content of the iframe is not a fixed size, then you could use a library of mine called iframe-resizer to overcome that problem.

I accept that this is all a bit of a workaround rather than a simple one line answer, but if no one comes up with a better answer this should get you the result your after.