How to print a specific HTML element

by Génesis García Morilla

HTML

<div>Print 1</div>
<div>Print 2</div>

CSS

div {
  display: inline-flex;
  width: 200px;
  height: 200px;
  justify-content: center;
  align-items: center;
  background-color: #e9a9c7;
  color: #39464e;
  cursor: pointer;
}

@media print {
  body.print-element *:not(.print) {
    display: none;
  }
}

JavaScript

function print_this(elem) {
  document.body.classList.add('print-element')
  elem.classList.add('print')
  window.print()
  document.body.classList.remove('print-element')
  elem.classList.remove('print')
}

document.querySelectorAll('div').forEach(elem => 
  elem.onclick = () => print_this(elem))