CODEWITHSUNDEEP
javascripthtmlcssprinting
Learning
Learning

Reputation: 20001

Printing part of web page not working with css changes

I want to print part of the page and using following method to do it. It prints that part of page but not with CSS effect

<body>
  <h1><b><center>This is a test page for printing</center></b><hr color=#00cc00 width=95%></h1>
  <b>Div 1:</b> <a href="javascript:printDiv('printthis')">Print</a><br>
  <div id="printthis" class="printthis">
    <div id="div1" class="div1">This is the div1's print output</div>
    <div id="divx2" class="div2">This is the div2's print output</div>
    <div id="divx3" class="div3">This is the div3's print output</div>
  </div>


  <br><br>
  <b>Div 2:</b> <a href="javascript:printDiv('div2')">Print</a><br>
  <div id="div2">This is the div2's print output</div>
  <br><br>
  <b>Div 3:</b> <a href="javascript:printDiv('div3')">Print</a><br>
  <div id="div3">This is the div3's print output</div>
  <iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
</body>

I changed the above example which i found on web so that it can use the print css.

For some reason it is not implementing the css when i print

https://codepen.io/anon/pen/QOGdXv

Current Printout doesn't reflect event font-size or other properties, it just show three lines.

This is the div1's print output
This is the div2's print output
This is the div3's print output

Upvotes: 0

Views: 1612

Answers (1)

Savado
Savado

Reputation: 585

Look into this:

https://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/#force-background-images-and-colors

You probably need this CSS:

-webkit-print-color-adjust: exact;
        print-color-adjust: exact;

EDIT:

In your javascript your are not using the css you provided, but referring to an non-exisiting css file. I minified your styling and added it as the printDivCSS variable.

I updated your codepen: https://codepen.io/anon/pen/LObyqO

This works. I hope this helps you understand the issue.

Upvotes: 2

Related Questions