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

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

• javascript
• html

Share Improve this question Follow edited Dec 18, 2018 at 17:39 t.niese 40.9k99 gold badges7878 silver badges109109 bronze badges asked Dec 18, 2018 at 17:06 Code GuyCode Guy 10511 silver badge77 bronze badges 3

• How are the iframe contents structured exactly? What do you mean by "first page"? – Omar Himada Commented Dec 18, 2018 at 17:08
• The iframe content is structured in my <iframe> tag. It is a html content from another website. "first page" because it is a big content (multiples pages when print), but only the first page is printing. – Code Guy Commented Dec 18, 2018 at 17:10
• It is just printing until the iframe height. height="1000" – Code Guy Commented Dec 18, 2018 at 17:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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."></iframe>