javascript window.print CSS @media not working

Question

I have this JS function when user clicks on print button.

<script>
function printDiv()
{
  var printer = window.open('','','width=300,height=300');
    printer.document.open("text/html");
    printer.document.write(document.getElementById('news_contents').innerHTML);

    printer.print();

}
</script>

And I included the CSS as

@media print {

  #news_content { 
     color: #666;
        font-size: 12px;
    font-family: Arial,Helvetica,sans-serif;
  }
}

However when user prints, the CSS did not apply. I checked the HTML header, the CSS script is indeed there. Why is it not working? When user prints from Mac, the image in the content area shrinks and became small. Anyway I can have it exactly the same as the website?

Thanks in advance.

Hi @SantiagoRebella thanks for the link. Doesn't seem to have any mistake in my coding, not sure why the CSS isn't applied. — Sylph
– Sylph, Commented Oct 4, 2012 at 0:14

andr · Accepted Answer · 2013-03-02 20:57:26Z

5

I have the same problem, what I did, was put the:

<style>
   @media print
   { 
     /..../
   }
</style>

Inside the DIV - I believe it's news_contents in your case.
Hope that helps.

edited Mar 2, 2013 at 20:57

andr

16.1k10 gold badges51 silver badges62 bronze badges

answered Mar 2, 2013 at 20:23

Tamiko

511 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Kevin Boucher · Accepted Answer · 2015-09-22 18:57:08Z

2

I believe you are having a problem because your @media declaration is in the parent window; and you are opening a new window and appending content to it for printing.

Therefore the new document in the new window knows nothing about your @media CSS declaration.

edited Sep 22, 2015 at 18:57

answered Oct 3, 2012 at 20:22

Kevin Boucher

16.8k3 gold badges51 silver badges57 bronze badges

2 Comments

Sylph Over a year ago

Hi, thanks for the answer. If I don't use the window.open, how should I go about? I tried to remove the window.open but then it won't print. Thank you!

Sylph Over a year ago

Hi there, thanks for the pointer. I managed to get it right from issue you pointed out. Thanks!

Collectives™ on Stack Overflow

javascript window.print CSS @media not working

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related