How to open the print preview dialog when printing an iframe in Firefox?

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.

Joundill · Answer 1 · 2020-05-08T09:59:38.947

0

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).

edited May 08 '20 at 09:59

answered May 07 '20 at 03:16

Joundill

6,828
12
36
50

1

You to size the iframe to the size of it’s content, rather than 100vh – David Bradshaw May 08 '20 at 09:39
Yeah, true. Depends on the rest of the page though. There could be other elements poking out from underneath if we do that. – Joundill May 08 '20 at 10:01
Thanks, however, as mentioned above and below, I have zero control over what other elements the user has on the page. – Matthew Herbst May 08 '20 at 18:28
@MatthewHerbst Are you able to run javascript? If so, you could move the iframe to be a direct child of the body tag. – Joundill May 08 '20 at 23:48
Yes, I create and then later destroy the iframe with JavaScript. – Matthew Herbst May 09 '20 at 01:05
Then you just attach the iframe as an element directly in the tag, and this solution works. – Joundill May 09 '20 at 01:21

score -1 · Answer 2 · answered May 03 '20 at 12:56

-1

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.

answered May 03 '20 at 12:56

David Bradshaw

11,859
3
41
70

Thank you for your time. I should have specified that I do not control the content that is on the page, only the portion that the library I maintain wraps, so it's not possible for me to hide the page's content in the way you suggest. As such, this does not answer the question. – Matthew Herbst May 03 '20 at 21:53
Thank you for the down vote then. Why not just have your library inject the CSS into the page to do this? – David Bradshaw May 03 '20 at 23:10
Because the user would see the flash of content change which is not something we should want. Again, printing is from an iframe. The answer to this question should be regarding how to open the print preview dialog of an iframe in Firefox. – Matthew Herbst May 06 '20 at 06:46
Erm no they will not see a flash, as the content would not change in the browser, the css `@media print` rule would only be interpreted by the print preview display, not the browser. I don't think what you're asking for exists, give this a try it will give you the user experience you're after. – David Bradshaw May 06 '20 at 11:39

How to open the print preview dialog when printing an iframe in Firefox?

2 Answers2