Printing Flash Content in Firefox

Flash and Firefox have always had a lot of compatibility problems - for instance, Flash content can’t be printed in Firefox.

A long time ago we found a workaround and published it as a free library. Three years have passed, but the bug still exists, and the fix is still relevant.

So here it is – a small library that allows to achieve correct Flash content printing in Firefox:
http://code.google.com/p/flash-print-fix/

For example, that’s how a Flex application is printed in Firefox:

And that’s how it looks like with the fix applied:

The idea is very simple:

1. Get a PNG screenshot.
2. Encode the PNG file in base64 string.
3. Add a picture with src=”data:img/png;base64,…” mce_src=”data:img/png;base64,…” to the page.
4. In CSS, specify to hide Flash while printing and to show the picture:

@media screen.flashScreenshot { display: none; }
@media print.printableFlashObj { display: none; };
.flashScreenshot { display: block; border: 0; outline: none; }

This entry was posted on Thursday, February 24th, 2011 at 9:31 pm by Margaret Skomorokh and is filed under Flex, Flash platform, Tips and tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

7 Responses to “Printing Flash Content in Firefox”

  1. Twitter Trackbacks for Printing Flash Content in Firefox: Flash and Firefox have always had a lot of compatibility problems -... #ultrared [anychart.com] on Topsy.com Says:
    February 25th, 2011 at 12:19 am

    […] Printing Flash Content in Firefox: Flash and Firefox have always had a lot of compatibility problems… anychart.com/blog/2011/02/24/printing-flash-content-in-firefox/ – view page – cached […]

  2. Ivan Sh. Says:
    February 25th, 2011 at 7:54 am

    Thank you for this fix!

    One bug occured for the flash application with non-static content (e.g. chart), when we should create new screenshot not only on “creationComplete”, but on every application update (e.g. on “updateComplete” event). But in this case there are many screenshots appears in Print Preview mode - one screenshot per each update.

    It can be fixed by the following changes in FlashPrintFix.setImg:

    elemlist = document.getElementsByName(”img”);
    for (var i = 0; i

  3. Ivan Sh. Says:
    February 25th, 2011 at 7:56 am

    elemlist = document.getElementsByName(”img”);
    for (var i = 0; i

  4. Timothy Loginov Says:
    February 25th, 2011 at 8:27 am

    Ivan, thank you, we will consider these changes.

  5. Ivan Sh. Says:
    February 25th, 2011 at 8:36 am

    Sorry for invalid msg :)

    elemlist = document.getElementsByName(”img”);
    for each( elem in elemlist )
    container.removeChild(elem);

    var img = document.createElement(”img”);
    img.name = “img”;
    img.setAttribute(”class”, “flashScreenshot”);
    img.src = “data:image/png;base64,”+imgData;

    container.appendChild(img);

    I.e. we set the name for each image, and on the next update we get all previous screenshots by the name and remove them before adding a new screenshot.

  6. Alex Batsuev Says:
    February 25th, 2011 at 8:55 am

    Ivan, you can submit ticket to google code project:
    http://code.google.com/p/flash-print-fix/issues/list

    The best way is to use object with images. I think we will fix it soon.

  7. Ivan Sh. Says:
    February 25th, 2011 at 1:16 pm

    OK, I’ve create a ticket.
    Thank you.

Leave a Reply