How to print specific HTML content in new page

by Génesis García Morilla

HTML

<div class="print">Print 1</div>
<div class="print">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;
}

JavaScript

function print(content) {
  let win = window.open();

  win.document.write(
    '<html><head>' +
    '<title>Report</title>' +
    '<style>' +
    `div {
      display: inline-flex;
      width: 200px;
      height: 200px;
      justify-content: center;
      align-items: center;
      background-color: #e9a9c7;
      color: #39464e;
     }` +
    '</style>' +
    '</head><body >'
  );
  win.document.write(content);
  win.document.write('</body></html>');

  setTimeout(() => {
    win.print();
    win.close();
  }, 0);
}

[...document.querySelectorAll('.print')]
.forEach(d => {
  d.addEventListener('click', e => {
    print(e.currentTarget.outerHTML);
  });
});