print iframe content is not printing everything

Question

I created a JavaScript function to print the content of my iFrame.

    <a href="#" onclick="printBGReport();" align="center">Print Report</a> <br/>
    <script>
        function printBGReport(){
            var content = document.getElementById("printBGReport").innerHTML;
            var mywindow = window.open('', 'Print', 'height=600,width=800');
            mywindow.document.write(content);
            mywindow.document.close();
            mywindow.focus()
            mywindow.print();
            mywindow.close();
            //return;
        }
    </script>
<div id="printBGReport">
    <iframe id="reportBGID" name="reportBGID" src="myiFrameURL" width="900" height="1000" align="center" target="_self" valign="top" scrolling="yes" frameborder="no">
</div>

However, it is not printing all the content. Looks like it is just print the first page. Does anyone know why?

Thanks

Answer 1

Assuming the iframe is pointing to a page on the same domain (see CORS restrictions), you can call iframe.contentWindow.print().

document.getElementById("reportBGID").contentWindow.print()

If the iframe is pointing to another domain (which you have control of), you could use postMessage to trigger a function on the page to call window.print().

---

Alternatively, you could copy the iframe into a new window, and print that:

function printIframe(iframe) {
  const tempWindow = window.open('', 'Print', 'height=600,width=800')

  const newIframe = document.createElement('iframe')
  newIframe.src = iframe.src

  newIframe.style = `border: 0; width: 100%; height: 100%;`
  tempWindow.document.body.style = `margin: 0;`

  tempWindow.document.body.appendChild(newIframe)

  newIframe.onload = () => {
    tempWindow.print()
    tempWindow.close()
  }
}

<button onclick="printIframe(document.getElementById('iframe'));">
    Print Iframe
    </button>

<iframe id="iframe" src="https://example.com"></iframe>