4

Internet Explorer 8 doesn't allow to print background images.
Unfortunately I was asked to make this work.

There are "important" images in some pseudo elements which have to be printable.
I thought it might be possible to turn those background images into <img/> elements however it seems that it's not possible to read styles of pseudo elements in Internet Explorer 8 as it does not support getComputedStyle.

Any good ideas?

Related:
https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle
http://caniuse.com/getcomputedstyle/embed
SO "Getting pseudo-element style values"

Community
  • 1
  • 1
jantimon
  • 36,840
  • 23
  • 122
  • 185
  • Not sure if this is a viable alternative - but have you considered using PhantomJS or something similar to take a virtual screenshot of the whole page and save it as an image then either redirect to the image or embed it in a PDF? It would guarantee that everything that should be visible would be printed at the cost of a slight change in flow – Basic Feb 02 '14 at 12:37
  • @Basic I think this is one of the best solutions for cross browser printing. However we aren't allowed to install wkhtmltopdf or phantomjs. – jantimon Feb 02 '14 at 12:41
  • Just to clarify, I didn't mean install it on the client machine - I meant install it on the servers, generate the image there and serve it like any other image. Of course, if you're not able to install it on the servers, that's a bit of a show-stopper. – Basic Feb 02 '14 at 14:15
  • 1
    "`Internet Explorer 8 doesn't allow to print background images`". As far as I can remember, IE8 does allow to print background images. Only you need to tick a checkbox ("Print background colors and images") in Page Settings before printing. – Teemu Feb 03 '14 at 16:58

1 Answers1

3

This should work:

var img = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('background');

Edit: I have a working fiddle that doesn't use the querySelector:

var img = window.getComputedStyle(
    $(".element")[0], ':before'
).getPropertyValue('background');

Basically, you just want to get a element as first parameter in the getComputedStyle;

But that still doesn't fix the IE 8 requirement, as getComputedStyle isn't supported there, either... However, this question might provide the answer there.

Community
  • 1
  • 1
Cerbrus
  • 70,800
  • 18
  • 132
  • 147