JSFiddle - React, Tailwind, and code Playground

HTML

<button id="printButton" onclick="javascript:printPage()" >Print this page</button>

<h1 id='header'><b>Awesome Print Report</b></h1>
<iframe id="ifr1" src="http://www.africau.edu/images/default/sample.pdf"></iframe>
<iframe id="ifr2" src="http://www.africau.edu/images/default/sample.pdf"></iframe>
<iframe id="ifr3" src="http://www.africau.edu/images/default/sample.pdf"></iframe>

CSS

#header {
    margin-top: 20px;
}

@media print {
    #printButton {
        display: none;
    }
}

JavaScript

function printPage() {
    
  //window.print();
    
  for (var k=0; k<window.frames.length; k++) {
  alert(k)
    //window.frames[k].focus();
    alert(document.getElementById("ifr1"))
    alert(document.getElementById("ifr1").print())
    document.getElementById("ifr1")
  }
    
}