print div html code with css

Question

I have this html code

function printDiv(divName) {
  var printContents = document.getElementById(divName).innerHTML;
  var originalContents = document.body.innerHTML;

  document.body.innerHTML = printContents;

  window.print();

  document.body.innerHTML = originalContents;
}

<div class="container">
  <div class="row">
    <div class="col s6 l6">
      <div class="center" id="div_id" style="height: 400px;width: 600px; position:relative; background-color: #ff0;">
        <img class="responsive-img" id="profile" width="200" src="https://picsum.photos/200">
      </div>
    </div>


    <div class="col s6 l6">
      <div class="card-panel" id="first_name">
        <span class="black-text"></span>
      </div>
      <a class="waves-effect waves-light btn" id="print" onclick="printDiv('div_id')">PRINT</a>
    </div>
  </div>
</div>

what I want is to print the div tag that contains the image with the css format or at least the position. is there anyway to do that?

Richard Parnaby-King · Accepted Answer · 2018-08-17 13:14:14Z

2

The javascript is printing the innerHTML of the div (the img only). By changing the printContents variable to outerHTML you also get the div with its styling:

var printContents = document.getElementById(divName).outerHTML;

function printDiv(divName) {
  var printContents = document.getElementById(divName).outerHTML;
  var originalContents = document.body.innerHTML;

  document.body.innerHTML = printContents;

  window.print();

  document.body.innerHTML = originalContents;
}

body { -webkit-print-color-adjust: exact !important; }

<div class="container">
  <div class="row">
    <div class="col s6 l6">
      <div class="center" id="div_id" style="height: 400px;width: 600px; position:relative; background-color: #ff0;">
        <img class="responsive-img" id="profile" width="200" src="https://picsum.photos/200">
      </div>
    </div>


    <div class="col s6 l6">
      <div class="card-panel" id="first_name">
        <span class="black-text"></span>
      </div>
      <a class="waves-effect waves-light btn" id="print" onclick="printDiv('div_id')">PRINT</a>
    </div>
  </div>
</div>

edited Aug 17, 2018 at 13:14

answered Aug 17, 2018 at 9:07

Richard Parnaby-King

15k11 gold badges75 silver badges131 bronze badges

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

5 Comments

Reub Over a year ago

the snippet doesnt include the yellow bg of the div

Chan MT Over a year ago

Browser ignore background color by default. Adding the CSS body { -webkit-print-color-adjust: exact !important; } enables it for Chrome.

Richard Parnaby-King Over a year ago

@ChanMT I never knew of this property. I've added it to the answer.

Reub Over a year ago

how do I include positioning as well? it works tho. thanks!

Reub Over a year ago

Collectives™ on Stack Overflow

print div html code with css

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related